body:not(.js-focus-visible) :focus, html:not(.js-focus-visible) :focus {
outline:none;
}
:root {--dropShadow1: 5px 5px 0 rgba(0,0,0,0.1);}
:root {--dropShadow2: 8px 8px 0 rgba(0,0,0,0.1);}
/** FT CSS OVERRIDES **/
.disclaimer__sponsor {font-weight:bold !important;}
.disclaimer .o-tooltip-content p {font-size:16px !important;}
.o-tooltip--arrow-left.o-tooltip-arrow--align-top:after, .o-tooltip--arrow-left.o-tooltip-arrow--align-top:before {top:50% !important;}
.o-header__drawer, .o-header {position: relative; z-index: 10;}
.o-footer {margin-top:0 !important; position: relative; z-index: 5;}
.o-tooltip {z-index:50 !important;}
.disclaimer__sponsor {color:#000000 !important; font-weight: 600 !important;}
.safari-fix {position: absolute; background-color: #ffffff; left: 0; top: -350px; width: 100%; height: 350px; z-index: 0;}
.o-cookie-message__heading h1 {color: #000;}
.o-cookie-message {left: auto; right: 0;}
.pc__client-title a {color: #939598;}
/* 2020 OVERRIDES */
.pc {padding-top: 11px; padding-bottom: 10px; z-index: 30}
.o-footer *,
.pc__share-content,
.pc__client .pc__client-title,
.pc__title-content {font-family: MetricWeb, sans-serif !important;}
.pc__disclaimer-content {font-family: MetricWeb, sans-serif !important; font-size: 16px; line-height: 1.5em; color: #333333;}
[class*=col-]:not(.slick-slide) {float:none !important}
.o-header__drawer * {font-family: MetricWeb,sans-serif !important;}
#content .right {float: none;}
#form1 {background-color:#ffffff;}
* {margin:0; padding:0; outline:none; border:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
body {font-family: 'Gilroy', sans-serif; background-color: #ffffff !important; height: auto !important; color: #000000}
ul {margin:0;}
/*
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content p,
#content ul,
#content ol,
#content a {font-family: 'Gilroy', sans-serif; font-weight: normal}
*/
/******************************************************************************************************************************/
a.cover {position: absolute; left: 0; top:0; width:100%; height: 100%; z-index: 6;}
.inner {width:1000px; max-width: 100%; padding-left: 25px; padding-right: 25px; margin: auto;}
/* HOME PAGE */
.home-listing {height: calc(100vh - 108px);position: relative; color: #ffffff}
.listing-col {width: 33.333%; height: 100%; position: absolute; left: 0; top:0; display: flex; flex-direction: column; justify-content: flex-end; padding: 5vw; transition:all 0.4s ease-in-out; background-size: cover; z-index: 0; background-position: center bottom}
.listing-col h2 {font-size: 3vw; font-weight: 800; line-height: 0.9em; margin-bottom: 0.25em}
.listing-col p {font-size: 18px; line-height: 1.4em}
.listing-col:nth-child(1) {}
.listing-col:nth-child(2) {left: 33.333%;}
.listing-col:nth-child(3) {background-color: #666666; left: auto; right: 0}
.listing-col:nth-child(2) .number {animation-delay: 0.75s;}
.listing-col:nth-child(3) .number {animation-delay: 1s}
.listing-col:after {position: absolute; left: 0; bottom:0; width: 100%; height: 100%; content:''; z-index: 0; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);}
.listing-col .number {position: relative; z-index: 2; flex-shrink: 0}
.read-more {display: flex; justify-content: flex-end; align-items: center; font-size: 22px; font-weight: 700; margin-top: 30px;}
.read-more svg {width: 45px; margin-left: 20px;}
.read-more path {fill:#ffffff}
.read-more span {opacity: 0; transition: 0.3s ease-out}
.read-more.locked span {opacity: 1}
.home-listing-text {max-width: 100%; width: 414px; position: relative; z-index: 2}
.listing-col:hover .read-more span {opacity: 1}
.listing-col:nth-child(1):hover {width: 100%; z-index: 4}
.listing-col:nth-child(2):hover {width: 100%; z-index: 4; left: 0;}
.listing-col:nth-child(3):hover {width: 100%; z-index: 4;}
/******* CONTENT *******/
.home-icon {position: fixed; left: 0; padding:10px 15px 10px 10px; transition: 0.2s ease-out; top:108px; border-bottom-right-radius: 20px; border-top-right-radius: 20px; background-color: #ffffff; box-shadow: var(--dropShadow1); z-index: 5}
.home-icon svg {width: 20px;}
.home-icon:hover {padding-left: 15px;}
/* CONTENT HERO */
.content-hero-container {height: calc(100vh - 200px); min-height: 490px; position: relative; display: flex; align-items: flex-end; overflow: hidden; background-color: #000000}
.content-hero-container:after {position: absolute; left: 0; bottom:0; width: 100%; height: 70%; content:''; z-index: 2; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); animation: header-overlay-fade 1.75s 0.5s forwards; animation-timing-function: ease-out; opacity: 0}
.content-hero-image {position: absolute; left: 0; top:0; width: 100%; height: 100%; background-size: cover; animation: hero-image 2s 0s forwards; opacity: 0.2; animation-timing-function: ease-out;}
.content-hero-container .inner {position: relative; z-index: 5; margin: 0 auto; padding-bottom: 40px;}
.content-hero-container h1 {font-size: 83px; font-weight: 900; color: #ffffff; line-height: 0.8em; position: relative;}
.content-hero-container h1 div {overflow: hidden; padding-top: 10px; margin-top: -10px}
.content-hero-container h1 span {animation: header-fade 0.5s 1s forwards; animation-timing-function: ease-out; transform: translateY(-100%); opacity: 0; display: block}
.content-hero-container h1 div:nth-child(2) span {animation: header-fade 0.5s 1.25s forwards; animation-timing-function: ease-out;}
.content-hero-container h1 div:nth-child(3) span {animation: header-fade 0.5s 1.45s forwards; animation-timing-function: ease-out;}
.content-hero-container h1 div:nth-child(4) span {animation: header-fade 0.5s 1.65s forwards; animation-timing-function: ease-out;}
.number {width: 70px; height: 70px; border-radius: 70px; margin-bottom: 40px; font-size: 46px; color: #ffffff; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; border:3px solid #ffffff; transform: scale(0); animation: bounce 0.5s 0.5s forwards; animation-timing-function: ease-out;}
/* ARTICLE CONTENT */
.text-container-two-col .cols {display: flex; justify-content: space-between; width:calc(100% + 40px); margin-left: -20px;}
.text-col {padding: 20px; width: 50%}
.first-letter {font-size: 129px; font-weight: 900; margin:-10px 20px -11px 0; display: block; line-height: 1em; float: left;}
.article p {font-size: 16px; line-height: 1.5em; margin-bottom: 1em}
.article p.intro {font-weight: 600; font-size: 18px;}
.article hr {margin: 0; border-top:2px solid #FFB7B7}
.article p a {font-weight: 600; text-decoration: underline; color: #000000}
.article p a:hover {opacity: 0.5}
hr.from-left {right:0%; position: absolute; width: 2500px;}
hr.from-right {left:50%; position: absolute; width: 2500px; bottom: 0;}
.graph-section {position: relative; padding: 65px 0 35px}
.graph-section .inner {position: relative;}
.graph-section .text-col {background-color: #ffffff; z-index: 2}
lottie-player.lottie-1-animate {position: absolute; left: 0; top:60px}
.graph-section .pullout-graphic {position: absolute; bottom:30px; right: 0}
/* PULLOUT GRAPHIC */
.pullout-graphic {width: 415px; padding: 20px; text-align: right; background-color: rgba(255,255,255,0.8);}
.pullout-graphic img {width: 366px; max-width: 100%; position: relative;}
.pullout-graphic h2 {font-size: 43px; font-weight: 800; padding-right: 20px; position: relative;}
.pullout-graphic p {font-size: 23px; font-weight: 500; line-height: 1.3em; margin-top: 8px; margin-bottom: 0}
.pullout-graphic span {font-size: 14px; display: block; margin-top: 15px}
.blockquote-container {display: flex; padding: 70px 70px 70px 80px; margin-bottom: 60px; box-shadow: var(--dropShadow2);}
.blockquote-container p {font-size: 18px; font-weight: 600}
blockquote {padding-left: 80px; position: relative;}
blockquote img {width: 70px; margin-bottom: 20px;}
blockquote cite {line-height: 1.3em}
.quote-image-container {width: 265px; height: 265px; border-radius: 265px; border:2px solid #ffffff; box-shadow: var(--dropShadow2); flex-shrink: 0; overflow: hidden; position: relative; background: linear-gradient(316deg, #FFB7B7, #ffffff, #FFD8D8);}
.quote-image {position: absolute; left: 0; width: 100%; height: 100%; background-size: cover;}
.blockquote-container.white {background: #ffffff}
.blockquote-section-2 {padding:0}
.blockquote-section-2 p {font-weight: 400}
.blockquote-section-2 .blockquote-container {box-shadow: none; padding-left: 0; padding-right: 0; margin-bottom: 0}
/* OIL SECTION */
.oil-section {padding:40px 0 60px 0}
.oil-section .cols {align-items: center}
.oil-section .pullout-graphic {position: relative;}
.oil-section .pullout-graphic img {width: 321px;}
.oil-section .oil {position: absolute; left: -93px; top:0; width: 93px; display: flex; flex-direction: column}
.oil-section img.oil-1 {width: 28px; align-self: flex-end}
.oil-section img.oil-2 {width: 38px;}
.oil-section img.oil-3 {width: 93px;}
.oil-section .text-container-two-col {padding: 40px 0}
.line-section {overflow: hidden;}
.line-section .inner {position: relative;}
/* LAPTOP SECTION */
.ipad-section,
.laptop-section {margin-top: -100px; position: relative; background-image: url(/_uploads/page-images/pink-bottom.svg); background-size: 100% auto; background-position: bottom left; background-repeat: no-repeat; display: flex; align-items: flex-end;}
.laptop-image {width:40%; transform: translateX(-15px); position: relative; flex-shrink: 0}
.laptop-image-mask {position: absolute; left: 0; top:0; width: 100%; height: 100%; z-index: 5}
.good-type-of-cookie {position: absolute; width: 27%; left: 52%; top:100px; z-index: 4;}
.laptop-text {width: 520px; padding: 40px; background-color: #ffffff; align-self: center;}
.inner-absolute {position: absolute; left: 50%; top:50%; padding: 0; transform: translateX(-50%) translateY(-50%); display: flex; justify-content: flex-end}
.section-door h2,
.laptop-text h2 {font-size: 49px; line-height: 0.9em; margin-bottom: 0.5em}
/* IPAD SECTION */
.ipad-section {background-image: url(/_uploads/page-images/pink-bottom-flipped.svg); display: block; margin-top: 0}
.ipad-col {padding-bottom: 0; margin-bottom: -10px; position: relative}
.ipad-section p {font-size: 26px; font-weight: 600}
.ipad-text-col-inner {background-color: #ffffff; padding: 40px;}
.ipad-text-col-inner p:last-child {margin-bottom: 0}
.ipad-section .inner {padding: 0}
.ipad-section .text-col {padding: 0}
.ipad-section .cols {width: 100%; margin: 0}
.cta-section {padding: 60px 0;}
.cta-section .inner {display: flex; justify-content:center}
.cta-section a {color:#000000; display: inline-flex; max-width: 100%; align-items: flex-end; margin: auto; transition: 0.3s ease-out}
.cta-section a span {font-size: 21px; font-weight: 800; display: block; margin-bottom: 12px;}
.cta-section a h4 {font-size: 53px; font-weight: 800; line-height: 1em}
.cta-section a img {transform: translateY(-8px); transition: 0.2s ease-out}
.cta-section a div {padding-right: 30px;}
.cta-section a:hover img {transform: translateX(10px) translateY(-8px)}
.cta-section a:hover {transform: translateX(8px);}
/**************************/
/****** ESG ARTICLE *******/
.article-esg .intro-section {position: relative; padding: 65px 0}
.article-esg .intro-section:after {}
.article-esg .intro-section:before {position: absolute; right:0; top:0; content: ''; width: 50%; height: 100%; z-index: 2; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.article-esg .intro-section .cols {align-items: center}
#textTop {position: absolute; right:0; top:0; content: ''; width: 50%; height: 100%; z-index: 1}
.intro-section lottie-player {position: relative; left: auto; top: -50px; z-index: 5; width: 100%; height: auto;}
.article-esg .blockquote-section-1 .blockquote-container {background: none; box-shadow: none; padding-left: 0; padding-right: 0}
.article-esg .blockquote-section-1 {background: rgb(255,255,255); background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(211,254,212,1) 50%, rgba(255,255,255,1) 100%);}
.article-esg .quote-image-container {background:none}
.sign-off-section {padding: 60px 0}
.piggy-bank {position: relative;}
#l2-2 {position: absolute; width: calc(50% - 50px); max-width: 740px; top: -150px; height: auto; left: 0}
.section-social-use,
.section-door {background-image: url(/_uploads/page-images/green-shape-1.svg); background-size: 100% auto; background-position: bottom left; background-repeat: no-repeat; margin-top: 30px; position: relative; min-height: 530px;}
.single-text .inner,
.section-door .inner {width:1136px; position: relative;}
.doors {max-width: 100%; width: 575px; right: 50%; margin-right: -590px; position: absolute; top:0; z-index: 2}
.section-door .text-col {position: relative; z-index: 2}
.single-text.under-door .text-panel {background-color: rgba(255,255,255,0.5)}
#l2-3 {position: absolute; right: 70px; top:55px; width:100%; height: auto;}
.esg-last-section {background-image: url(/_uploads/page-images/green-shape-2.svg); background-size: 100% auto; background-position: bottom left; background-repeat: no-repeat; padding-bottom: 40px;}
.esg-last-section .cols {justify-content: flex-end}
.text-panel {padding: 40px; background-color: #ffffff;}
.article-esg .cta-section {background: linear-gradient(316deg, #D3FED4, #ffffff, #D3FED4);}
.article-esg .btt:after {background-color: #D3FED4}
.article-esg .btt:hover path {fill:#000000}
/**************************/
/****** SDL ARTICLE *******/
.article-sdl .intro-section {position: relative; padding: 65px 0}
.article-sdl .intro-section .cols {align-items: center}
.article-sdl .blockquote-section-1 {}
.article-sdl .blockquote-section-1 .blockquote-container {background: none; box-shadow: none; padding-left: 0; padding-right: 0}
.article-sdl .blockquote-section-1 {background: rgb(255,255,255); background: linear-gradient(45deg, rgba(255,255,255,1) 0%, rgba(181,236,245,1) 50%, rgba(255,255,255,1) 100%);}
.article-sdl .blockquote-section-1 blockquote {width: 550px; max-width: 100%;}
.article-sdl .quote-image-container {background:none}
.article-sdl h2 {font-size: 49px; line-height: 0.9em; margin-bottom: 0.5em}
.section-social-use {background-image: url(/_uploads/page-images/blue-shape-1.svg); margin-top: 0; padding-bottom: 40px;}
.section-social-use .text-col:first-child {width: 45%}
.section-social-use .text-col:last-child {width: 55%}
.next-frontier {padding: 60px 0; background-color: #000000; position: relative; overflow: hidden;}
.next-frontier .inner {position: relative; z-index: 3}
.next-frontier p {color: #ffffff}
.next-frontier p a {color:#B5ECF5}
.next-frontier .blockquote-container {background: none; padding: 0; flex-direction: column; padding-right: 20px; margin-bottom: 0}
.next-frontier blockquote {padding: 0}
.next-frontier blockquote p {font-size: 24px; color: #B5ECF5; line-height: 1.2em}
.next-frontier blockquote img {position: absolute; left: -90px; top:0}
.next-frontier blockquote cite {color: #ffffff;}
.next-frontier .quote-image-container {border: none; width: 150px; height: 150px; margin-bottom: 15px;}
.align-center .cols {align-items: center}
.article-sdl .cta-section {background: linear-gradient(316deg, #B5ECF5, #ffffff, #B5ECF5);}
#l3-1 {width: 400px; margin: auto; max-width: 100%; height: auto}
.screen-time-section {position: relative;}
.screen-time-section #l3-2 {position: absolute; right: 0; top:90px; width: 50%;}
.earth {width: 2100px; max-width: unset; position: absolute; top: 400px; left: 50%; transform: translateX(-50%); z-index: 2}
#l3-4 {width: 500px; height: auto; position: absolute; top:80px; left: 60%; margin-left: -100px; z-index: 1}
.phones {width: 1000px; position: absolute; right:-220px; z-index: 2; bottom: 0;}
.star {width: 2px; height: 2px; background-color: #ffffff; border-radius: 2px;}
.star1 {position: absolute; left: 10%; top:50px; animation: star 4s ease-out 0.5s infinite; opacity: 0}
.star2 {position: absolute; left: 20%; top:60px; animation: star 4s ease-out 0.2s infinite;}
.star3 {position: absolute; left: 30%; top:70px; animation: star 3s ease-out 0.1s infinite;}
.star4 {position: absolute; left: 40%; top:60px; animation: star 4s ease-out 0.65s infinite; width: 1px; height: 1px;}
.star5 {position: absolute; left: 50%; top:50px; animation: star 4s ease-out 0.75s infinite;}
.star6 {position: absolute; right: 10%; top:60px; animation: star 3s ease-out 0.1s infinite;}
.star7 {position: absolute; right: 20%; top:70px; animation: star 4s ease-out 0.3s infinite; width: 1px; height: 1px;}
.star8 {position: absolute; right: 30%; top:60px; animation: star 4s ease-out 0.3s infinite;}
.star9 {position: absolute; right: 40%; top:50px; animation: star 3s ease-out 0.1s infinite; width: 1px; height: 1px;}
.star10 {position: absolute; left: 15%; top:170px; animation: star 4s ease-out 1s infinite;}
.star11 {position: absolute; left: 25%; top:150px; animation: star 4s ease-out 0.2s infinite; width: 1px; height: 1px;}
.star12 {position: absolute; left: 35%; top:130px; animation: star 3s ease-out 0.5s infinite;}
.star13 {position: absolute; left: 45%; top:120px; animation: star 4s ease-out 0.65s infinite;}
.star14 {position: absolute; left: 55%; top:170px; animation: star 4s ease-out 0.9s infinite; width: 1px; height: 1px;}
.star15 {position: absolute; right: 15%; top:180px; animation: star 3s ease-out 0.1s infinite;}
.star16 {position: absolute; right: 25%; top:190px; animation: star 4s ease-out 0.4s infinite;}
.star17 {position: absolute; right: 35%; top:200px; animation: star 4s ease-out 0.2s infinite; width: 1px; height: 1px;}
.star18 {position: absolute; right: 45%; top:100px; animation: star 3s ease-out 0.5s infinite;}
@keyframes star {
0% {opacity: 0}
50% {opacity: 1}
100% {opacity: 0}
}
.btt {width: 96px; height:96px; border-radius: 96px; position: relative; background-color: #000000; border:2px solid #ffffff; box-shadow:var(--dropShadow1); display: flex; justify-content: center; align-items: center; margin:50px auto 0; overflow: hidden}
.btt svg {position: relative; z-index: 2; transition: 0.3s ease-out}
.btt path {fill:#ffffff}
.btt:hover:after {bottom: 0}
.btt:hover svg {transform: translateY(-5px)}
.btt:after {width: 100%; height: 100%; background-color: #FFB7B7; content: ''; position: absolute; left: 0; bottom:-100%; transition: 0.2s ease-out}
/* FOOTER */
footer .inner {display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 30px 0}
footer p {font-weight: 800; font-size: 20px; margin-bottom: 0.75em}
footer ul {display: flex; align-items: center;}
footer ul li {margin: 0 7px}
footer ul li a {width: 50px; height: 50px; border-radius: 50px; display: flex; justify-content: center; align-items: center; border:1px solid #000000; box-shadow:var(--dropShadow1); position: relative; overflow: hidden}
footer ul li a svg {position: relative; z-index: 2}
footer ul li a:after {position: absolute; left: 0; bottom: -100%; width: 100%; height: 100%; background-color: #000000; content: ''; transition: 0.2s ease-out}
footer ul li a:hover:after {bottom: 0}
footer ul li a:hover path {fill:#ffffff}
.cta-section,
.blockquote-container {
background: linear-gradient(316deg, #FFB7B7, #ffffff, #FFD8D8);
background-size: 400% 400%;
-webkit-animation: gradanim 10s ease infinite;
-moz-animation: gradanim 10s ease infinite;
animation: gradanim 10s ease infinite;
}
@-webkit-keyframes gradanim {
0%{background-position:9% 0%}
50%{background-position:92% 100%}
100%{background-position:9% 0%}
}
@-moz-keyframes gradanim {
0%{background-position:9% 0%}
50%{background-position:92% 100%}
100%{background-position:9% 0%}
}
@keyframes gradanim {
0%{background-position:9% 0%}
50%{background-position:92% 100%}
100%{background-position:9% 0%}
}
@keyframes header-fade {
0% {opacity: 0; transform: translateY(-100%)}
100% {opacity: 1; transform: translateY(0)}
}
@keyframes header-overlay-fade {
0% {opacity: 0; transform: translateY(100%)}
100% {opacity: 0.75; transform: translateY(0)}
}
@keyframes hero-image {
0% {transform: scale(1.3)}
75% {filter: blur(0px);}
100% {transform: scale(1); filter: blur(0px); opacity: 1}
}
@keyframes bounce {
0% {transform: scale(0)}
60% {transform: scale(1.1)}
80% {transform: scale(0.9)}
100% {transform: scale(1)}
}
#pmLink {visibility: hidden}