:root { --mediumGrey:#595959; --primaryPink:#F57F9B; --lightPink:#FDC6D3; --darkPink:#D0254D; --primaryYellow:#F7C64F; --darkYellow:#917021; --lightYellow:#FFE6A8; --primaryGreen:#4AF2A9; --lightGreen:#B2FFDE; --darkGreen:#00866F;} body:not(.js-focus-visible) :focus, html:not(.js-focus-visible) :focus { outline:none; } /** 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:#1A1A1A !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;} .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: 'Lato', sans-serif; background-color: #ffffff !important; height: auto !important; color: #1A1A1A} ul {margin:0;} #tvn-content h1, #tvn-content h2, #tvn-content h3, #tvn-content h4, #tvn-content h5, #tvn-content h6 {font-family: "marlide-display-variable",sans-serif; font-weight: 500; color: #1a1a1a} #tvn-content p, #tvn-content ul, #tvn-content ol, #tvn-content a {font-family: 'Lato', sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #1a1a1a} /******************************************************************************************************************************/ a.cover {position: absolute; left: 0; top:0; width:100%; height: 100%; z-index: 6; display: none} strong {font-weight: 700} .inner {width:1340px; max-width: 100%; padding-left: 25px; padding-right: 25px; margin: auto;} .home-hero-text {text-align: center; padding: 130px 0 20px; z-index: 5; position: fixed; left: 0; top: 0; width: 100%; transform-origin: top center; background-color: #ffffff; z-index: 1; transition: 0.3s ease-out} .home-hero-text h1 {font-size: 122px; font-weight: 400; transition: 0.2s ease-out} .home-hero-text h1 span {font-size: 133px; line-height: 0.8em; text-transform: uppercase; color: #DBB049; display: block; transition: 0.3s ease-out} .home-hero-text:after {position: absolute; left: 50%; margin-left: -125px; bottom: 0; width: 250px; border-bottom: 1px solid #1A1A1A; content: '';} .home-hero-text-inner {width: 1200px; max-width: 100%; margin: auto; transition: 0.3s ease-out;} .home-hero-text.sticky {z-index: 5; background-color: #ffffff; padding: 70px 0 22px;} .home-hero-text.sticky h1 {font-size: 24px; line-height: 1.2em} .home-hero-text.sticky h1 span {font-size: 24px; line-height: 1em} .home-hero-text.sticky:after {display: none} .listing {padding-top: 400px; position: relative; z-index: 2} .listing .panel-container {margin-bottom: 80px;} .listing .panel-container:last-child {margin-bottom: 0} /* HOME LISTING */ .panel-container {position: relative; display: block} .panel-container-inner {width: 1400px; max-width: 100%; margin: auto; padding: 0 30px; position: relative; z-index: 2} .panel-container-cols {display: flex; justify-content: space-between; min-height: 630px;} .panel-container .cloud-image {position: absolute; bottom: 0; right: 0; width: 66%; z-index: 1; transition: 0.75s ease-out; transform-origin: bottom center} .panel-container:after {position: absolute; left: 0; top: 0; inset:0; content: ''; z-index: 0} .panel-image-container {position: relative; z-index: 2; width: 55%; flex-shrink: 0; margin-right: 50px; display: flex; align-items: flex-end; transform-origin: bottom center} .panel-container svg {margin-top: 30px; transition: 0.75s ease-out} .panel-container-text-outer {width: 600px; max-width: 100%; display: flex; flex-shrink: 0; align-items: center; padding: 40px 0; position: relative; z-index: 3} .panel-container-text {width: 100%;} .panel-container-text h2 {font-size: 100px; line-height: 0.85em; font-variation-settings: 'wght' 700; text-transform: uppercase; margin-bottom: 0.15em; transition: 0.3s ease-out} .panel-container-text h3 {font-size: 64px; line-height: 1em; margin-top: 0.35em; margin-bottom: 0.35em; text-transform: uppercase; font-variation-settings: 'wght' 400; display: block; color: var(--mediumGrey) !important} .panel-container-text h1 em, .panel-container-text h2 em {font-style: normal; white-space: nowrap} .panel-container-text p {font-size: 20px; line-height: 1.6em; width: 375px; max-width: 100%;} .panel-arrow-circle {width: 90px; height: 90px; border-radius: 90px; display: flex; justify-content: center; align-items: center; background-color: #1a1a1a; margin-top: 20px; transition: 0.3s ease-out} .panel-arrow-circle svg {margin: 0; width: 60px; height: auto} .panel-container:hover .panel-arrow-circle {transform: translateX(10px);} .panel-container:hover .cloud-image {transform: scale(1.1);} .panel-shape-container {position: absolute; right: 0; top: 0; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: flex-end} /* ODD ONES */ .listing-inner .panel-container:first-child .panel-image-container {transform: translateY(-70px); margin-bottom: -70px;} .listing-inner .panel-container:nth-child(even) .panel-shape-container {justify-content: flex-start} .listing-inner .panel-container:nth-child(even) .panel-container-cols {flex-direction: row-reverse} .listing-inner .panel-container:nth-child(even) .cloud-image {right: auto; left: 0;} .listing-inner .panel-container:nth-child(even) .panel-image-container {margin-right: 0} .listing-inner .panel-container:nth-child(even) svg {display: block} /* IMMERSIVE */ article {padding: 80px 0 0} article p {font-size: 18px; line-height: 1.6em; margin-bottom: 1em} .first-character {font-size: 163px; color:#1a1a1a; float: left; font-family: "marlide-display-variable", sans-serif; font-variation-settings: "wght" 500; display: block; line-height: normal; margin: 0px 15px -20px 0;} .article-inner {width: 760px; padding: 0 30px; margin:0 auto; max-width: 100%;} .standfirst p {font-size: 26px; font-weight: 700; line-height: 1.5em;} .section-heading {background-image: url(/_uploads/page-images/bg-half-circle-tile-pink.svg); margin:110px 0 60px 0; overflow: hidden} .section-heading.green {background-image: url(/_uploads/page-images/bg-half-circle-tile-green.svg);} .section-heading.yellow {background-image: url(/_uploads/page-images/bg-half-circle-tile-yellow.svg);} .section-heading h2 {font-size: 70px; font-variation-settings: "wght" 500; line-height: 0.9em; margin-bottom: -11px;} .section-heading h2 strong {font-variation-settings: "wght" 700;} .sh-text {background-color: #ffffff; display: inline-block; padding: 0 20px; position: relative;} .sh-text:after {width: 200px; content: ''; position: absolute; left: 100%; height: 100%; top: 0; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);} .sh-text:before {width: 200px; content: ''; position: absolute; right: 100%; height: 100%; top: 0; background: rgb(255,255,255); background: linear-gradient(-90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);} /* BLOCKQUOTE AND AUDIO */ .person-circle {width: 198px; height: 198px; border-radius: 198px; background-color:var(--lightPink);position: relative;} .person-outer .person-circle img {width: 100%; height: auto; position: absolute; left: 0; bottom: 0;} .icon-audio {width: 60px; position: absolute; bottom: 40px; left: 0;} .person-overflow-hidden {width: 198px; height: 250px; border-radius: 0 0 99px 99px; display: flex; align-items: flex-end; overflow: hidden;} .person-outer {width: 198px; margin-right: -30px; position: relative; z-index: 4} .person-outer audio {width: 100%;} .audio-container {margin-top: 10px;} .blockquote-section {position: relative;} .blockquote-section .inner {display: flex; justify-content: center; align-items: flex-end; left: -100px; position: relative;} .blockquote-container, .aa-blockquote-section-with-person.aa-blockquote-section .blockquote-container {width: 817px; margin-bottom: 110px; position: relative; z-index: 2; max-width: 100%;} .blockquote-container blockquote {border-radius: 54px; background-color: #ffffff; padding: 50px 80px 60px; z-index: 2; position: relative} .blockquote-container p {font-size: 24px; font-weight: 700} .blockquote-container cite {text-transform: uppercase; font-style: normal; color: var(--darkPink); font-size: 17px; font-weight: 600} .blockquote-container:before {position: absolute; bottom: -25px; left: 70px; z-index: 3; content: ''; width: 0px; height: 0px; border-style: solid; border-width: 30px 40px 0 0; border-color: #ffffff transparent transparent transparent; transform: rotate(0deg);} #content .blockquote-container h3 {font-size: 30px; margin-bottom: 0.5em; color: var(--darkPink); text-transform: uppercase; font-family: 'Lato', sans-serif; font-weight: 900} .blockquote-container:after {position: absolute; left: -30px; top: -30px; width:calc(100% + 60px); height:calc(100% + 60px); content: ''; opacity: 0.4; background-size: 100% 100%; background-image: url(/_uploads/page-images/shadow-image2.png); z-index: 0} /***********************/ /****** IMMERSIVE ******/ .ia--animation-section-1 {overflow: hidden; position: relative; padding-top: 50px; padding-bottom: 50px;} .ia--animation-section-1 .article-inner-inner, .ia--animation-section-2 .article-inner-inner {width: 400px; max-width: 100%; position: relative;} .ia--animation-section-1 .circle-1 {width: 544px; height: 544px; border-radius: 544px; border: 1px solid var(--primaryYellow); position: absolute; right: -200px; top: 0; z-index: 0} .ia--animation-section-3 {position: relative;} /** IMMERSIVE ANIMATION 1 **/ .ia-animation-container-1 {position: absolute; right:60px; bottom: 15px; z-index: 2; background-color: #ffffff; width: 544px; height: 544px; border-radius: 544px; border: 1px solid var(--primaryYellow)} .ia-animation-container-1 #lottie1 {position: absolute; left: 49px; top: 35px;} /** IMMERSIVE ANIMATION 2 **/ .ia--animation-section-2 {min-height: 726px; position: relative; overflow: hidden} .ia--animation-section-2 .article-inner-inner {margin-left: auto} .ia--animation-2-container .inner {position: relative} .ia--animation-2-container .circle-1, .ia--animation-2-container .circle-2, .ia--animation-2-container .circle-3 {position: absolute; width: 565px; height: 565px; border-radius: 565px; border:1px solid var(--primaryYellow); background-color: #ffffff} .ia--animation-2-container .circle-1 {width:450px; height: 450px; left: -250px; top:-215px;} .ia--animation-2-container .circle-2 {left: 0; top:-180px; z-index: 2} .ia--animation-2-container .circle-2 #lottie2 {width: 816px; position: absolute; left: -97px; top: -20px;} .ia--animation-2-container .circle-3 {right: -350px; top: -180px} .ia--animation-2-container .line-text {width: 564px; height: 200px; border-top:1px solid var(--primaryYellow); position: absolute; left: 50%; top: 120px; margin-left: -106px; display: block; display: flex; justify-content: flex-end;} .ia--animation-2-container .line-text-inner {width: 320px; margin-top: -50px; padding-right: 20px;} .pullout .big-bold {font-size: 141px; font-variation-settings: "wght" 800; line-height: 0.8em} .pullout p {font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 500; font-size: 36px; line-height: 1.2em} .blockquote-section.green .person-circle {background-color:var(--lightGreen)} .blockquote-section.yellow .person-circle {background-color:var(--lightYellow)} .blockquote-section.green .blockquote-container cite, #content .blockquote-section.green .blockquote-container h3 {color:var(--darkGreen)} .blockquote-section.yellow .blockquote-container cite, #content .blockquote-section.yellow .blockquote-container h3 {color:var(--darkYellow)} .blockquote-section.flipped, .aa-blockquote-section.aa-blockquote-section-with-person .blockquote-section.flipped {width: calc(100% - 100px);} .blockquote-section.flipped .inner, .aa-blockquote-section.aa-blockquote-section-with-person .blockquote-section.flipped {flex-direction: row-reverse; left: 0; transform: translateX(100px)} .blockquote-section.flipped .person-outer {margin-left: -30px;} .blockquote-section.flipped .blockquote-container:before {left: auto; right: 70px; transform: scaleX(-1);} .blockquote-section.flipped .icon-audio {left: auto; right: 0} /** IMMERSIVE ANIMATON 3 **/ .ia--animation-section-3 {overflow: hidden;} .ia--animation-section-3 .blockquote-section.pink {position: relative; z-index: 2} .ia--animation-3-container {position: absolute; right: 50%; margin-right: -890px; top: 385px;} .ia--animation-3-container .circle-4 {width: 596px; height: 596px; border-radius: 596px; border:1px solid var(--primaryYellow); display: flex; align-items: center; justify-content: center;} .ia--animation-3-container .circle-4 .pullout {width:330px} .funnel-animation-container .pullout .big-bold, .ia--animation-3-container .circle-4 .pullout .big-bold {font-size: 102px; left: -1px} .ia--animation-3-container .circle-4 .pullout p {font-size: 35px; margin: 0} .funnel-animation-container .pullout span, .ia--animation-3-container .circle-4 .pullout span {font-size: 60px; color: var(--mediumGrey); margin: 0 -5px} .funnel-animation-container .pullout span {color: var(--darkPink)} .ia--animation-section-3 #lottie4 { position: absolute; left: 50%; margin-left: -866px; z-index: 1; bottom: 232px; width: 470px; height: auto;} .bg-numbers {position: relative; padding: 50px 0; overflow: hidden;} .bg-numbers-bg {content: ''; background-image:url(/_uploads/page-images/bg-numbers.jpg); height: 100%; background-size: 202px auto; position: absolute; left: 0; top: 0; width: 200%; z-index: 0} .bg-numbers .blockquote-section {z-index: 2} /** IMMERSIVE ANIMATION 4 **/ .ia--animation-section-4 {overflow: hidden; padding-bottom: 20px;} .ia--animation-section-4 .circle-1 {width: 537px; height: 537px; border-radius: 537px; border:1px solid var(--primaryYellow); position: absolute; right: -30px; top: 145px; display: flex; flex-direction: column; justify-content: center; align-items: center} .ia--animation-section-4 .circle-1 #lottie5 {width: 400px; height: 400px; transform: translateX(30px); margin-top: -215px; margin-bottom: 40px;} .funnel-animation-container {position: relative;} .funnel-animation-container .pullout {width: 330px; transform: translateY(-60px); position: relative; top: -65px;} .funnel-animation-container .pullout p {margin-bottom: 0} /** IMMERSIVE ANIMATION 5 **/ .ia--animation-section-5 {position: relative; overflow: hidden} .rocket-animation-container {width: 28vw; height: 1000px; position: absolute; left: 0; bottom: 150px; z-index: 0; overflow: hidden;} .rocket-animation-container .immersive-rocket {position: relative;} .rocket-animation-container .immersive-rocket-holder {position: absolute; right: 115px; bottom: 60px;} .immersive-rocket-container {position: absolute; right: 0; bottom: 0} .immersive-rocket-container:after {width: 100%; height: 600px; position: absolute; right: 0; top:calc(100% - 2px); content: ''; background-image: url(/_uploads/page-images/rocket-trails.svg); background-size: 100% auto; background-repeat: no-repeat;} .ia--animation-section-5 #lottie6 {margin: 70px auto} .ia--animation-section-5 .circle-1 {width: 30vw; height: 30vw; border-radius: 526px; border:1px solid var(--primaryYellow); position: absolute; top: 130px; right: -135px; background-color: #fff; z-index: 2} .ia--animation-section-5 .circle-2 {width: 20vw; height: 20vw; border-radius: 330px; border:1px solid var(--primaryYellow); position: absolute; top: 30vw; right: -100px; background-color: #fff; z-index: 1} .ia--animation-section-5 .article-inner {position: relative; z-index: 3} .ia--animation-section-5 .blockquote-section {position: relative; z-index:4; padding-bottom: 9px} /* PRE CTA */ .pre-cta {margin: 100px auto 0; width: 550px; max-width: 100%;} .pre-cta p, .pre-cta p a {text-align: center; font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 500; font-size: 35px; line-height: 1.1em; margin-bottom: 0} .pre-cta p:hover a {color:var(--mediumGrey) !important} /* DISCOVER MORE CONTAINER */ .discover-more-container {height: 160px; position: relative; margin-top: 90px; display: flex; align-items: flex-start; justify-content: center} .discover-more-container:after {background-image: url(/_uploads/page-images/bg-half-circle-tile-yellow.svg); position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; opacity: 0.3} .discover-btn {display: inline-flex; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.16); transform: translateY(-40px); text-transform: uppercase; padding: 30px 40px 20px; width: 700px; max-width: calc(100% - 60px); justify-content: center; background-color: #ffffff; border:1px solid #1a1a1a; font-size: 47px; font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 800; position: relative; z-index: 2; margin:0 auto} .discover-btn span {position: relative; z-index: 2; transition: 0.75s cubic-bezier(0.75, 0, 0, 1); display: block} .discover-btn:after {position: absolute; left: 0; top:100%; width: 100%; height: 100%; background-color: #1a1a1a; content: ''; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);} .discover-btn:hover:after {top:0} .discover-btn:hover span {transform: scale(1.1); color: #ffffff;} .discover-more-container.discover-more-container-aa {margin-top: 100px;} .mb-big {margin-bottom: 70px !important} .mt-big {margin-top: 70px !important} .mb-medium {margin-bottom: 50px !important} .mt-medium {margin-top: 50px !important} .mb-small {margin-bottom: 30px !important} .mt-small {margin-top: 30px !important} /* ANIMATED ARTICLE 2 */ .aa-section {min-height: 480px; position: relative; margin: 70px 0; display: flex; justify-content: center;} .aa-section .bg-pattern {flex: 1; background-image: url(/_uploads/page-images/bg-circle-pink-tile.svg); background-position:top right; opacity: 0.3} .aa-section .bg-pattern:last-child {background-position:top left} .aa-section .article-inner {flex-shrink: 0} .aa-blockquote-section {margin: 70px 0; padding: 70px 0 80px; position: relative;} .aa-blockquote-section:after {position: absolute; left: 0; top:0; width: 100%; height: 100%; background-image: url(/_uploads/page-images/bg-circle-pink-tile.svg); content: ''; opacity: 0.3} /*.blockquote-section .inner {left: auto}*/ .aa-blockquote-section .blockquote-container {margin-bottom: 0} .aa-blockquote-section .blockquote-section.flipped {width: 100%; position: relative; z-index: 5;} .aa-blockquote-section .blockquote-section.flipped .inner {transform: translateX(0)} .aa-blockquote-section.yellow.circle-blockquote:after {background-image: url(/_uploads/page-images/bg-circle-yellow-tile.svg);} .aa2-animation-1 #lottie1 {width: 550px; max-width: 100%; height: auto} .aa2-animation-1 .article-inner {display: flex; justify-content: flex-end; position: relative; z-index: 2} .aa2-animation-1 .circle {position: absolute;} .aa2-animation-1 .circle.pink {width: 200px; height: 200px; border-radius: 200px; background-color: var(--primaryPink); left: -70px; bottom: 40px;} .aa2-animation-1 .circle.yellow {width: 290px; height: 290px; border-radius: 290px; background-color: var(--primaryYellow); left: -10px; top: 10px;} .aa2-animation-1 .circle.green {width: 220px; height: 220px; border-radius: 220px; background-color: var(--primaryGreen); left: auto; right: -20px; bottom: 20px} .aa2-animation-2 #lottie2 {width: 312px; max-width: 100%;} .aa2-animation-2 .article-inner {display: flex; justify-content: center; position: relative; z-index: 2} .aa2-animation-2 .circle {position: absolute;} .aa2-animation-2 .circle.pink {width: 200px; height: 200px; border-radius: 200px; background-color: var(--primaryPink); left: 70px; top: 40px;} .aa2-animation-2 .circle.yellow {width: 290px; height: 290px; border-radius: 290px; background-color: var(--primaryYellow); right: 50px; bottom: 10px;} .aa2-animation-2 .circle.green {width: 120px; height: 120px; border-radius: 120px; background-color: var(--primaryGreen); left: 50px; bottom: 20px} .aa2-animation-3 {margin: 100px 0} .aa2-animation-3 .article-inner {display: flex; justify-content: flex-start; align-items: center; position: relative; z-index: 2} .aa2-animation-3 p {font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 500; font-size: 55px; width: 320px; line-height: 1em; text-align: right; margin-bottom: 0; position: relative; z-index: 2} .animation-3-table {position: absolute; right: -187px; top: -30px;} .animation-3-table img {width: 480px; max-width: 100%; position: relative; z-index: 2} .aa2-animation-3 .circle {position: absolute} .aa2-animation-3 .circle.yellow {width: 116px; height: 116px; border-radius: 116px; background-color: var(--primaryYellow); left: -190px; bottom: 113px;} .aa2-animation-3 .circle.green {width: 206px; height: 206px; border-radius: 206px; background-color: var(--primaryGreen); left: -150px; bottom: 10px;} .animation-3-table .circle.pink {width: 200px; height: 200px; border-radius: 200px; background-color: var(--primaryPink); left: -10px; top: 0px;} .animation-3-table .circle.yellow {width: 375px; height: 375px; border-radius: 375px; background-color: var(--primaryYellow); left: auto; right: -10px; bottom: 0px;} /** ANIMATED ARTICLE 1 **/ .aa1-animation-1 {overflow: hidden} .aa1-animation-1 h3 {color:var(--primaryGreen) !important} .aa1-animation-3 h3 {color: var(--primaryYellow) !important} .aa1-animation-1 .article-inner, .aa1-animation-3 .article-inner {display: flex; justify-content: flex-start; align-items: center; z-index: 2} .aa1-animation-1 #lottie1, .aa1-animation-3 #lottie2 {position: absolute; width: 360px; height: 360px; top: 50%; margin-top: -180px; left: 50%; margin-left: -560px;} .aa-section .stat {width: 415px; margin-left: 200px;} .aa-section .stat h3 {font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 800; font-size: 140px; color: var(--primaryGreen); line-height: 0.8em} .aa-section .stat p {font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 500; font-size: 40px; line-height: 1.1em; margin-bottom: 0} .aa-section .stat p span {font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 800; color: var(--primaryPink)} #content .aa-section.dark .stat p {color: #ffffff} .handshake-container {width: 400px; height: 240px; position: absolute; right: 50%; margin-right: -610px; top: 25px; display: flex; justify-content: center; align-items: center;} .handshake-container .circle {width: 240px; height: 240px; border-radius: 240px; background-color: var(--primaryYellow); position: absolute; left: 50%; margin-left: -120px; top: 0; z-index: 0} .handshake-container img {position: relative; z-index: 1} .aa1-animation-2 {min-height: 480px;} .aa1-animation-2 .article-inner {display: flex; justify-content: center; align-items: center; position: relative; z-index: 2} .aa1-animation-2 .article-inner .stat {width: 540px; max-width: 100%; margin: 0;} .aa1-animation-2 .article-inner .stat h3 {text-transform: uppercase; color: var(--primaryPink); font-size: 110px;} .aa1-animation-2 .circle {position: absolute} .aa1-animation-2 .circle.pink {width: 240px; height: 240px; border-radius: 240px; background-color: var(--primaryPink); left: -240px; top: 119px;} .aa1-animation-2 .circle.yellow {width: 155px; height: 155px; border-radius: 155px; background-color: var(--primaryYellow); left: -270px; bottom: 43px;} .aa1-animation-2 .circle.binary {width: 206px; height: auto; left: -150px; z-index: 5; top: 40px;} .aa1-animation-3.aa-section {overflow: hidden} .aa1-animation-3.aa-section .stat h3 {color: var(--primaryYellow)} .aa1-animation-3 .whiteboard-container {position: absolute; width: 388px; height: auto; right: 10px; bottom: 0} .aa1-animation-4 .article-inner {display: flex; justify-content: center; align-items: center; position: relative; z-index: 2} .aa1-animation-4 .journey-container {position: absolute; left: -450px; bottom: 0; width: 533px;} .aa1-animation-4 .journey-container img {z-index: 3; position: relative;} .aa1-animation-4 .circle {position: absolute;} .aa1-animation-4 .circle.green {width: 180px; height: 180px; border-radius: 180px; background-color: var(--primaryGreen); left: 40px; top: 0;} .aa1-animation-4 .circle.yellow {width: 300px; height: 300px; border-radius: 300px; background-color: var(--primaryYellow); left: 112px; top: -50px;} .aa1-animation-4 .pullquote {width: 464px; max-width: 100%; position: relative;} .aa1-animation-4 .pullquote p {font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 500; font-size: 50px; line-height: 1.1em; margin-bottom: 0} .aa1-animation-4 .pullquote p span { font-variation-settings: "wght" 700; color: var(--darkPink)} .aa1-animation-4 .pullquote:before {width: 78px; height: 55px; content: ''; background-image: url(/_uploads/page-images/icon-quote-pink.svg); position: absolute; left: -100px; top: 0; background-repeat: no-repeat;} /* ARTICLE */ .home-icon {position: fixed; left: 0px; top:107px; z-index: 20; background-color: #ffffff; justify-content: center; align-items: center; width: 55px; height: 55px; display: flex; box-shadow: 0 0 2px rgba(0,0,0,0.2)} .home-icon svg {width: 20px; height: auto; fill:#1A1A1A; flex-shrink: 0} .home-icon:hover {background-color: #1A1A1A} .home-icon:hover svg {fill:#ffffff} .home-icon:after {content: 'Back to hub'; font-size: 10px; position: absolute; color:#1A1A1A; left: 0px; width: 100px; opacity: 0; z-index: 0; visibility: hidden; transition: 0.3s ease-out} .home-icon:hover:after {opacity: 1; visibility: visible; left: 60px;} .article-hero .panel-container:hover .panel-arrow-circle, .article-hero .panel-container:hover .cloud-image {transform: none} .article-hero .panel-container h1 {font-size: 95px; font-variation-settings: 'wght' 700; text-transform: uppercase; line-height: 0.9em} .article-hero .panel-container h2 {font-size: 70px; line-height: 1em; display: block; margin: 0.2em 0; font-variation-settings: 'wght' 400; color: var(--mediumGrey) !important} .article-hero .panel-container h3 {font-variation-settings: 'wght' 400; font-size: 30px; margin-top: 0.75em; letter-spacing: 1px; color: #1a1a1a !important} .article-hero .panel-container .panel-arrow-circle svg {width: 50px;} .article-hero .panel-shape-container {padding-top: 40px;} .article-hero .panel-image-container {margin-right: 0} .article-hero .panel-container-text-outer {width: 45%} .article-hero .panel-container .cloud-image {width: 62%;} .aa-section.dark {background-color: #1a1a1a} .sticky-header {padding: 20px; display: flex; justify-content: center; background-color: #ffffff; box-shadow: 0 10px 10px rgba(0,0,0,0.1); position: fixed; top: 51px; width: 100%; opacity: 0; visibility: hidden; transition: 0.2s ease-out; transform: translateY(-50px); z-index: 20} .sticky-header.sticky {visibility: visible; opacity: 1; transform: translateY(0)} .sticky-header p {font-size: 18px; font-family: "marlide-display-variable",sans-serif !important; font-variation-settings: "wght" 500; text-transform: uppercase; text-align: center} .sticky-header p span {color: var(--mediumGrey)} .sticky-header p em {font-style: normal} /*************/ /** COLOURS **/ /* GREEN */ .green .aa-section .bg-pattern, .green .aa-blockquote-section:after, .panel-container.green:after, .green .article-hero .panel-container:after {background-image: url(/_uploads/page-images/bg-half-circle-tile.svg); opacity: 0.3} .green .article-hero svg, .panel-container.green svg {fill:var(--primaryGreen) !important} .green .discover-btn:hover span, .green .first-character, .green .article-hero .panel-container h1 {color:var(--primaryGreen)} .green .person-circle {background-color: var(--lightGreen);} /* PINK */ .panel-container.pink:after, .pink .article-hero .panel-container:after {background-image: url(/_uploads/page-images/bg-circle-pink-tile.svg); opacity: 0.3} .pink .article-hero svg, .panel-container.pink svg {fill:var(--primaryPink)} .pink .discover-btn:hover span, .pink .first-character, .pink .article-hero .panel-container {color:var(--primaryPink)} /* YELLOW */ .panel-container.yellow:after, .yellow .article-hero .panel-container:after {background-image: url(/_uploads/page-images/bg-half-circle-tile-yellow.svg); opacity: 0.3} .yellow .article-hero svg, .panel-container.yellow svg {fill:var(--primaryYellow) !important} .yellow .discover-btn:hover span, .yellow .first-character, .yellow .article-hero .panel-container {color:var(--primaryYellow)} /* STYLE VARIATIONS */ /*.panel-container.green .panel-shape-container {transform: translateX(-100px);}*/ .panel-container.pink .panel-image-container {width: calc(100% + -390px); transform: translateX(-80px)} .panel-container.pink .panel-shape-container {transform: translateX(-100px);} .yellow .article-hero .panel-container h1 {width: 100%;} .yellow .article-hero .panel-container h2 {width: 100%; display: block} .panel-container.yellow .panel-container-text-outer {width: 640px;} .panel-container.yellow .panel-container-text h3 {width: 480px} .panel-container.yellow .panel-image-container {position: absolute; right: -20px; bottom: 40px} .pink .article-hero .panel-image-container {position: absolute; right: 0; bottom: 0; width: 70%;} .pink .article-hero .panel-shape-container {} /**********/ /**********/ /* RELATED ARTICLES */ .related-articles h3 {font-size: 100px; font-variation-settings: 'wght' 800; text-align: center; margin: 70px 0 0; color: #1a1a1a} .related-articles .cols {width:1400px; max-width: 100%; margin: auto; display: flex; padding: 40px; padding-bottom: 0; justify-content: space-between} .related-articles .panel-container {width:calc(50% - 20px);} .related-articles .panel-container p {font-size: 18px;} .related-articles .panel-container h2 {font-size: 60px; width: 100% !important} .related-articles .panel-container h4 {font-size: 37px; width: 100% !important; text-transform: uppercase; color: var(--mediumGrey) !important} .related-articles .panel-container h2 br {display: none} .related-articles .panel-container svg {width: 50px; height: auto} .related-articles .panel-container-cols {flex-direction: column; min-height: unset; height: 100%} .related-articles .panel-container-text-outer {padding: 0} .related-articles .panel-container-text {padding: 50px; padding-bottom: 10px;} .related-articles .panel-container-text p {width: 100%;} .related-articles .images-container {position: relative; z-index: 2; display: flex; align-items: flex-end;} .related-articles .related-listing-image {position: absolute; bottom: 0; max-width: 80%; max-height: 100%; left: 50%; margin-left: -40%; transform-origin: bottom center; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);} .related-articles .panel-container.pink {} .related-articles .panel-container:after {opacity: 0.2 !important} .related-articles .panel-container:hover .related-listing-image {transform: scale(1.1)} /* FOOTER */ .workday-footer {padding: 70px 0;} .workday-footer-inner p {font-size: 29px; font-family: "marlide-display-variable",sans-serif !important; margin-bottom: 10px !important} .workday-footer-inner {display: flex; justify-content: center; flex-direction: column; align-items: center;} .workday-footer-inner ul {display: flex; align-items: center;} .workday-footer-inner ul li {margin: 0px; border-radius: 70px;} .workday-footer-inner ul li a svg {position: relative; z-index: 2; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);} .workday-footer-inner ul li a {width: 70px; height: 70px; border-radius: 70px; display: inline-flex; justify-content: center; align-items: center; position: relative;} .workday-footer-inner ul li a:after {transform: scale(0); width: 100%; height: 100%; border-radius: 100%; position: absolute; left: 0; top:0; background-color: var(--primaryPink); content: ''; transition: 0.75s cubic-bezier(0.75, 0, 0, 1);} .workday-footer-inner ul li:hover {fill: #ffffff} .workday-footer-inner ul li a:hover:after {transform: scale(1)} /* AUDIO */ .play-btn {background-image: url(/_uploads/page-images/icon-play.svg); background-size: cover;width: 18px; height: 22px; margin: 0; cursor: pointer} .play-btn.pause {background-image: url(/_uploads/page-images/icon-pause.svg);} progress {width: 90%;} progress[value] {-webkit-appearance: none; appearance: none; background-color: white; color: blue; height: 5px;} progress[value]::-webkit-progress-bar {background-color: #cccccc;border-radius: 2px;border: 1px solid #cccccc;color: blue;} progress::-webkit-progress-value {background-color: #000000;} .player-controls {align-items: center;justify-content: center;margin-top: 0;flex: 3;} .audio-player {text-align: center; display: flex; flex-flow: row; width: 100%; position: relative;} .start-time {position: absolute; left: 25px; top:20px;} /* BASIC ANIMATIONS */ .article-hero .panel-container-text-outer {opacity: 0; animation: 1s fadein ease-in-out forwards 0.75s;} .article-hero .panel-shape-container {opacity: 0; animation: 1s fadein ease-in-out forwards 1s; transform-origin: bottom} .article-hero .panel-image-container {opacity: 0; animation: 1s fadein ease-in-out forwards 1s;} @keyframes fadein { 0% {opacity: 0; transform: scale(0.9)} 100% {opacity: 1; transform: scale(1)} } #pmLink {visibility: hidden}