{"version":3,"file":"648cf9a5-7850970bcb6bdb509450.js","mappings":"yXAmDA,IAAMA,GAAS,+FA4DTC,GAAW,+NAqBXC,GAAe,sFAOfC,GAAkB,k1BAqElBC,GAAS,2oBAuDFC,EAAU,WACnB,IAoBmBC,EAAaC,EAAmBC,EApB7CC,GAAgBC,EAAAA,EAAAA,QAAuB,MACvCC,GAAWD,EAAAA,EAAAA,QAAuB,MAClCE,GAAcF,EAAAA,EAAAA,QAAuB,MACrCG,GAAWH,EAAAA,EAAAA,QAAuB,MAClCI,GAAWJ,EAAAA,EAAAA,QAAuB,MAClCK,GAAcL,EAAAA,EAAAA,QAAuB,MAE3C,GAAwBM,EAAAA,EAAAA,UAAS,KAA1BC,EAAP,KAAaC,EAAb,KAGA,GAAgCF,EAAAA,EAAAA,WAAS,GAAlCG,EAAP,KAAiBC,EAAjB,KACA,GAAkCJ,EAAAA,EAAAA,WAAS,GAApCK,EAAP,KAAkBC,EAAlB,KACA,GAAoCN,EAAAA,EAAAA,WAAS,GAAtCO,EAAP,KAAmBC,EAAnB,KACA,GAAoCR,EAAAA,EAAAA,WAAS,GAAtCS,EAAP,KAAmBC,EAAnB,KACA,GAAoCV,EAAAA,EAAAA,WAAS,GAAtCW,EAAP,KAAmBC,EAAnB,KACA,IAAoCZ,EAAAA,EAAAA,WAAS,GAAtCa,GAAP,MAAmBC,GAAnB,MACA,IAAoCd,EAAAA,EAAAA,WAAS,GAAtCe,GAAP,MAAmBC,GAAnB,MAEMC,GAAc,MAED3B,EAgBT,kBAhB0D,IAApCC,IAAAA,EAAW,aAAyB,IAAjBC,IAAAA,GAAQ,IACvD0B,EAAAA,EAAAA,YAAU,WACN,IAAMC,EAAUC,SAASC,cAAc9B,GACjC+B,EAASF,SAASG,cAAc,UAOtC,OANAD,EAAOE,KAAO,aACdF,EAAOG,QAAQC,OAASpC,EACxBgC,EAAO9B,MAAQA,EACf8B,EAAOK,UAAY,cACnBL,EAAOG,QAAQG,UAAY,MAC3BT,MAAAA,GAAAA,EAASU,YAAYP,GACd,WACHH,MAAAA,GAAAA,EAASW,YAAYR,MAE1B,CAAChC,KAKU,SAACA,EAAaC,EAAmBC,QAAiB,IAApCD,IAAAA,EAAW,aAAyB,IAAjBC,IAAAA,GAAQ,IACvD0B,EAAAA,EAAAA,YAAU,WACN,IAAMC,EAAUC,SAASC,cAAc9B,GACjC+B,EAASF,SAASG,cAAc,UAOtC,OANAD,EAAOE,KAAO,aACdF,EAAOG,QAAQC,OAASpC,EACxBgC,EAAO9B,MAAQA,EACf8B,EAAOK,UAAY,cACnBL,EAAOG,QAAQG,UAAY,OAC3BT,MAAAA,GAAAA,EAASU,YAAYP,GACd,WACHH,MAAAA,GAAAA,EAASW,YAAYR,MAE1B,CAAChC,IAGRyC,CAAU,eAEVb,EAAAA,EAAAA,YAAU,WACNc,OAAOC,WAAa,IAAM/B,EAAQ,KAAOA,EAAQ,QAClD,CAACD,IAGJ,IAAMiC,GAAc,CAChBvC,EACAC,EACAE,EACAL,EACAI,EACAA,GAGEsC,IAAYC,EAAAA,EAAAA,eAAc,CAC5BC,MAAO,uBAwBX,OArBwB,SAAC/C,EAAaC,EAAmBC,QAAiB,IAApCD,IAAAA,EAAW,aAAyB,IAAjBC,IAAAA,GAAQ,IAC7D0B,EAAAA,EAAAA,YAAU,WACN,IAAMC,EAAUC,SAASC,cAAc9B,GACjC+B,EAASF,SAASG,cAAc,UAQtC,OAPAD,EAAOgB,IAAMhD,EACbgC,EAAO9B,MAAQA,EACf8B,EAAOG,QAAQc,MAAQ,IACvBjB,EAAOG,QAAQe,WAAa,IAC5BlB,EAAOG,QAAQgB,QAAU,gCACzBnB,EAAOG,QAAQiB,OAAS,yBACxBvB,MAAAA,GAAAA,EAASU,YAAYP,GACd,WACHH,MAAAA,GAAAA,EAASW,YAAYR,MAE1B,CAAChC,IAGRqD,CACI,yEAIA,yBACI,QAAC,KAAD,OACA,QAAC,KAAD,OACA,QAAC,KAAD,MACI,QAAC1D,EAAD,MACI,2CACA,iSAUHkD,IACG,QAAC,KAAD,CACIS,SAAO,EACPC,KAAMC,EAAAA,EACNC,IAAKC,EAAAA,KAMT,QAAC,KAAD,CACIJ,SAAO,EACPC,KAAMI,EAAAA,EACNF,IAAKG,EAAAA,KAOb,QAAClE,EAAD,CAEImE,OAAO,SACPC,IAAI,aACJC,KAAK,+CAEL,QAAC,KAAD,CAAQC,OAAO,WAAf,sBAGJ,QAAC,KAAD,OAEA,QAACnE,EAAD,CAAoBoE,IAAKxD,IACrB,eAAK4B,UAAU,kBACX,QAAC,EAAA6B,EAAD,CACIlB,IAAI,mDACJmB,IAAI,WACJC,MAAO,CAAEC,MAAO,QAHpB,wBAMJ,eAAKhC,UAAU,iBACX,eAAKA,UAAU,aACX,oDACA,aAAGA,UAAU,gBAAb,iZAaJ,eAAKA,UAAU,aACX,QAAC,IAAD,UAoCZ,QAACzC,EAAD,MACI,QAAC,IAAD,CACI0E,QAAS,kBAAMpD,GAAc,IAC7BqD,aAAc5C,OAItB,QAAC,KAAD,CACI6C,OAAQvD,EACRgD,IAAK1D,EACLkE,MAAOC,EAAAA,EACPC,QAAQ,QACRC,OAAQ,GACRC,gBAAgB,YAEhB,4DACA,wSAQA,aACIhB,OAAO,SACPC,IAAI,aACJC,KAAK,6GAHT,eASJ,QAACnE,EAAD,MACI,QAAC,IAAD,CACI0E,QAAS,kBAAMxD,GAAY,IAC3ByD,aAAc5C,OAItB,QAAC,KAAD,CAAWmD,MAAOC,EAAAA,EAAaC,WAAYnE,KAE3C,QAAC,KAAD,CAAU+B,YAAaA,GAAaqC,KAAMC,EAAAA,MAE1C,QAACtF,EAAD,MACI,QAAC,IAAD,CACI0E,QAAS,kBAAMtD,GAAa,IAC5BuD,aAAc5C,OAItB,QAAC,KAAD,CAAWqD,WAAYjE,EAAW+D,MAAOK,EAAAA,KAEzC,QAACvF,EAAD,MACI,QAAC,IAAD,CACI0E,QAAS,kBAAMlD,GAAc,IAC7BmD,aAAc5C,OAItB,QAAC,KAAD,CACI6C,OAAQrD,EACR8C,IAAK3D,EACLmE,MAAOW,EAAAA,EACPT,QAAQ,QACRC,OAAQ,GACRC,gBAAgB,YAEhB,oDACA,kRAQA,aACIhB,OAAO,SACPC,IAAI,aACJC,KAAK,wFAHT,eASJ,QAACnE,EAAD,MACI,QAAC,IAAD,CACI0E,QAAS,kBAAMhD,GAAc,IAC7BiD,aAAc5C,OAItB,QAAC,KAAD,CACI6C,OAAQnD,EACR4C,IAAKzD,EACLiE,MAAOY,EAAAA,EACPV,QAAQ,OACRC,OAAQ,GACRC,gBAAgB,YAEhB,0CACA,2MAMA,aACIhB,OAAO,SACPC,IAAI,aACJC,KAAK,yFAHT,eAiBJ,QAACnE,EAAD,MACI,QAAC,IAAD,CACI0E,QAAS,kBAAM9C,IAAc,IAC7B+C,aAAc5C,OAGtB,QAAC,KAAD,CACI6C,OAAQjD,GACR0C,IAAK9D,EACLsE,MAAOa,EAAAA,EACPX,QAAQ,QACRC,OAAQ,GACRC,gBAAgB,YAEhB,gDACA,2OAOA,aACIhB,OAAO,SACPC,IAAI,aACJC,KAAK,8GAHT,eASJ,QAACnE,EAAD,MACI,QAAC,IAAD,CACI0E,QAAS,kBAAM5C,IAAc,IAC7B6C,aAAc5C,OAItB,QAAC,KAAD,CACI6C,OAAQ/C,GACRwC,IAAK5D,EACLoE,MAAOc,EAAAA,EACPZ,QAAQ,OACRC,OAAQ,GACRC,gBAAgB,YAEhB,0CACA,wOAOA,aACIhB,OAAO,SACPC,IAAI,aACJC,KAAK,sFAHT,eASJ,QAAC,KAAD,CACIc,gBAAgB,QAChBW,UAAU,iJACVC,KAAK,YACLC,KAAK,kBACL1C,IAAK2C,EAAAA,KAGT,QAAC,KAAD,CAAWpC,KAAMqC,EAAAA,EAAYnC,IAAKoC,EAAAA,EAAWC,WAAS,IAClD,cAAIzD,UAAU,iBAAd,2CAGA,eAAKA,UAAU,yBACX,mCACoB,KAChB,aACI+B,MAAO,CACH2B,MAAO,QACPC,eAAgB,aAEpBnC,OAAO,SACPC,IAAI,aACJC,KAAK,8CAPT,mBAUK,IAZT,KAaO,KACH,aACIK,MAAO,CACH2B,MAAO,QACPC,eAAgB,aAEpBnC,OAAO,SACPC,IAAI,aACJC,KAAK,4DAPT,mBAUK,IAxBT,iNA8BI,oBACA,mBA/BJ,0BAkCA,QAACjE,EAAD,MACI,aACIsE,MAAO,CACH4B,eAAgB,YAChBD,MAAO,SAEXlC,OAAO,SACPC,IAAI,aACJC,KAAK,+CAEL,kBACI7B,KAAK,SACLG,UAAU,kCAFd,qBAOJ,aACIwB,OAAO,SACPC,IAAI,aACJC,KAAK,6DAEL,kBACI7B,KAAK,SACLG,UAAU,kCAFd,wBAUhB,QAAC,KAAD,QAEJ,QAAC,KAAD","sources":["webpack://vf-flight-3-q2-2021/./src/views/finnish.tsx"],"sourcesContent":["// Emotion types\n/// <reference types=\"@emotion/react/types/css-prop\" />\n// import { css } from \"@emotion/react\";\nimport styled from \"@emotion/styled\";\nimport { StaticImage } from \"gatsby-plugin-image\";\n\n// Subtitles\n// import campaignSubs from \"file-loader!../assets/subtitles/campaign-fi.vtt\";\n\nimport React, { useRef, useEffect, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\n\n// Images\nimport datacenter from \"../assets/images/datacenter.jpg\";\nimport solar from \"../assets/images/solar.jpg\";\nimport aviation from \"../assets/images/aviation.jpg\";\nimport wind from \"../assets/images/wind.jpg\";\nimport steelCase from \"../assets/images/fi-flight4-22/steel-case.jpg\";\nimport person from \"../assets/images/fi-flight5-23/anna-borg.png\";\n\n// Video\nimport heroMp4 from \"../assets/videos/fi-flight4-22/hero.mp4\";\nimport heroWebM from \"../assets/videos/fi-flight4-22/hero.webm\";\nimport heroStandingMp4 from \"../assets/videos/fi-flight4-22/hero-standing.mp4\";\nimport heroStandingWebM from \"../assets/videos/fi-flight4-22/hero-standing.webm\";\nimport infoMp4 from \"../assets/videos/info-fi.mp4\";\nimport infoGraphic from \"../assets/videos/fi-flight5-23/infographic.mp4\";\nimport forestMp4 from \"../assets/videos/fi-flight5-23/forest.mp4\";\nimport forestWebM from \"../assets/videos/fi-flight5-23/forest.webm\";\n\nimport {\n    Button,\n    Case,\n    FooterFi,\n    // Headline,\n    Layout,\n    MapImage,\n    Metadata,\n    NavigationFi,\n    VideoHero,\n    locationsFinnish,\n    QuoteAndImage,\n    InfoVideo,\n    Achievements,\n    FlyingHat,\n} from \"../components\";\nimport { Waypoint } from \"react-waypoint\";\nimport { Quiz } from \"../components/quiz-fi\";\n\n// Styling\n\nconst StickyBtn = styled.a`\n    position: sticky;\n    top: 80px;\n    z-index: 10;\n`;\n\n/*const FullImg = styled.div`\n    position: relative;\n    @media screen and (max-width: 768px) {\n        margin-top: 0;\n        margin-bottom: 0;\n    }\n    h2 {\n        position: absolute;\n        color: #fff;\n        top: 40%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        text-align: center;\n        max-width: 470px;\n        @media screen and (max-width: 768px) {\n            font-size: 25px;\n            line-height: 24px;\n            top: 40%;\n            width: 100%;\n        }\n    }\n    img {\n        width: 100%;\n        @media screen and (max-width: 768px) {\n            height: 200px;\n            object-fit: cover;\n            object-position: center;\n        }\n    }\n`;*/\n\n// const VideoWrapper = styled.div`\n//     max-height: 660px;\n//     overflow: hidden;\n//     width: 100%;\n//     margin-top: 0;\n//     @media screen and (max-width: 768px) {\n//         max-height: none;\n//         section > div > div {\n//             max-height: 470px;\n//         }\n//     }\n//     section {\n//         //padding-bottom: 41.25%;\n//         padding-bottom: 32.25%;\n//         margin-top: 0;\n//     }\n//     video {\n//         object-fit: cover !important;\n//         pointer-events: none !important;\n//         object-position: bottom !important;\n//     }\n// `;\n\nconst HeroTextBox = styled.div`\n    text-align: center;\n    max-width: 50%;\n    margin-bottom: 0px;\n\n    h1 {\n        font-size: 3.35rem;\n    }\n\n    p {\n        font-size: 22px;\n    }\n\n    @media screen and (max-width: 768px) {\n        max-width: 85%;\n        p {\n            font-size: 18px;\n        }\n    }\n`;\n\nconst WaypointWrapper = styled.div`\n    margin: 0;\n    span {\n        margin: 0;\n    }\n`;\n\nconst HydrogenProofpoint = styled.div`\n    margin-bottom: 0;\n    display: flex;\n    flex-direction: row;\n\n    @media screen and (max-width: 990px) {\n        flex-direction: column;\n    }\n\n    .hydrogenBody {\n        text-align: left;\n        max-width: 50%;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n\n        @media screen and (max-width: 990px) {\n            max-width: 100%;\n        }\n\n        .textPart {\n            padding: 70px;\n            background-color: #edf1f6;\n\n            @media screen and (max-width: 1200px) {\n                padding: 40px;\n            }\n\n            @media screen and (max-width: 990px) {\n                padding: 30px;\n            }\n        }\n\n        .quizPart {\n            padding: 70px;\n\n            @media screen and (max-width: 1200px) {\n                padding: 3px 40px;\n            }\n\n            @media screen and (max-width: 990px) {\n                max-width: 100%;\n                padding: 30px;\n            }\n\n            @media screen and (max-width: 480px) {\n                padding: 15px;\n            }\n        }\n    }\n\n    .hydrogenText {\n        width: 80%;\n        line-height: 2.2rem;\n\n        @media screen and (max-width: 1200px) {\n            width: 100%;\n        }\n    }\n\n    .hydrogenImage {\n        width: 50%;\n\n        @media screen and (max-width: 990px) {\n            width: 100%;\n        }\n    }\n`;\n\nconst ButtonRow = styled.div`\n    margin-bottom: 25px;\n    margin-right: 0;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    gap: 50px;\n\n    a {\n        // width: 120px;\n\n        &:first-of-type {\n            // margin-right: 10px;\n        }\n    }\n\n    @media screen and (max-width: 990px) {\n        display: flex;\n        margin-right: 0;\n        margin-bottom: 0px;\n    }\n\n    button {\n        background-color: #2071b5;\n        color: white;\n        border: none;\n        border-radius: 26px;\n        font-size: 14px;\n        cursor: pointer;\n        width: 150px;\n        height: 45px;\n        padding: 0;\n\n        :hover {\n            color: white;\n        }\n\n        @media screen and (max-width: 990px) {\n            width: 140px;\n            min-width: 0;\n            padding: 0px 15px 0px 15px;\n        }\n\n        @media screen and (max-width: 480px) {\n            font-size: 12px;\n            padding: 0px 15px 0px 15px;\n            width: 120px;\n        }\n    }\n    @media screen and (max-width: 480px) {\n        gap: 20px;\n    }\n`;\n\n// Markup\nexport const Finnish = () => {\n    const datacenterRef = useRef<HTMLDivElement>(null);\n    const steelRef = useRef<HTMLDivElement>(null);\n    const aviationRef = useRef<HTMLDivElement>(null);\n    const oceanRef = useRef<HTMLDivElement>(null);\n    const solarRef = useRef<HTMLDivElement>(null);\n    const hydrogenRef = useRef<HTMLDivElement>(null);\n\n    const [zoom, setZoom] = useState(4.2);\n\n    // Waypoints\n    const [playInfo, setPlayInfo] = useState(false);\n    const [playInfo2, setPlayInfo2] = useState(false);\n    const [casePoint1, setcasePoint1] = useState(false);\n    const [casePoint2, setcasePoint2] = useState(false);\n    const [casePoint3, setcasePoint3] = useState(false);\n    const [casePoint4, setcasePoint4] = useState(false);\n    const [casePoint5, setcasePoint5] = useState(false);\n\n    const offsetValue = \"30%\";\n\n    const vwoScript = (url: string, selector = \"head\", async = true) => {\n        useEffect(() => {\n            const element = document.querySelector(selector);\n            const script = document.createElement(\"script\");\n            script.type = \"text/plain\";\n            script.dataset.cmpSrc = url;\n            script.async = async;\n            script.className = \"cmplazyload\";\n            script.dataset.cmpVendor = \"s31\";\n            element?.appendChild(script);\n            return () => {\n                element?.removeChild(script);\n            };\n        }, [url]);\n    };\n\n    vwoScript(\"./vwoFi.js\");\n\n    const gtmScript = (url: string, selector = \"head\", async = true) => {\n        useEffect(() => {\n            const element = document.querySelector(selector);\n            const script = document.createElement(\"script\");\n            script.type = \"text/plain\";\n            script.dataset.cmpSrc = url;\n            script.async = async;\n            script.className = \"cmplazyload\";\n            script.dataset.cmpVendor = \"s905\";\n            element?.appendChild(script);\n            return () => {\n                element?.removeChild(script);\n            };\n        }, [url]);\n    };\n\n    gtmScript(\"./gtmFi.js\");\n\n    useEffect(() => {\n        window.innerWidth > 768 ? setZoom(4.2) : setZoom(3.75);\n    }, [zoom]);\n\n    // Order important for scrollTo, same as array of map-markers\n    const articleRefs = [\n        steelRef,\n        aviationRef,\n        solarRef,\n        datacenterRef,\n        oceanRef,\n        oceanRef,\n    ];\n\n    const isDesktop = useMediaQuery({\n        query: \"(min-width: 600px)\",\n    });\n\n    const autoblockScript = (url: string, selector = \"body\", async = true) => {\n        useEffect(() => {\n            const element = document.querySelector(selector);\n            const script = document.createElement(\"script\");\n            script.src = url;\n            script.async = async;\n            script.dataset.cmpAb = \"1\";\n            script.dataset.cmpCodesrc = \"1\";\n            script.dataset.cmpHost = \"c.delivery.consentmanager.net\";\n            script.dataset.cmpCdn = \"cdn.consentmanager.net\";\n            element?.appendChild(script);\n            return () => {\n                element?.removeChild(script);\n            };\n        }, [url]);\n    };\n\n    autoblockScript(\n        \"https://cdn.consentmanager.net/delivery/autoblocking/7322ad843057.js\"\n    );\n\n    return (\n        <>\n            <Metadata />\n            <NavigationFi />\n            <Layout>\n                <HeroTextBox>\n                    <h1>Miksi fossiilivapaa?</h1>\n                    <p>\n                        Kaikki yksityisasiakkaille ja pk-yrityksille Suomessa\n                        myymämme sähkö on tuotettu ilman fossiilisia\n                        polttoaineita. Haluamme vähentää CO2-päästöjä\n                        entisestään ja mahdollistaa fossiilivapaan elämän.\n                        Fossiilivapaan sähkösopimuksen kautta olet mukana\n                        työssämme. Lue miten.\n                    </p>\n                </HeroTextBox>\n\n                {isDesktop ? (\n                    <VideoHero\n                        primary\n                        webM={heroWebM}\n                        mp4={heroMp4}\n                    // subtitles={campaignSubs}\n                    // subLang=\"\"\n                    // subLabel=\"\"\n                    ></VideoHero>\n                ) : (\n                    <VideoHero\n                        primary\n                        webM={heroStandingWebM}\n                        mp4={heroStandingMp4}\n                    // subtitles={campaignSubs}\n                    // subLang=\"\"\n                    // subLabel=\"\"\n                    ></VideoHero>\n                )}\n\n                <StickyBtn\n                    // style={{ marginTop: 0 }}\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    href=\"https://www.vattenfall.fi/sahkosopimukset/\"\n                >\n                    <Button intent=\"primary\">Tee sähkösopimus</Button>\n                </StickyBtn>\n\n                <FlyingHat />\n\n                <HydrogenProofpoint ref={hydrogenRef}>\n                    <div className=\"hydrogenImage\">\n                        <StaticImage\n                            src=\"../assets/images/fi-flight4-22/hydrogen-half.png\"\n                            alt=\"hydrogen\"\n                            style={{ width: \"100%\" }}\n                        />\n                    </div>\n                    <div className=\"hydrogenBody\">\n                        <div className=\"textPart\">\n                            <h4>Muutamme päästöt vesihöyryksi</h4>\n                            <p className=\"hydrogenText\">\n                                Vety voi korvata fossiiliset polttoaineet eri\n                                teollisuudenaloilla, ja fossiilivapaan\n                                sähkösopimuksen avulla olet mukana tässä\n                                kehityksessä. Vedyn päästöt ovat vain\n                                vesihöyryä, joten vetyteollisuus voi vähentää\n                                CO2-päästöjä merkittävästi. Vetyä saadaan\n                                erottamalla vedestä happi ja vety\n                                elektrolyysillä eli sähköenergian avulla. Kun\n                                sähkö tuotetaan fossiilivapaasti, myös vety on\n                                fossiilivapaata.\n                            </p>\n                        </div>\n                        <div className=\"quizPart\">\n                            <Quiz />\n                        </div>\n                    </div>\n                </HydrogenProofpoint>\n                {/* \n                <Headline\n                    primary=\"Katso, kuinka kehitämme fossiilivapaata tulevaisuutta\"\n                    secondary=\"Fossiilivapaalla sähkösopimuksella olet mukana kehityksessä.\"\n                /> */}\n\n                {/* <div ref={steelRef} style={{ marginBottom: 0 }}>\n                    <StaticImage\n                        src=\"../assets/images/steel-full.jpg\"\n                        alt=\"aviation\"\n                        style={{ width: \"100%\" }}\n                    />\n                </div>\n\n                <div style={{ maxWidth: \"660px\", textAlign: \"center\" }}>\n                    <h2>Fossiilivapaa teräs</h2>\n                    <p>\n                        Fossiilivapaan teräksen kehitys voi vähentää maailman\n                        hiilidioksidipäästöjä 7 %.\n                    </p>\n\n                    <div style={{ marginTop: \"35px\" }}>\n                        <a\n                            target=\"_blank\"\n                            rel=\"noreferrer\"\n                            href=\"https://www.vattenfall.fi/fokuksessa/innovaatiot/hybrit-tekee-teraksen-valmistuksesta-fossiilivapaata\"\n                        >\n                            <Button intent=\"primary\">Lue lisää</Button>\n                        </a>\n                    </div>\n                </div> */}\n\n                <WaypointWrapper>\n                    <Waypoint\n                        onEnter={() => setcasePoint1(true)}\n                        bottomOffset={offsetValue}\n                    />\n                </WaypointWrapper>\n\n                <Case\n                    inView={casePoint1}\n                    ref={oceanRef}\n                    image={wind}\n                    imageOn=\"right\"\n                    offset={50}\n                    backgroundColor=\"#EDF1F6\"\n                >\n                    <h4>Muutamme tuulisen sään hyväksi sääksi</h4>\n                    <p>\n                        Tuulinen sää ei ole huono sää. Päinvastoin, sillä se\n                        tuottaa fossiilivapaata sähköä. Korkean huipunkäyttöajan\n                        ansiosta merituulivoiman tuotanto sopii erityisen hyvin\n                        fossiilivapaan vedyn tuotantoon. Fossiilivapaan\n                        sähkösopimuksen kautta olet mukana tuulivoiman\n                        kehityksessä.\n                    </p>\n                    <a\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        href=\"https://www.vattenfall.fi/vastuullisuus/fossiilivapaa-kehitys/tuulivoimalla-hiilipaastojen-vahentamiseen/\"\n                    >\n                        Lue lisää\n                    </a>\n                </Case>\n\n                <WaypointWrapper>\n                    <Waypoint\n                        onEnter={() => setPlayInfo(true)}\n                        bottomOffset={offsetValue}\n                    />\n                </WaypointWrapper>\n\n                <InfoVideo video={infoGraphic} startVideo={playInfo} />\n\n                <MapImage articleRefs={articleRefs} data={locationsFinnish} />\n\n                <WaypointWrapper>\n                    <Waypoint\n                        onEnter={() => setPlayInfo2(true)}\n                        bottomOffset={offsetValue}\n                    />\n                </WaypointWrapper>\n\n                <InfoVideo startVideo={playInfo2} video={infoMp4} />\n\n                <WaypointWrapper>\n                    <Waypoint\n                        onEnter={() => setcasePoint2(true)}\n                        bottomOffset={offsetValue}\n                    />\n                </WaypointWrapper>\n\n                <Case\n                    inView={casePoint2}\n                    ref={aviationRef}\n                    image={aviation}\n                    imageOn=\"right\"\n                    offset={50}\n                    backgroundColor=\"#EDF1F6\"\n                >\n                    <h4>Fossiilivapaa lentopolttoaine</h4>\n                    <p>\n                        Vähäpäästöisen, fossiilivapaalla sähköllä ja\n                        kierrätetyllä hiilidioksidilla tuotetun\n                        lentopolttoaineen kehittäminen voi antaa meille\n                        mahdollisuuden jatkaa lentämistä tulevaisuudessa.\n                        Fossiilivapaan sähkösopimuksen kautta olet mukana tässä\n                        kehityksessä.\n                    </p>\n                    <a\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        href=\"https://www.vattenfall.fi/vastuullisuus/fossiilivapaa-kehitys/fossiilivapaa-ilmailu/\"\n                    >\n                        Lue lisää\n                    </a>\n                </Case>\n\n                <WaypointWrapper>\n                    <Waypoint\n                        onEnter={() => setcasePoint3(true)}\n                        bottomOffset={offsetValue}\n                    />\n                </WaypointWrapper>\n\n                <Case\n                    inView={casePoint3}\n                    ref={solarRef}\n                    image={solar}\n                    imageOn=\"left\"\n                    offset={50}\n                    backgroundColor=\"#F2F2F2\"\n                >\n                    <h4>Lisää aurinkovoimaa</h4>\n                    <p>\n                        Joka vuosi yhä useampi talo pystyy hyödyntämään auringon\n                        energiaa ja tuottamaan itse sähköä. Fossiilivapaan\n                        sähkösopimuksen kautta olet mukana kehittämässä kotien\n                        energiaratkaisuja.\n                    </p>\n                    <a\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        href=\"https://www.vattenfall.fi/vastuullisuus/fossiilivapaa-kehitys/kodin-energiaratkaisut/\"\n                    >\n                        Lue lisää\n                    </a>\n                </Case>\n\n                {/* <Quote\n                    backgroundColor=\"#fff0ea\"\n                    textWidth=\"660px\"\n                    text=\"Teemme yhteistyötä monien kiinteistönomistajien kanssa auttaaksemme luomaan paikan päälle latausinfrastruktuuria.\"\n                    quoteName=\"Vattenfallin vastuullisuusjohtaja\"\n                    quoteText=\"Annika Ramsköld\"\n                ></Quote> */}\n\n                <WaypointWrapper>\n                    <Waypoint\n                        onEnter={() => setcasePoint4(true)}\n                        bottomOffset={offsetValue}\n                    />\n                </WaypointWrapper>\n                <Case\n                    inView={casePoint4}\n                    ref={datacenterRef}\n                    image={datacenter}\n                    imageOn=\"right\"\n                    offset={50}\n                    backgroundColor=\"#F2F2F2\"\n                >\n                    <h4>Päästöt pois internetistä</h4>\n                    <p>\n                        Datakeskukset eli konesalit tai palvelukeskukset ovat\n                        digitalisoituvan maailmamme todellisia\n                        energia-ahmatteja. Monet suuret yritykset siirtävät\n                        datakeskuksiaan Pohjoismaihin vähentääkseen\n                        hiilidioksidipäästöjään.\n                    </p>\n                    <a\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        href=\"https://www.vattenfall.fi/fokuksessa/innovaatiot/pohjoismaista-ratkaisu-ilmastoalykkaisiin-datakeskuksiin/\"\n                    >\n                        Lue lisää\n                    </a>\n                </Case>\n\n                <WaypointWrapper>\n                    <Waypoint\n                        onEnter={() => setcasePoint5(true)}\n                        bottomOffset={offsetValue}\n                    />\n                </WaypointWrapper>\n\n                <Case\n                    inView={casePoint5}\n                    ref={steelRef}\n                    image={steelCase}\n                    imageOn=\"left\"\n                    offset={50}\n                    backgroundColor=\"#F2F2F2\"\n                >\n                    <h4>Fossiilivapaa teräs</h4>\n                    <p>\n                        Fossiilivapaan teräksen tuotanto vaatii paljon\n                        fossiilivapaata sähköä, mutta sen kehitys voi vähentää\n                        maailman hiilidioksidipäästöjä 7 %. Fossiilivapaan\n                        sähkösopimuksen kautta olet mukana tässäkin\n                        kehityksessä.\n                    </p>\n                    <a\n                        target=\"_blank\"\n                        rel=\"noreferrer\"\n                        href=\"https://www.vattenfall.fi/vastuullisuus/fossiilivapaa-kehitys/fossiilivapaa-teras/\"\n                    >\n                        Lue lisää\n                    </a>\n                </Case>\n\n                <QuoteAndImage\n                    backgroundColor=\"white\"\n                    quoteText=\"”On tärkeää, että käytämme osaamistamme ja markkina-asemaamme auttaaksemme asiakkaitamme ja toimittajiamme vähentämään hiilidioksidipäästöjä.”\"\n                    name=\"Anna Borg\"\n                    role=\"Toimitusjohtaja\"\n                    src={person}\n                />\n\n                <VideoHero webM={forestWebM} mp4={forestMp4} minHeight>\n                    <h2 className=\"video-hero-h2\">\n                        Uusiutuvaa vai fossiilivapaata sähköä?\n                    </h2>\n                    <div className=\"video-hero-container\">\n                        <p>\n                            Kaikki Suomessa{\" \"}\n                            <a\n                                style={{\n                                    color: \"white\",\n                                    textDecoration: \"underline\",\n                                }}\n                                target=\"_blank\"\n                                rel=\"noreferrer\"\n                                href=\"https://www.vattenfall.fi/sahkosopimukset/\"\n                            >\n                                kotitalouksille\n                            </a>{\" \"}\n                            ja{\" \"}\n                            <a\n                                style={{\n                                    color: \"white\",\n                                    textDecoration: \"underline\",\n                                }}\n                                target=\"_blank\"\n                                rel=\"noreferrer\"\n                                href=\"https://www.vattenfall.fi/yritysasiakkaat/pienyritykset/\"\n                            >\n                                pienyrityksille\n                            </a>{\" \"}\n                            myymämme sähkö on tuotettu fossiilivapaasti. Se\n                            tarkoittaa, että sähkön tuotantovaiheessa ei synny\n                            käytännössä lainkaan hiilidioksidipäästöjä. Osa\n                            sähköntuotantoon käytetystä energiasta on myös\n                            uusiutuvaa.\n                            <br />\n                            <br />\n                            Valitse sähkösopimus:\n                        </p>\n                        <ButtonRow>\n                            <a\n                                style={{\n                                    textDecoration: \"underline\",\n                                    color: \"white\",\n                                }}\n                                target=\"_blank\"\n                                rel=\"noreferrer\"\n                                href=\"https://www.vattenfall.fi/sahkosopimukset/\"\n                            >\n                                <button\n                                    type=\"button\"\n                                    className=\"vf-btn vf-btn--sm btn--primary\"\n                                >\n                                    Kotitalouksille\n                                </button>\n                            </a>\n                            <a\n                                target=\"_blank\"\n                                rel=\"noreferrer\"\n                                href=\"https://www.vattenfall.fi/yritysasiakkaat/pienyritykset/\"\n                            >\n                                <button\n                                    type=\"button\"\n                                    className=\"vf-btn vf-btn--sm btn--primary\"\n                                >\n                                    Pienyrityksille\n                                </button>\n                            </a>\n                        </ButtonRow>\n                    </div>\n                </VideoHero>\n                <Achievements />\n            </Layout>\n            <FooterFi />\n        </>\n    );\n};\n"],"names":["StickyBtn","HeroTextBox","WaypointWrapper","HydrogenProofpoint","ButtonRow","Finnish","url","selector","async","datacenterRef","useRef","steelRef","aviationRef","oceanRef","solarRef","hydrogenRef","useState","zoom","setZoom","playInfo","setPlayInfo","playInfo2","setPlayInfo2","casePoint1","setcasePoint1","casePoint2","setcasePoint2","casePoint3","setcasePoint3","casePoint4","setcasePoint4","casePoint5","setcasePoint5","offsetValue","useEffect","element","document","querySelector","script","createElement","type","dataset","cmpSrc","className","cmpVendor","appendChild","removeChild","gtmScript","window","innerWidth","articleRefs","isDesktop","useMediaQuery","query","src","cmpAb","cmpCodesrc","cmpHost","cmpCdn","autoblockScript","primary","webM","heroWebM","mp4","heroMp4","heroStandingWebM","heroStandingMp4","target","rel","href","intent","ref","S","alt","style","width","onEnter","bottomOffset","inView","image","wind","imageOn","offset","backgroundColor","video","infoGraphic","startVideo","data","locationsFinnish","infoMp4","aviation","solar","datacenter","steelCase","quoteText","name","role","person","forestWebM","forestMp4","minHeight","color","textDecoration"],"sourceRoot":""}