1<!DOCTYPE html> 2<html 3 data-wf-page="60c1fcb9405e3290e4235ce4" 4 data-wf-site="607ea7a2d063f1935e52615d" 5 lang="en" 6> 7 <head> 8 <meta charset="utf-8" /> 9<!-- This site is hosted on Netlify. Anyone can build and deploy a site 10 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=81023a43-085c-4abb-af65-ca67127e3b2a 11 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 12 <title>Hands | Diversity and inclusion - Iberdrola</title> 13 <meta 14 content="Behold the hands, how they promise, conjure, appeal, beckon, admire, confess, instruct, and what not besides, with a variation and multiplication of variations which make the tongue envious." 15 name="description" 16 /> 17 <meta 18 content="Hands | Diversity and inclusion - Iberdrola" 19 property="og:title" 20 /> 21 <meta 22 content="Behold the hands, how they promise, conjure, appeal, beckon, admire, confess, instruct, and what not besides, with a variation and multiplication of variations which make the tongue envious." 23 property="og:description" 24 /> 25 <meta content="images/intro-loading.jpg" property="og:image" /> 26 <meta 27 content="Hands | Diversity and inclusion - Iberdrola" 28 property="twitter:title" 29 /> 30 <meta 31 content="Behold the hands, how they promise, conjure, appeal, beckon, admire, confess, instruct, and what not besides, with a variation and multiplication of variations which make the tongue envious." 32 property="twitter:description" 33 /> 34 <meta content="images/intro-loading.jpg" property="twitter:image" /> 35 <meta property="og:type" content="website" /> 36 <meta content="summary_large_image" name="twitter:card" /> 37 <meta content="width=device-width, initial-scale=1" name="viewport" /> 38 <link href="../css/normalize.css" rel="stylesheet" type="text/css" /> 39 <link href="../css/components.css" rel="stylesheet" type="text/css" /> 40 <link href="../css/las-manos.css" rel="stylesheet" type="text/css" /> 41 <!-- [if lt IE 9]>
41<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
41<![endif] --> 42
42<script type="text/javascript"> 43 !(function (o, c) { 44 var n = c.documentElement, 45 t = " w-mod-"; 46 (n.className += t + "js"), 47 ("ontouchstart" in o || 48 (o.DocumentTouch && c instanceof DocumentTouch)) && 49 (n.className += t + "touch"); 50 })(window, document); 51 </script>
51 52 <link 53 href="../images/favicon.png" 54 rel="shortcut icon" 55 type="image/x-icon" 56 /> 57 <link href="../images/webclip.png" rel="apple-touch-icon" /> 58 <link 59 rel="alternate" 60 hreflang="es" 61 href="https://diversidadeinclusion.iberdrola.com" 62 /> 63 <link 64 rel="alternate" 65 hreflang="en" 66 href="https://diversidadeinclusion.iberdrola.com/en/" 67 /> 68 <style> 69 body { 70 overscroll-behavior: none; 71 } 72 .lock-scroll { 73 position: fixed; 74 } 75 .h-vhidden { 76 visibility: hidden; 77 } 78 .letter { 79 opacity: 0; 80 display: inline-block; 81 } 82 .o-loader, 83 .o-vignette, 84 .color-overlay, 85 .l-container.cifra { 86 pointer-events: none; 87 } 88 .facts__heading { 89 pointer-events: auto; 90 } 91 .spansword { 92 white-space: nowrap; 93 } 94 </style> 95 </head> 96 <body class="lock-scroll"> 97 <div style="opacity: 1; display: flex" class="loading-intro"> 98 <div class="l-loader-content"> 99 <h1 class="ml13 span-this"> 100 <span role="text" class="text-span">hands</span> 101 </h1> 102 <div class="l-loading-intro-elements__wrap"> 103 <div 104 aria-valuetext="Loading..." 105 role="progressbar" 106 aria-relevant="removals" 107 data-w-id="edf692bd-55be-de0f-555a-a1a967a774c1" 108 style="opacity: 1" 109 class="l-loading-text__wrap" 110 > 111 <div 112 data-w-id="54cd7fdb-772b-24a4-2a94-64ffc2d69453" 113 data-animation-type="lottie" 114 data-src="../documents/lf30_editor_lbq57bfr.json" 115 data-loop="1" 116 data-direction="1" 117 data-autoplay="1" 118 data-is-ix2-target="0" 119 data-renderer="svg" 120 data-default-duration="1.4" 121 data-duration="3" 122 class="o-loader" 123 ></div> 124 <div aria-hidden="true" class="o-loading__text">LOADING</div> 125 </div> 126 <div class="h-custom-button"> 127 <div 128 id="enter" 129 tabindex="0" 130 aria-relevant="additions" 131 aria-live="polite" 132 role="button" 133 aria-labelledby="button-text" 134 style="opacity: 0; display: none" 135 class="o-enter" 136 > 137 <div id="enter-text">Enter</div> 138 <div class="o-underline w-embed"> 139 <svg viewbox="0 0 136 9" xmlns="http://www.w3.org/2000/svg"> 140 <line 141 x1="120.921" 142 y1="1" 143 x2="7.94829e-08" 144 y2="1.00001" 145 stroke="currentColor" 146 stroke-width="2" 147 ></line> 148 <path 149 d="M134.87 8.96997C134.636 8.90546 134.435 8.74138 134.311 8.51383C133.018 6.14388 131.55 4.55191 129.587 3.52793C127.599 2.49395 125.026 1.99996 121.453 1.99996L110.011 1.99996L110.011 -1.24952e-06L121.453 -6.99376e-07C125.154 -5.21474e-07 128.036 0.505989 130.365 1.72196C132.721 2.94794 134.434 4.8559 135.871 7.48585C135.995 7.7134 136.031 7.98578 135.973 8.24308C135.914 8.50037 135.765 8.7215 135.558 8.85782C135.351 8.99414 135.103 9.03448 134.87 8.96997Z" 150 fill="currentColor" 151 ></path> 152 </svg> 153 </div> 154 </div> 155 </div> 156 </div> 157 </div> 158 </div> 159 <nav class="c-nav"> 160 <div class="c-logo"> 161 <a aria-current='page' aria-label='Refresh page' class='o-logo__wrap w-inline-block w--current' href='/en/' role='Navigation'> 162 <div class="o-logo-iberdrola text-color force-color w-embed"> 163 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 737.89 167.64"> 164 <title>Iberdrola logo</title> 165 <g id="Layer_1" data-name="Logo Iberdrola"> 166 <path 167 d="M535.23,92.17c4.92-1.5,13.52-5.74,13.52-17.15,0-8.88-7.07-17.87-20.6-17.87H499.28v65h13.38V66H523.2c10.15,0,11.66,6,11.66,9.65,0,6-4.31,9.75-11.25,9.75-4.51,0-7.09,1.77-7.09,4.74,0,1.66,1.05,3.83,6,4.6,6.13,1,8.6,6.93,11.74,14.49,0,0,2.71,6.4,3.64,8.47s1.77,4.46,6.4,4.46h10.43l-4.6-9.92C545.53,102,541.86,96,535.23,92.17Z" 168 fill="currentColor" 169 ></path> 170 <path 171 d="M403.57,92.17c4.92-1.5,13.52-5.74,13.52-17.15,0-8.88-7.07-17.87-20.6-17.87H367.62v65H381V66h10.54c10.15,0,11.66,6,11.66,9.65,0,6-4.31,9.75-11.26,9.75-4.5,0-7.08,1.77-7.08,4.74,0,1.66,1.05,3.83,6,4.6,6.13,1,8.6,6.93,11.74,14.49,0,0,2.71,6.4,3.64,8.47s1.77,4.46,6.4,4.46h10.43l-4.6-9.92C413.87,102,410.19,96,403.57,92.17Z" 172 fill="currentColor" 173 ></path> 174 <rect 175 x="219.56" 176 y="57.16" 177 width="13.39" 178 height="64.99" 179 fill="currentColor" 180 ></rect> 181 <path 182 d="M323.11,93h31.34V84.17H323.11V66H356V57.16H309.73v65h46.94V113.3H323.11Z" 183 fill="currentColor" 184 ></path> 185 <path 186 d="M456.46,57.16H430.13v65h24.42c23.94,0,37.13-11.5,37.13-32.39C491.68,69.63,478.18,57.16,456.46,57.16ZM443.51,66h10.73c15,0,23.55,8.63,23.55,23.66,0,14.81-8.73,23.65-23.35,23.65H443.51Z" 187 fill="currentColor" 188 ></path> 189 <path 190 d="M590.09,56.24c-24,0-34.79,16.78-34.79,33.41s10.76,33.4,34.79,33.4c23.82,0,34.68-17.31,34.68-33.4C624.77,73,614,56.24,590.09,56.24Zm0,56.26c-13.29,0-20.91-8.33-20.91-22.85S576.8,66.8,590.09,66.8s20.79,8.33,20.79,22.85S603.31,112.5,590.09,112.5Z" 191 fill="currentColor" 192 ></path> 193 <path
194 d="M285.12,86.81c4.74-2,11.22-6.27,11.22-14.77,0-7.41-6.46-14.88-20.9-14.88H247.58v65h31.59c20.23,0,22.41-12.78,22.41-18.27C301.58,92.5,291.47,88.31,285.12,86.81ZM261,66h10.86c7.85,0,10.65,4.29,10.65,8.3,0,4.5-3.33,9.33-10.65,9.33-4.52,0-7.09,1.62-7.09,4.42,0,1.3.68,4.37,7,4.41l3.1,0c7.16,0,12.36,4.4,12.36,10.49,0,9.17-7.85,10.34-14.68,10.34H261Z" 195 fill="currentColor" 196 ></path> 197 <path 198 d="M709,57.16H694.36l-26.31,65h14.16l5.14-13.61h30.59c.52,1.27,3.8,9.15,3.8,9.15.88,2.09,1.88,4.46,6.39,4.46h9.76ZM691,98.81c.68-1.77,9.08-24,10.79-28.54l12,28.54Z" 199 fill="currentColor" 200 ></path> 201 <path 202 d="M646.27,113.3V57.16H632.88v65h33.73l0-8.84Z" 203 fill="currentColor" 204 ></path> 205 <path 206 d="M101.8,97.3h0c.46-24.91,15.73-37.67,33.2-49.76A283.94,283.94,0,0,0,122.61,0C118.46,51.66,53.78,48.15,52.9,97.37c-.14,7.22,3,17.22,11.18,25.35,12.53,12.35,34.69,15.91,51.38,4.27C110.47,122.42,101.85,112.05,101.8,97.3Z" 207 fill="currentColor" 208 ></path> 209 <path 210 d="M176.06,0c-4.12,51.66-68.8,48.15-69.7,97.37-.11,7.22,3,17.22,11.21,25.35C145.64,150.45,222.61,134.26,176.06,0Z" 211 fill="currentColor" 212 ></path> 213 <path 214 d="M69.71,0C65.57,51.66.89,48.15,0,97.37c-.13,7.22,3,17.22,11.19,25.35a37.57,37.57,0,0,0,9.42,6.76,127.17,127.17,0,0,0-1.48,38.16l7.86-.4a104.48,104.48,0,0,1-1.78-35.73,40.66,40.66,0,0,0,37-4.28c-.46-.41-.91-.84-1.35-1.27-8-7.93-12.72-18.65-12.54-28.66.42-24,14.63-36.48,29.91-47.43,1.25-.9,2.52-1.8,3.77-2.68A281.68,281.68,0,0,0,69.71,0ZM60.79,49.2A24.15,24.15,0,0,1,55.1,40s0,9.09,3.23,13.74a230,230,0,0,1-12.39,20C40.34,66.06,38.21,58,37.26,55c0,0-.57,14.29,4.89,24.58a180.24,180.24,0,0,0-12,20.52c-5.45-7.89-10.23-19.59-12.37-28.71,0,0-1.4,21.47,8.67,36.9a93.44,93.44,0,0,0-5.31,16.44c-3.48-2-16.73-11.56-16.73-27.82C4.36,75.65,19.79,64.27,35.94,53h0C50,43.14,61.8,34.05,68.52,19.52,68.29,30.49,65.26,40.09,60.79,49.2Z" 215 fill="currentColor" 216 ></path> 217 </g> 218 </svg> 219 </div> 220 </a> 221 </div> 222 <div class="c-sound__wrap"> 223 <div style="opacity: 1; display: block" class="o-audio-disclaimer"> 224 Audio will be played 225 </div> 226 <div style="display: block" class="o-sound__blocker"></div> 227 <div 228 id="sound-controller" 229 role="button" 230 tabindex="-1" 231 aria-label="Mute audio" 232 aria-pressed="false" 233 class="c-sound__controller" 234 > 235 <div 236 data-w-id="25ad1882-b1dc-503f-1c82-3a6bfd49576c" 237 data-animation-type="lottie" 238 data-src="../documents/lf30_editor_7csn6rvi.json" 239 data-loop="0" 240 data-direction="1" 241 data-autoplay="0" 242 data-is-ix2-target="1" 243 data-renderer="svg" 244 data-default-duration="1.0010009602293968" 245 data-duration="1.0010009602293968" 246 data-ix2-initial-state="17" 247 class="o-sound__lottie" 248 ></div> 249 </div> 250 </div> 251 <div style="display: none" class="c-scroll-helper"> 252 <div class="o-scroll-helper__wrap"> 253 <div id="arrow" class="o-scroll-helper text-color w-embed"> 254 <svg 255 width="20" 256 height="35" 257 viewbox="0 0 28 49" 258 fill="none" 259 xmlns="http://www.w3.org/2000/svg" 260 > 261 <path 262 d="M24.7718 2.78727C25.1132 2.58279 25.3593 2.25109 25.4561 1.86514C25.5528 1.47919 25.4923 1.07061 25.2878 0.729274C25.0834 0.387941 24.7517 0.141817 24.3657 0.0450486C23.9798 -0.0517201 23.5712 0.00879275 23.2298 0.213275C19.2848 2.58327 16.4228 5.40927 14.5838 9.29727C12.7598 13.1403
26212.0008 17.8953 12.0008 24.0003V42.8793L2.56283 33.4413C2.28157 33.1596 1.89994 33.0012 1.50189 33.0009C1.10385 33.0007 0.721995 33.1585 0.440335 33.4398C0.158675 33.721 0.00028168 34.1027 3.75333e-07 34.5007C-0.000280929 34.8988 0.157572 35.2806 0.438834 35.5623L12.4388 47.5623C12.5782 47.702 12.7437 47.8128 12.9259 47.8884C13.1082 47.964 13.3035 48.003 13.5008 48.003C13.6981 48.003 13.8935 47.964 14.0757 47.8884C14.258 47.8128 14.4235 47.702 14.5628 47.5623L26.5628 35.5623C26.8441 35.2806 27.002 34.8988 27.0017 34.5007C27.0014 34.1027 26.843 33.721 26.5613 33.4398C26.4219 33.3005 26.2563 33.1901 26.0742 33.1148C25.8921 33.0395 25.6969 33.0008 25.4998 33.0009C25.1017 33.0012 24.7201 33.1596 24.4388 33.4413L15.0008 42.8793V24.0003C15.0008 18.1053 15.7418 13.8603 17.2928 10.5813C18.8288 7.34127 21.2168 4.92027 24.7718 2.78727Z" 263 fill="currentColor" 264 ></path> 265 </svg> 266 </div> 267 </div> 268 <div class="o-scroll-text__wrap"> 269 <div 270 lang="en" 271 aria-hidden="true" 272 style="height: 0px; display: block; opacity: 0" 273 class="o-scroll-helper__text" 274 > 275 Scroll 276 </div> 277 </div> 278 </div> 279 <div class="c-language-change"> 280 <div class="l-lang__wrap"> 281 <a aria-label='Cambiar a español' class='o-lang-link text-color alternative' href='/' lang='es'>español</a 282 > 283 </div> 284 </div> 285 <div style="opacity: 0" class="c-scroll-progress"> 286 <div 287 style="background-color: rgb(34, 34, 34)" 288 class="scroll-progress__wrap" 289 > 290 <div 291 style="background-color: rgb(239, 210, 168)" 292 class="scroll-progress__bar" 293 ></div> 294 </div> 295 </div> 296 </nav> 297 <div class="o-vignette"></div> 298 <div style="background-color: rgb(34, 34, 34)" class="color-overlay"></div> 299 <main id="main" class="h-content h-vhidden"> 300 <div class="l-section h-contrast__light"> 301 <div 302 data-w-id="bd814712-3e8b-d6b0-21f7-fbbcf84ee030" 303 class="h-start-section-first" 304 ></div> 305 <div 306 data-w-id="99208684-44be-2ca2-131d-28ef5bc4d177" 307 class="h-color-trigger _0" 308 ></div> 309 <div class="audio hero move-far w-embed"> 310 <audio 311 loop="" 312 preload="auto" 313 id="sound0" 314 src="/audio/0-intro.mp3" 315 ></audio> 316 </div> 317 <div class="full-screen-hero"> 318 <div 319 data-poster-url="../videos/14-LAMPARA-Boc1-musica-poster-00001.jpg" 320 data-video-urls="../videos/14-LAMPARA-Boc1-musica-transcode.mp4,../videos/14-LAMPARA-Boc1-musica-transcode.webm" 321 data-autoplay="true" 322 data-loop="true" 323 data-wf-ignore="true" 324 aria-hidden="true" 325 class="bg__video w-background-video w-background-video-atom" 326 > 327 <video 328 autoplay="" 329 loop="" 330 style=" 331 background-image: url('../videos/14-LAMPARA-Boc1-musica-poster-00001.jpg'); 332 " 333 muted="" 334 playsinline="" 335 data-wf-ignore="true" 336 data-object-fit="cover" 337 > 338 <source 339 src="../videos/14-LAMPARA-Boc1-musica-transcode.mp4" 340 data-wf-ignore="true" 341 /> 342 <source 343 src="../videos/14-LAMPARA-Boc1-musica-transcode.webm" 344 data-wf-ignore="true" 345 /> 346 </video> 347 </div> 348 </div> 349 <div class="l-container first quote"> 350 <div 351 id="w-node-a1f054b5-0cc8-2afa-9727-0d196555450b-e4235ce4" 352 class="l-content__container cita-montaigne" 353 > 354 <div 355 role="text" 356 data-w-id="fb59e9c5-bd7d-cb25-5377-bafccfd61135" 357 class="h2__0" 358 > 359 <span class="ml3 span-this">Behold the hands, </span 360 ><span class="ml3 span-this">how they promise, </span 361 ><span class="ml3 span-this">conjure, </span 362 ><span class="ml3 span-this">appeal, </span 363 ><span class="ml3 span-this">beckon, </span 364 ><span class="ml3 span-this">admire, </span 365 ><span class="ml3 span-this">confess, </span 366 ><span class="ml3 span-this">instruct, </span 367 ><span class="ml3 span-this">and what not besides, </span 368 ><span class="ml3 span-this" 369 >with a variation and multiplication of variations </span 370 ><span class="ml3 span-this">which make the tongue envious.</span> 371 </div> 372 <div class="o-cita-author ml3 span-this">Montaigne</div> 373 </div> 374 </div> 375 </div> 376 <section class="l-section h-contrast__light"> 377 <div class="h-start-section"></div> 378 <div 379 data-w-id="8a3fcb3e-257f-5431-440d-b67b2b4f95ef" 380 class="h-color-trigger _1" 381 ></div> 382 <div class="audio w-embed"> 383 <audio 384 loop="" 385 preload="auto" 386 id="sound1" 387 src="/audio/1-sombras.mp3" 388 ></audio> 389 </div> 390 <div class="full-screen _1"> 391 <div 392 data-poster-url="../videos/13-SOMBRAS-Boc1-musica-poster-00001.jpg" 393 data-video-urls="../videos/13-SOMBRAS-Boc1-musica-transcode.mp4,../videos/13-SOMBRAS-Boc1-musica-transcode.webm" 394 data-autoplay="true" 395 data-loop="true" 396 data-wf-ignore="true" 397 aria-hidden="true" 398 class="bg__video w-background-video w-background-video-atom" 399 > 400 <video 401 autoplay="" 402 loop="" 403 style=" 404 background-image: url('../videos/13-SOMBRAS-Boc1-musica-poster-00001.jpg'); 405 " 406 muted="" 407 playsinline="" 408 data-wf-ignore="true" 409 data-object-fit="cover" 410 > 411 <source 412 src="../videos/13-SOMBRAS-Boc1-musica-transcode.mp4" 413 data-wf-ignore="true" 414 /> 415 <source 416 src="../videos/13-SOMBRAS-Boc1-musica-transcode.webm" 417 data-wf-ignore="true" 418 /> 419 </video> 420 </div> 421 </div> 422 <div class="l-container first"> 423 <div 424 id="w-node-ccf26836-739c-94aa-2925-8f3def955bb3-e4235ce4" 425 class="l-content__container" 426 > 427 <h2 428 data-w-id="ccf26836-739c-94aa-2925-8f3def955bb4" 429 style="opacity: 0" 430 class="h2__1" 431 > 432 Behold <span class="h-break-line">the hands</span> 433 </h2> 434 <div class="paragraph__wrap left"> 435 <p class="color__white"> 436 Our society has undergone profound changes. An external
437 isolation has prevented our contact with others. And touching, 438 and being touched, has always been an essential need. This 439 period has led us to think about ourselves and about how our 440 society is moving toward the future. 441 </p> 442 </div> 443 </div> 444 </div> 445 <div class="l-container second"> 446 <div 447 id="w-node-_4795df80-a969-4eff-c309-5ad7b3b4ccd3-e4235ce4" 448 class="l-content__container" 449 > 450 <div class="paragraph__wrap right"> 451 <p class="color__white"> 452 We live in a global world. Everyoneâs needs should be equally 453 met. But is this really happening? There are still major 454 differences between countries, communities, races and genders. 455 We must achieve a greater capacity for development, ensuring, 456 for example, that energy, because of its importance, reaches all 457 homes. 458 </p> 459 </div> 460 </div> 461 </div> 462 <div class="l-cifras__wrap"> 463 <div class="h-facts-start"></div> 464 <div class="l-container cifra"> 465 <div 466 id="w-node-a983327b-b7f6-45c5-626c-37ed1543eda4-e4235ce4" 467 class="c-facts" 468 > 469 <h2 class="facts__heading color__white"> 470 <span class="o-cifra color__yellow">In the year 2020, </span 471 ><span class="o-cifra__text" 472 >the âElectricity for allâ programme </span 473 ><span class="o-cifra__text">sponsored by Iberdrola </span 474 ><span class="o-cifra__text">reached </span 475 ><span class="o-cifra color__yellow" 476 >8.2 MILLION BENEFICIARIES</span 477 > 478 </h2> 479 </div> 480 </div> 481 </div> 482 </section> 483 <section class="l-section h-contrast__light"> 484 <div class="h-start-section"></div> 485 <div 486 data-w-id="98a69a8e-d738-7e6e-94b6-e5d400e07b50" 487 class="h-color-trigger _2" 488 ></div> 489 <div class="audio w-embed"> 490 <audio 491 loop="" 492 preload="auto" 493 id="sound2" 494 src="/audio/2-hojas.mp3" 495 ></audio> 496 </div> 497 <div class="full-screen _2"> 498 <div 499 data-poster-url="../videos/10-HOJAS-Boc1-musica-poster-00001.jpg" 500 data-video-urls="../videos/10-HOJAS-Boc1-musica-transcode.mp4,../videos/10-HOJAS-Boc1-musica-transcode.webm" 501 data-autoplay="true" 502 data-loop="true" 503 data-wf-ignore="true" 504 aria-hidden="true" 505 class="bg__video w-background-video w-background-video-atom" 506 > 507 <video 508 autoplay="" 509 loop="" 510 style=" 511 background-image: url('../videos/10-HOJAS-Boc1-musica-poster-00001.jpg'); 512 " 513 muted="" 514 playsinline="" 515 data-wf-ignore="true" 516 data-object-fit="cover" 517 > 518 <source 519 src="../videos/10-HOJAS-Boc1-musica-transcode.mp4" 520 data-wf-ignore="true" 521 /> 522 <source 523 src="../videos/10-HOJAS-Boc1-musica-transcode.webm" 524 data-wf-ignore="true" 525 /> 526 </video> 527 </div> 528 </div> 529 <div class="l-container first"> 530 <div 531 id="w-node-_18410975-9f3b-5cca-aff1-ae2090345458-e4235ce4" 532 class="l-content__container" 533 > 534 <div class="paragraph__wrap left"> 535 <p class="color__white"> 536 Many people still cannot choose what to do, how to live, or whom 537 to love. What does it matter who we are or with whom we 538 identify? Society should allow us to freely make our own 539 decisions. 540 </p> 541 </div> 542 </div> 543 </div> 544 <div class="l-cifras__wrap"> 545 <div class="l-container cifra"> 546 <div 547 id="w-node-_1a9acb4d-823d-1394-1b9b-af33a8fc9aaf-e4235ce4" 548 class="c-facts" 549 > 550 <h2 class="facts__heading color__white">
551 <span class="o-cifra__text">Iberdrola has already granted </span 552 ><span class="o-cifra color__yellow">1,000 SCHOLARSHIPS </span 553 ><br /><span class="o-cifra__text" 554 >to receive top-calibre training, </span 555 ><span class="o-cifra__text" 556 >primarily in STEM disciplines</span 557 > 558 </h2> 559 </div> 560 </div> 561 </div> 562 <div class="l-container second"> 563 <div 564 id="w-node-_694680c6-786b-ee1b-09e4-f8702782fc56-e4235ce4" 565 class="l-content__container" 566 > 567 <div class="paragraph__wrap right"> 568 <p class="color__white"> 569 It is still difficult to be women, mothers and workers. To 570 reconcile working and family life. We seek to continue training 571 ourselves and moving up at the company. We would like to fulfil 572 all of our dreams and aspirations in any field. Equality must be 573 as much about rights as about resources and opportunities. 574 </p> 575 </div> 576 </div> 577 </div> 578 <div class="l-cifras__wrap"> 579 <div class="l-container cifra"> 580 <div 581 id="w-node-a46d4af5-b5a1-555f-f539-6285917d29e3-e4235ce4" 582 class="c-facts" 583 > 584 <h2 class="facts__heading color__white"> 585 <span class="o-cifra__text">The number of women </span 586 ><span class="o-cifra__text">in Iberdrolaâs workforce </span 587 ><br /><span class="o-cifra__text">has increased </span 588 ><span class="o-cifra color__yellow">by 38% </span 589 ><span class="o-cifra__text">over the last 5 years</span> 590 </h2> 591 </div> 592 </div> 593 </div> 594 <div class="l-cifras__wrap"> 595 <div class="l-container cifra"> 596 <div 597 id="w-node-d10e2479-aaf6-87ee-e59a-56f80fd892b7-e4235ce4" 598 class="c-facts" 599 > 600 <h2 class="facts__heading color__white"> 601 <span class="o-cifra color__yellow">100% </span 602 ><span class="o-cifra__text">Wage equality</span> 603 </h2> 604 </div> 605 </div> 606 </div> 607 <div class="l-cifras__wrap"> 608 <div class="l-container cifra"> 609 <div 610 id="w-node-dc01aaea-e447-3cc4-c99c-4ee4fa14c13f-e4235ce4" 611 class="c-facts" 612 > 613 <h2 class="facts__heading color__white"> 614 <span class="o-cifra color__yellow">In 2020 </span 615 ><span class="o-cifra__text" 616 >the total average remuneration </span 617 ><span class="o-cifra__text">of women </span 618 ><span class="o-cifra__text">exceeded that of men</span> 619 </h2> 620 </div> 621 </div> 622 </div> 623 </section> 624 <section class="l-section h-contrast__light"> 625 <div class="h-start-section"></div> 626 <div 627 data-w-id="a5def186-e4aa-485a-11ca-ef9f6a694c3c" 628 class="h-color-trigger _3" 629 ></div> 630 <div class="audio w-embed"> 631 <audio 632 loop="" 633 preload="auto" 634 id="sound3" 635 src="/audio/3-bronce.mp3" 636 ></audio> 637 </div> 638 <div class="full-screen _3"> 639 <div 640 data-poster-url="../videos/8-PELO-BRONCE-Boc1-musica-poster-00001.jpg" 641 data-video-urls="../videos/8-PELO-BRONCE-Boc1-musica-transcode.mp4,../videos/8-PELO-BRONCE-Boc1-musica-transcode.webm" 642 data-autoplay="true" 643 data-loop="true" 644 data-wf-ignore="true" 645 aria-hidden="true" 646 class="bg__video w-background-video w-background-video-atom" 647 > 648 <video 649 autoplay="" 650 loop="" 651 style=" 652 background-image: url('../videos/8-PELO-BRONCE-Boc1-musica-poster-00001.jpg'); 653 " 654 muted="" 655 playsinline="" 656 data-wf-ignore="true" 657 data-object-fit="cover" 658 > 659 <source 660 src="../videos/8-PELO-BRONCE-Boc1-musica-transcode.mp4" 661 data-wf-ignore="true" 662 /> 663 <source 664 src="../videos/8-PELO-BRONCE-Boc1-musica-transcode.webm" 665 data-wf-ignore="true" 666 /> 667 </video> 668 </div> 669 </div> 670 <div class="l-container first"> 671 <div 672 id="w-node-_83bda7cc-534f-81a1-5718-4f60366b34dc-e4235ce4" 673 class="l-content__container" 674 > 675 <div class="paragraph__wrap left"> 676 <p class="color__white"> 677 We do not speak the same language or share the same culture. We 678 are of different races and our skin is of a different c
678olour. 679 Will this prevent us from understanding each other? From living 680 and working together? Diversity is good for everything. At work 681 it broadens perspectives and improves performance. 682 </p> 683 </div> 684 </div> 685 </div> 686 <div class="l-cifras__wrap"> 687 <div class="l-container cifra"> 688 <div 689 id="w-node-_99adcf32-660b-e8b1-62ad-b1d952d663bd-e4235ce4" 690 class="c-facts" 691 > 692 <h2 class="facts__heading color__white"> 693 <span class="o-cifra color__skin">42% </span 694 ><span class="o-cifra__text">of Iberdrola's  </span 695 ><span class="o-cifra__text">external directors </span 696 ><span class="o-cifra__text">are women</span>â 697 </h2> 698 </div> 699 </div> 700 </div> 701 <div class="l-cifras__wrap"> 702 <div class="l-container cifra"> 703 <div 704 id="w-node-b5a16b6f-5318-76d2-84ed-49960c937e7f-e4235ce4" 705 class="c-facts" 706 > 707 <h2 class="facts__heading color__white"> 708 <span class="o-cifra__text">Presence of </span 709 ><span class="o-cifra color__skin" 710 >6 different nationalities </span 711 ><span class="o-cifra__text">on the Board</span> 712 </h2> 713 </div> 714 </div> 715 </div> 716 <div class="l-container second"> 717 <div 718 id="w-node-e5d9689a-40a0-f47d-4df8-3b187ba93fc5-e4235ce4" 719 class="l-content__container" 720 > 721 <div class="paragraph__wrap right"> 722 <p class="color__white"> 723 It is important to feel that we are part of a group, each of us 724 with our age and size, with our religion and thinking. We are 725 very valuable, because we contribute great things. 726 </p> 727 </div> 728 </div> 729 </div> 730 <div class="l-cifras__wrap"> 731 <div class="l-container cifra"> 732 <div 733 id="w-node-_6a81bcc9-1f4e-33a5-9788-2a0c82c5123a-e4235ce4" 734 class="c-facts" 735 > 736 <h2 class="facts__heading color__white"> 737 <span class="o-cifra__text">Employees </span 738 ><span class="o-cifra color__skin">from 72 nations and </span 739 ><span class="o-cifra color__skin" 740 >more than 4 generations </span 741 ><span class="o-cifra__text">co-exist at Iberdrola</span> 742 </h2> 743 </div> 744 </div> 745 </div> 746 </section> 747 <section 748 data-w-id="d1de99de-b5ea-ed22-8659-3e51ffb37345" 749 class="l-section h-contrast__dark" 750 > 751 <div class="h-start-section"></div> 752 <div 753 data-w-id="9a3de8d0-6cb0-3b4b-1fd9-589bdc48ddf9" 754 class="h-color-trigger _4" 755 ></div> 756 <div class="audio w-embed"> 757 <audio 758 loop="" 759 preload="auto" 760 id="sound4" 761 src="/audio/4-diverso.mp3" 762 ></audio> 763 </div> 764 <div class="full-screen _4"> 765 <div 766 data-poster-url="../videos/11-DIVERSO-Boc1-musica-poster-00001.jpg" 767 data-video-urls="../videos/11-DIVERSO-Boc1-musica-transcode.mp4,../videos/11-DIVERSO-Boc1-musica-transcode.webm" 768 data-autoplay="true" 769 data-loop="true" 770 data-wf-ignore="true" 771 aria-hidden="true" 772 class="bg__video w-background-video w-background-video-atom" 773 > 774 <video 775 autoplay="" 776 loop="" 777 style=" 778 background-image: url('../videos/11-DIVERSO-Boc1-musica-poster-00001.jpg'); 779 " 780 muted="" 781 playsinline="" 782 data-wf-ignore="true" 783 data-object-fit="cover" 784 > 785 <source 786 src="../videos/11-DIVERSO-Boc1-musica-transcode.mp4" 787 data-wf-ignore="true" 788 /> 789 <source
790 src="../videos/11-DIVERSO-Boc1-musica-transcode.webm" 791 data-wf-ignore="true" 792 /> 793 </video> 794 </div> 795 </div> 796 <div class="l-container first"> 797 <div 798 id="w-node-_4c8249ef-e3c0-03b9-8363-0e224c33048d-e4235ce4" 799 class="l-content__container" 800 > 801 <div class="paragraph__wrap left"> 802 <p class="color__black"> 803 With varying degrees of difficulty, we are making progress. It 804 is not easy for us, but we keep trying. We are always seeking to 805 reach the goal, overcoming the barriers that we encounter. We 806 are part of the movement, and only need a little more momentum. 807 </p> 808 </div> 809 </div> 810 </div> 811 <div class="l-container second"> 812 <div 813 id="w-node-_6f12946a-4c72-788e-5c3e-bf233024517d-e4235ce4" 814 class="l-content__container" 815 > 816 <div class="paragraph__wrap right"> 817 <p class="color__black"> 818 We have different capabilities. We communicate with each other, 819 we express ourselves and have feelings. We play a part in 820 societyâs progress! Our differences teach us how to design 821 models that fit everyone. 822 </p> 823 </div> 824 </div> 825 </div> 826 <div class="l-cifras__wrap"> 827 <div class="l-container cifra"> 828 <div 829 id="w-node-_0e7d85a2-9ad2-c2b9-d28f-b3b91fd61bea-e4235ce4" 830 class="c-facts" 831 > 832 <h2 class="facts__heading color__black"> 833 <span class="o-cifra__text">We are committed to </span 834 ><span class="o-cifra__text">encouraging inclusion </span 835 ><span class="o-cifra__text">and diverse talent</span> 836 </h2> 837 </div> 838 </div> 839 </div> 840 <div class="l-cifras__wrap"> 841 <div class="l-container cifra"> 842 <div 843 id="w-node-_94e9fb6d-2433-7f41-66db-d8d9d6bd3378-e4235ce4" 844 class="c-facts" 845 > 846 <h2 class="facts__heading color__black"> 847 <span class="o-cifra__text">The hiring of people  </span 848 ><span class="o-cifra__text" 849 >with disabilities has increased </span 850 ><span class="o-cifra__text" 851 >the representation of this group </span 852 ><span class="o-cifra color__red">by 38% </span 853 ><span class="o-cifra color__red">over the last 3 years</span> 854 </h2> 855 </div> 856 </div> 857 </div> 858 </section> 859 <section class="l-section h-contrast__dark"> 860 <div class="h-start-section"></div> 861 <div 862 data-w-id="823569c9-658c-bdb3-7391-004a474f473d" 863 class="h-color-trigger _5" 864 ></div> 865 <div class="audio w-embed"> 866 <audio 867 loop="" 868 preload="auto" 869 id="sound5" 870 src="/audio/5-skate.mp3" 871 ></audio> 872 </div> 873 <div class="full-screen _5"> 874 <div 875 data-poster-url="../videos/9-SKATE-BALON-Boc1-musica-poster-00001.jpg" 876 data-video-urls="../videos/9-SKATE-BALON-Boc1-musica-transcode.mp4,../videos/9-SKATE-BALON-Boc1-musica-transcode.webm" 877 data-autoplay="true" 878 data-loop="true" 879 data-wf-ignore="true" 880 aria-hidden="true" 881 class="bg__video w-background-video w-background-video-atom" 882 > 883 <video 884 autoplay="" 885 loop="" 886 style=" 887 background-image: url('../videos/9-SKATE-BALON-Boc1-musica-poster-00001.jpg'); 888 " 889 muted="" 890 playsinline="" 891 data-wf-ignore="true" 892 data-object-fit="cover" 893 > 894 <source 895 src="../videos/9-SKATE-BALON-Boc1-musica-transcode.mp4" 896 data-wf-ignore="true" 897 /> 898 <source 899 src="../videos/9-SKATE-BALON-Boc1-musica-transcode.webm" 900 data-wf-ignore="true" 901 /> 902 </video> 903 </div> 904 </div> 905 <div class="l-container first"> 906 <div 907 id="w-node-edf3bdf7-7d89-96f6-ac27-cdf65cf2b7bf-e4235ce4" 908 class="l-content__container" 909 > 910 <div class="paragraph__wrap left"> 911 <p class="color__black"> 912 Our mistakes and failures, as well as our divergences and 913 experiments, are part of a process. Acknowledging them opens up 914 pathways and carries us further. Thatâs what itâs all about: 915 going as far as possible and not being afraid. Fear hinders us 916 but curiosity stimulates us. This is how to grow and move 917 forward. 918 </p> 919 </div> 920 </div> 921 </div> 922 <div class="l-container second"> 923 <div 924 id="w-node-f0a59d18-de6a-b965-e450-5f8b4b11fcf8-e4235ce4" 925 class="l-content__container" 926 > 927 <div class="paragraph__wrap right"> 928 <p class="color__black"> 929 Who says that some sports are better for some people than 930 others? Why canât we engage in the sports that we like due to a 931 lack of resources, because of exclusion or because we have been 932 pigeonholed? We are fast and strong. 933 </p> 934 </div> 935 </div> 936 </div> 937 <div class="l-cifras__wrap"> 938 <div class="l-container cifra"> 939 <div 940 id="w-node-_7370419f-88a7-9b4f-1b23-24b7c07c587c-e4235ce4" 941 class="c-facts" 942 > 943 <h2 class="facts__heading color__black">
944 <span class="o-cifra__text">Encouragement for sports </span 945 ><span class="o-cifra__text">played by women </span 946 ><span class="o-cifra color__orange">in 16 leagues </span 947 ><span class="o-cifra__text">in search of actual equality </span 948 ><span class="o-cifra__text">in all areas of society</span> 949 </h2> 950 </div> 951 </div> 952 </div> 953 </section> 954 <section class="l-section h-contrast__dark"> 955 <div class="h-start-section"></div> 956 <div 957 data-w-id="7dfe351d-9a9e-27fa-149f-2ee7167f910b" 958 class="h-color-trigger _6" 959 ></div> 960 <div class="audio w-embed"> 961 <audio 962 loop="" 963 preload="auto" 964 id="sound6" 965 src="/audio/6-mesa.mp3" 966 ></audio> 967 </div> 968 <div class="full-screen _6"> 969 <div 970 data-poster-url="../videos/12-MESA-Boc1-musica-poster-00001.jpg" 971 data-video-urls="../videos/12-MESA-Boc1-musica-transcode.mp4,../videos/12-MESA-Boc1-musica-transcode.webm" 972 data-autoplay="true" 973 data-loop="true" 974 data-wf-ignore="true" 975 aria-hidden="true" 976 class="bg__video w-background-video w-background-video-atom" 977 > 978 <video 979 autoplay="" 980 loop="" 981 style=" 982 background-image: url('../videos/12-MESA-Boc1-musica-poster-00001.jpg'); 983 " 984 muted="" 985 playsinline="" 986 data-wf-ignore="true" 987 data-object-fit="cover" 988 > 989 <source 990 src="../videos/12-MESA-Boc1-musica-transcode.mp4" 991 data-wf-ignore="true" 992 /> 993 <source 994 src="../videos/12-MESA-Boc1-musica-transcode.webm" 995 data-wf-ignore="true" 996 /> 997 </video> 998 </div> 999 </div> 1000 <div class="l-container first"> 1001 <div 1002 id="w-node-d4e81f5b-ead7-8102-009c-c9959ae75930-e4235ce4" 1003 class="l-content__container" 1004 > 1005 <div class="paragraph__wrap left"> 1006 <p class="color__black"> 1007 The air, the sun, the water ... We share and care about our 1008 planet. If we want to enjoy it, the change must begin with 1009 ourselves. The environment is everyoneâs business. 1010 </p> 1011 </div> 1012 </div> 1013 </div> 1014 <div class="l-cifras__wrap margin-top"> 1015 <div class="l-container cifra"> 1016 <div 1017 id="w-node-_6a89a9fa-ca8e-c8a2-bb10-b4d86133eec2-e4235ce4" 1018 class="c-facts" 1019 > 1020 <h2 class="facts__heading color__black"> 1021 <span class="o-cifra color__red">70% </span 1022 ><span class="o-cifra__text" 1023 >of Iberdrola's suppliers </span 1024 ><span class="o-cifra__text">will be subject to </span 1025 ><span class="o-cifra__text">sustainability policies </span 1026 ><span class="o-cifra__text">and standards </span 1027 ><span class="o-cifra color__red">by 2022</span> 1028 </h2> 1029 </div> 1030 </div> 1031 </div> 1032 <div class="l-container second"> 1033 <div 1034 id="w-node-_597e88d3-863a-437e-1814-c0e04c5ba38c-e4235ce4" 1035 class="l-content__container" 1036 > 1037 <div class="paragraph__wrap right"> 1038 <p class="color__black"> 1039 The most underrated form of energy is human heat. Historically, 1040 whenever people have felt that they were in danger, they have 1041 tended to group together. Whenever our civilization has stopped 1042 to think about the great advances that it has made, it has found 1043 itself in a<strong> </strong>vulnerable<strong 1044 > </strong>situation. Thanks to new technologies, we have been 1045 able to connect with people far away. Somehow, we have managed 1046 to band together. We must protect and preserve everything that 1047 makes us more human.
1048 </p> 1049 </div> 1050 </div> 1051 </div> 1052 <div class="l-container second"> 1053 <div 1054 id="w-node-d6caffdb-2b2b-6674-6d54-92b0bcfede7c-e4235ce4" 1055 class="l-content__container" 1056 > 1057 <div class="paragraph__wrap left"> 1058 <p class="color__black"> 1059 Companies must also be more humane. They must listen to and 1060 consider the opinions of their stakeholders. To do so, companies 1061 must be familiar with their stakeholdersâ needs and concerns. 1062 Activities that encourage relationships among different members 1063 make it easier to establish shared goals and objectives. Thus, a 1064 team is created. 1065 </p> 1066 </div> 1067 </div> 1068 </div> 1069 <div class="l-container second"> 1070 <div 1071 id="w-node-_678c2aa5-152a-2677-8da6-e66ce9a674d0-e4235ce4" 1072 class="l-content__container" 1073 > 1074 <div class="paragraph__wrap right"> 1075 <p class="color__black"> 1076 We do not seek to fit in. Instead, we seek to stand out. We are 1077 equal, we are diverse and we want to be included. We have much 1078 to say, much to contribute and much to build. Our achievements 1079 are everyoneâs achievements. We are on the way and we are moving 1080 forward hand-in-hand. Hands create the world every day. 1081 </p> 1082 </div> 1083 </div> 1084 </div> 1085 <div class="l-cifras__wrap margin-top"> 1086 <div class="l-container cifra"> 1087 <div 1088 id="w-node-_9fbe977a-783f-5f2c-1975-e158fe08824f-e4235ce4" 1089 class="c-facts" 1090 > 1091 <h2 class="facts__heading color__black"> 1092 <span class="o-cifra color__red">In 2020 </span 1093 ><span class="o-cifra__text">an innovative equality, </span 1094 ><span class="o-cifra__text" 1095 >diversity and inclusion policy </span 1096 ><span class="o-cifra__text">was approved that adopts </span 1097 ><span class="o-cifra__text" 1098 >the best international practices</span 1099 > 1100 </h2> 1101 </div> 1102 </div> 1103 </div> 1104 </section> 1105 <section class="l-section h-contrast__dark"> 1106 <div 1107 data-w-id="0504c363-9e6e-bd8c-a81a-d9eaef297ed4" 1108 class="h-color-trigger _7" 1109 ></div> 1110 <div class="audio footer w-embed"> 1111 <audio 1112 loop="" 1113 preload="auto" 1114 id="sound7" 1115 src="/audio/7-epilogue.mp3" 1116 ></audio> 1117 </div> 1118 <div class="full-screen _7"> 1119 <div 1120 data-poster-url="../videos/1-LUZyAGUA-Boc1-musica-poster-00001.jpg" 1121 data-video-urls="../videos/1-LUZyAGUA-Boc1-musica-transcode.mp4,../videos/1-LUZyAGUA-Boc1-musica-transcode.webm" 1122 data-autoplay="true" 1123 data-loop="true" 1124 data-wf-ignore="true" 1125 aria-hidden="true" 1126 class="bg__video w-background-video w-background-video-atom" 1127 > 1128 <video 1129 autoplay="" 1130 loop="" 1131 style=" 1132 background-image: url('../videos/1-LUZyAGUA-Boc1-musica-poster-00001.jpg'); 1133 " 1134 muted="" 1135 playsinline="" 1136 data-wf-ignore="true" 1137 data-object-fit="cover" 1138 > 1139 <source 1140 src="../videos/1-LUZyAGUA-Boc1-musica-transcode.mp4" 1141 data-wf-ignore="true" 1142 /> 1143 <source 1144 src="../videos/1-LUZyAGUA-Boc1-musica-transcode.webm" 1145 data-wf-ignore="true" 1146 /> 1147 </video> 1148 </div> 1149 </div> 1150 <div class="l-container first epilogo"> 1151 <div 1152 id="w-node-_0cc218a3-33f8-723f-dde7-271c7096ab13-e4235ce4" 1153 class="l-content__container" 1154 > 1155 <h2 class="h2__7 color__green-iberdrola">
1156 <span class="mlend span-this">the future </span 1157 ><span class="mlend span-this">should </span 1158 ><span class="mlend span-this">always </span 1159 ><span class="mlend span-this">be better</span> 1160 </h2> 1161 </div> 1162 </div> 1163 <footer role="contentinfo" class="l-footer"> 1164 <div class="l-container footer"> 1165 <div 1166 id="w-node-_8d7b3be1-c117-4e19-7eb0-1e7b59beb536-e4235ce4" 1167 data-w-id="8d7b3be1-c117-4e19-7eb0-1e7b59beb536" 1168 style="opacity: 0" 1169 class="o-more" 1170 > 1171 <h3 class="footer-more-heading"> 1172 <span class="h-break-line">Would you like to know more </span 1173 ><span class="h-break-line">about diversity and inclusion </span 1174 >at 1175 <a 1176 href="https://www.iberdrola.com/" 1177 class="o-credits__link-green" 1178 >Iberdrola</a 1179 >? 1180 </h3> 1181 <a 1182 href="https://www.iberdrola.com/social-commitment/diversity-inclusion" 1183 class="o-credits__download" 1184 >Diversity and inclusion, a strategic priority for sustainable 1185 growth</a 1186 > 1187 </div> 1188 <div 1189 id="w-node-_46e75499-bc70-1112-7281-60e6458a8f08-e4235ce4" 1190 data-w-id="46e75499-bc70-1112-7281-60e6458a8f08" 1191 style="opacity: 0" 1192 class="l-credits__container" 1193 > 1194 <div class="o-credits"> 1195 Web design and development by 1196 <a 1197 href="https://diegodesousa.com" 1198 rel="noopener" 1199 tabindex="-1" 1200 target="_blank" 1201 class="o-credits__link" 1202 >Diego de Sousa</a 1203 > 1204 </div> 1205 <div class="o-credits">Music by J M Artero</div> 1206 </div> 1207 </div> 1208 </footer> 1209 </section> 1210 </main> 1211
1211<script src="../js/jquery.min.js" type="text/javascript"></script>
1211 1212
1212<script src="../js/las-manos.js" type="text/javascript"></script>
1212 1213 <!-- [if lte IE 9]>
1213<script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
1213<![endif] --> 1214
1214<script src="../js/anime.min.js" type="text/javascript"></script>
1214 1215
1215<script src="../js/jquery.inview.min.js" type="text/javascript"></script>
1215 1216 <!-- Audio crossfade --> 1217
1217<script> 1218 var $animation_elements = $(".audio"); 1219 var $window = $(window); 1220 $window.on("scroll resize", check_if_in_view); 1221 $window.trigger("scroll"); 1222 function check_if_in_view() { 1223 var window_height = $window.height(); 1224 var window_top_position = $window.scrollTop(); 1225 var window_bottom_position = window_top_position + window_height; 1226 $animation_elements.each(function () { 1227 var $element = $(this); 1228 var element_height = $element.outerHeight(); 1229 var element_top_position = $element.offset().top; 1230 var element_bottom_position = element_top_position + element_height; 1231 //check to see if this current container is within viewport 1232 if ( 1233 element_bottom_position >= window_top_position && 1234 element_top_position <= window_bottom_position 1235 ) { 1236 $element.addClass("in-view"); 1237 $audio = $(this).find("audio"); 1238 audio = $audio.get(0); 1239 if (!$audio.is(":animated") && audio.paused) { 1240 audio.volume = 0; 1241 $audio.animate( 1242 { 1243 volume: 1, 1244 }, 1245 2000 1246 ); 1247 audio.play(); 1248 } 1249 } else { 1250 $element.removeClass("in-view"); 1251 $audio = $(this).find("audio"); 1252 audio = $audio.get(0); 1253 if (!$audio.is(":animated") && !audio.paused) { 1254 $audio.animate( 1255 { 1256 volume: 0, 1257 }, 1258 2000, 1259 function () { 1260 this.pause(); 1261 } 1262 ); 1263 } 1264 } 1265 }); 1266 } 1267 </script>
1267 1268 <!-- END - Audio crossfade --> 1269 <!-- Span letters with .span-this class --> 1270
1270<script> 1271 // Find all text with .span-this class and break each letter into a span 1272 var spansWord = document.getElementsByClassName("span-this"); 1273 for (var i = 0; i < spansWord.length; i++) { 1274 var wordWrap = spansWord.item(i); 1275 wordWrap.innerHTML = wordWrap.innerHTML.replace( 1276 /(^|<\/?[^>]+>|\s+)([^\s<]+)/g, 1277 '$1<span class="spansword">$2</span>' 1278 ); 1279 } 1280 var tricksLetter = document.getElementsByClassName("spansword"); 1281 for (var i = 0; i < tricksLetter.length; i++) { 1282 var letterWrap = tricksLetter.item(i); 1283 letterWrap.innerHTML = letterWrap.textContent.replace( 1284 /\S/g, 1285 "<span class='letter'>$&</span>" 1286 ); 1287 } 1288 </script>
1288 1289 <!-- END - Span letters with .span-this class --> 1290 <!-- Mute & Unmute Sound with button --> 1291
1291<script> 1292 $(document).ready(function () { 1293 /*** Mute all ***/ 1294 $("#mute_all").on("click", function () { 1295 /*** Mute all video and audio on page ***/ 1296 $("body audio").each(function () { 1297 /*** Do it here globally ***/ 1298 $(this).prop("muted", true); 1299 }); 1300 }); 1301 /*** UnMute all ***/ 1302 $("#unmute_all").on("click", function () { 1303 /*** Un Mute all video and audio on page ***/ 1304 $("body audio").each(function () { 1305 /*** Do it here globally ***/ 1306 $(this).prop("muted", false); 1307 }); 1308 }); 1309 }); 1310 </script>
1310 1311 <!-- END - Mute & Unmute Sound with button --> 1312 <!-- "The hands" animation --> 1313
1313<script> 1314 var textOpacityIn1 = anime.timeline({ 1315 loop: false, 1316 autoplay: false, 1317 }); 1318 textOpacityIn1.add({ 1319 targets: ".ml13 .letter", 1320 opacity: [0, 1], 1321 easing: "easeInOutQuad", 1322 duration: 2250, 1323 delay: (el, i) => 150 * (i + 1), 1324 }); 1325 var textOpacityOut1 = anime.timeline({ 1326 loop: false, 1327 autoplay: false, 1328 }); 1329 textOpacityOut1.add({ 1330 targets: ".ml13", 1331 opacity: 0, 1332 duration: 1000, 1333 easing: "easeOutExpo", 1334 delay: (el, i) => 150 * (i + 1), 1335 }); 1336 $(document).ready(function () { 1337 // Play animation when scrolled into view 1338 $(".l-loader-content").on("inview", function (event, isInView) { 1339 if (isInView) { 1340 // Put the play below this line 1341 textOpacityIn1.play(); 1342 } else { 1343 } 1344 }); 1345 }); 1346 </script>
1346 1347 <!-- END "The hands" animation --> 1348 <!-- ENTER function --> 1349
1349<script> 1350 // On .o-enter click actions 1351 document.addEventListener("DOMContentLoaded", () => { 1352 document.querySelectorAll(".o-enter").forEach((trigger) => { 1353 trigger.addEventListener("click", function () { 1354 // REMOVE LOCK SCROLL ON BODY 1355 document 1356 .querySelectorAll("body") 1357 .forEach((target) => target.classList.remove("lock-scroll")); 1358 // REMOVE CLASS THAT HIDES FIRST AUDIO TO AVOID AUTOPLAY 1359 document 1360 .querySelectorAll(".audio") 1361 .forEach((target) => target.classList.remove("move-far")); 1362 // REMOVE CLASS THAT HIDES CONTENT 1363 document 1364 .querySelectorAll(".h-content") 1365 .forEach((target) => target.classList.remove("h-vhidden")); 1366 // Play first audio 1367 document.getElementById("sound0").play(); 1368 // Play "the hands" out animation 1369 textOpacityOut1.play(); 1370 // Click on Lottie 1371 $(".c-sound__controller").click(); 1372 // Change tabindex of Sound component 1373 $("#sound-controller").attr("tabIndex", 0); 1374 }); 1375 }); 1376 }); 1377 </script>
1377 1378 <!-- END ENTER function --> 1379 <!-- Quote animation function --> 1380
1380<script> 1381 var textOpacityIn2 = anime.timeline({ 1382 loop: false, 1383 autoplay: false, 1384 }); 1385 textOpacityIn2.add({ 1386 targets: ".ml3 .letter", 1387 opacity: [0, 1], 1388 easing: "easeInOutQuad", 1389 duration: 2250, 1390 delay: (el, i) => 5 + 20 * i, 1391 }); 1392 // WHEN SCROLLED IN VIEW 1393 $(document).ready(function () { 1394 // Play animation when scrolled into view 1395 $(".ml3").on("inview", function (event, isInView) { 1396 if (isInView) { 1397 // Put the play below this line 1398 textOpacityIn2.play(); 1399 } else { 1400 } 1401 }); 1402 }); 1403 </script>
1403 1404 <!-- END - Quote animation function --> 1405 <!-- Scroll down when arrow click --> 1406
1406<script> 1407 $(document).ready(function () { 1408 $(".c-scroll-helper").click(function () { 1409 var y = $(window).scrollTop(); 1410 $("html, body").animate({ 1411 scrollTop: y + 250, 1412 }); 1413 }); 1414 }); 1415 </script>
1415 1416 <!-- END Scroll down when arrow click --> 1417 <!-- Epilogue animation function --> 1418
1418<script> 1419 var textOpacityIn3 = anime.timeline({ 1420 loop: false, 1421 autoplay: false, 1422 }); 1423 textOpacityIn3.add({ 1424 targets: ".mlend .letter", 1425 opacity: [0, 1], 1426 easing: "easeInOutQuad", 1427 duration: 2250, 1428 delay: (el, i) => 5 + 20 * i, 1429 }); 1430 // WHEN SCROLLED IN VIEW 1431 $(document).ready(function () { 1432 // Play animation when scrolled into view 1433 $(".mlend").on("inview", function (event, isInView) { 1434 if (isInView) { 1435 // Put the play below this line 1436 textOpacityIn3.play(); 1437 } else { 1438 } 1439 }); 1440 }); 1441 </script>
1441 1442 <!-- END - Epilogue animation function --> 1443 <!-- Mute & Unmute --> 1444
1444<script> 1445 $(document).ready(function () { 1446 $(".c-sound__controller").click(function () { 1447 var clicks = $(this).data("clicks"); 1448 if (clicks) { 1449 // odd clicks 1450 /*** Mute all video and audio on page ***/ 1451 $("body audio").each(function () { 1452 /*** Do it here globally ***/ 1453 $(this).prop("muted", true); 1454 }); 1455 } else { 1456 // even clicks 1457 /*** Un Mute all video and audio on page ***/ 1458 $("body audio").each(function () { 1459 /*** Do it here globally ***/ 1460 $(this).prop("muted", false); 1461 }); 1462 } 1463 $(this).data("clicks", !clicks); 1464 }); 1465 }); 1466 </script>
1466 1467 <!-- END Mute & Unmute --> 1468
1468<script> 1469 function buttonsAccesible() { 1470 var actionButton = document.getElementById("enter"); 1471 actionButton.addEventListener("keydown", actionButtonKeydownHandler); 1472 actionButton.addEventListener("keyup", actionButtonKeyupHandler); 1473 var toggleButton = document.getElementById("sound-controller"); 1474 toggleButton.addEventListener("keydown", toggleButtonKeydownHandler); 1475 toggleButton.addEventListener("keyup", toggleButtonKeyupHandler); 1476 } 1477 /** 1478 * Activates the action button with the enter key. 1479 * 1480 * @param {KeyboardEvent} event 1481 */ 1482 function actionButtonKeydownHandler(event) { 1483 // The action button is activated by space on the keyup event, but the 1484 // default action for space is already triggered on keydown. It needs to be 1485 // prevented to stop scrolling the page before activating the button. 1486 if (event.keyCode === 32) { 1487 event.preventDefault(); 1488 } 1489 // If enter is pressed, activate the button 1490 else if (event.keyCode === 13) { 1491 event.preventDefault(); 1492 activateActionButton(); 1493 } 1494 } 1495 /** 1496 * Activates the action button with the space key. 1497 * 1498 * @param {KeyboardEvent} event 1499 */ 1500 function actionButtonKeyupHandler(event) { 1501 if (event.keyCode === 32) { 1502 event.preventDefault(); 1503 activateActionButton(); 1504 } 1505 } 1506 function activateActionButton() { 1507 // Action below 1508 event.currentTarget.click(); 1509 } 1510 /** 1511 * Toggles the toggle buttonââ¬â¢s state if itââ¬â¢s actually a button element or has 1512 * the `role` attribute set to `button`. 1513 * 1514 * @param {MouseEvent} event 1515 */ 1516 function toggleButtonClickHandler(event) { 1517 if ( 1518 event.currentTarget.tagName === "button" || 1519 event.currentTarget.getAttribute("role") === "button" 1520 ) { 1521 toggleButtonState(event.currentTarget); 1522 } 1523 } 1524 /** 1525 * Toggles the toggle buttonââ¬â¢s state with the enter key. 1526 * 1527 * @param {KeyboardEvent} event 1528 */ 1529 function toggleButtonKeydownHandler(event) { 1530 if (event.keyCode === 32) { 1531 event.preventDefault(); 1532 } else if (event.keyCode === 13) { 1533 event.preventDefault(); 1534 toggleButtonState(event.currentTarget); 1535 } 1536 } 1537 /** 1538 * Toggles the toggle buttonââ¬â¢s state with space key. 1539 * 1540 * @param {KeyboardEvent} event 1541 */ 1542 function toggleButtonKeyupHandler(event) { 1543 if (event.keyCode === 32) { 1544 event.preventDefault(); 1545 toggleButtonState(event.currentTarget); 1546 } 1547 } 1548 /** 1549 * Toggles the toggle buttonââ¬â¢s state between *pressed* and *not pressed*. 1550 * 1551 * @param {HTMLElement} button 1552 */ 1553 function toggleButtonState(button) { 1554 var isAriaPressed = button.getAttribute("aria-pressed") === "true"; 1555 button.setAttribute("aria-pressed", isAriaPressed ? "false" : "true"); 1556 activateActionButton(); 1557 } 1558 window.onload = buttonsAccesible; 1559 </script>
1559 1560 </body> 1561</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.