:root {
 
    --smooth: 0.75s cubic-bezier(0.5, 0, 0, 1);
    
}
    

/* COMMENT BACK IN BEFORE LIVE 
.pc__disclaimer,
.o-cookie-message--active	{display: none !important}
*/

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:#383838 !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      {font-family: MetricWeb, sans-serif;}
.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: #383838;}

[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 	{background-color: #ffffff !important; height: auto !important; color: #383838; font-family: mencken-std, sans-serif;}
ul 		{margin:0;}

#tvn-content h1,
#tvn-content h2,
#tvn-content h3,
#tvn-content h4,
#tvn-content h5,
#tvn-content h6	    {font-family: 'Romie', sans-serif; font-weight: 400}
#tvn-content p,
#tvn-content ul,
#tvn-content ol, 
#tvn-content cite   {text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

#tvn-content .article-hero-container h1	{font-size: 56px; color: #ffffff; line-height: 1.2em; margin-bottom: 0.35em; font-variation-settings: "wdth" 100;}

/* ARTICLE */
.home-icon				{position: fixed; left: 0px; top:107px; z-index: 20; background-color: #ffffff; justify-content: center; align-items: center; width: 45px; height: 45px; 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: 50px;}

.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; text-align: center}


/******************************************************************************************************************************/

.inner 	{width:1330px; max-width: 100%; padding-left: 15px; padding-right: 15px; margin:0 auto;}

/* HOME PAGE */
.home-page      {background: rgb(255,251,244); background: linear-gradient(180deg, rgba(255,251,244,1) 0%, rgba(255,254,250,1) 50%, rgba(242,255,252,1) 100%);}
.hub-hero       {text-align: center; padding: 80px 30px}
.hub-hero h1    {font-size: 80px; margin-bottom: 0.35em}
.hub-hero p     {font-size: 30px; font-style: italic; line-height: 1.3em}

.listing        {width: 1500px; max-width: calc(100% - 40px); margin: auto}

.listing .panel-container:nth-child(even) .panel-container-cols   {justify-content: flex-end}
.listing .panel-container:nth-child(even) .panel-container-cols .panel-container-text   {margin-left: 0; margin-right: 20px;}

.panel-container-padding    {padding: 60px;}

.panel-container                {box-shadow: 0 0 30px rgba(0,0,0,0.1); display: block; margin-bottom: 60px;}
.panel-container.risk-opportunity .panel-container-padding  {background-color: #F2FFFC}
.panel-container.living-longer    .panel-container-padding  {background-color: #FFFBF4}

.panel-container-cols   {height: 600px; position: relative; display: flex; justify-content: flex-start; align-items: flex-end; overflow: hidden;}
.panel-image-container  {position: absolute; inset:0; left: 0; top: 0; transition: var(--smooth);}

.panel-image-4  {position: absolute; inset: 0; background-size: cover; background-position: center;}

.panel-container-text       {width: 550px; padding:40px 30px 30px; background-color: #ffffff; position: relative; z-index: 5; margin-left: 20px; text-align: center;}
.panel-container-text h2    {font-size: 41px; margin-bottom: 0.5em}
.panel-container-text p     {font-size: 16px; line-height: 1.6em}
.panel-container-text .btn  {font-size: 22px !important; margin-top: 30px;}

.panel-container.risk-entrepeneur .panel-container-text,
.panel-container.risk-entrepeneur .panel-container-padding  {background-color: #FFFEFA}
.panel-container.risk-entrepeneur .panel-image-2    {position: absolute; height: calc(100% - 40px); right: 50px; bottom: 0; z-index: 3}
.panel-container.risk-entrepeneur .panel-image-3    {position: absolute; height: calc(100% - 40px); right: 50%; margin-right: -400px; bottom: 0; z-index: 2}

.panel-container.risk-opportunity .panel-container-text,
.panel-container.risk-opportunity .panel-container-padding  {background-color: #F2FFFC}
.panel-container.risk-opportunity .panel-image-2    {position: absolute; height: calc(100% - 40px); left: 10px; bottom: 0; z-index: 3}
.panel-container.risk-opportunity .panel-image-3    {position: absolute; width: 100%; height: auto; left: 0; bottom: 0; z-index: 2}

.panel-container.living-longer .panel-container-text,
.panel-container.living-longer .panel-container-padding     {background-color: #FFFBF4}
.panel-container.living-longer .panel-image-2               {position: absolute; height: calc(100% - 40px); right: 50px; bottom: 0; z-index: 3}
.panel-container.living-longer .panel-image-3               {position: absolute; top: 50px; right: 50%; margin-right: -45%; width: 60%; height: auto; z-index: 2}

.panel-container:hover .panel-image-container   {transform: scale(1.1);}
.panel-container:hover .btn                     {background-color: #383838; color: #ffffff;}

/* ARTICLE HEADER */
.article-hero-container                 {height: 50vw; max-height: 661px; position: relative;}
.article-hero-images-container-outer    {position: relative; width: 100%; height: 100%; overflow: hidden}
.article-hero-images-container          {position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: flex-end;}

.article-hero-text                  {position: absolute; z-index: 5; width: 660px; left: 70px; bottom: -130px; text-align: center; padding: 40px;}
#tvn-content .article-hero-text h1  {font-size: 52px; color: #383838; line-height: 1.1em}
#tvn-content .article-hero-text p   {font-size: 20px; color: #383838; line-height: 1.6em; padding: 0 30px;}

.article-hero-images-container	{animation: 3s imageIn 0.5s ease forwards; opacity: 0; transform: scale(1.1)}
.article-hero-text			    {animation: 2.5s textIn 1.5s ease forwards; opacity: 0;}

@keyframes imageIn {
	
	to	{opacity: 1; transform: scale(1)}
	
}

@keyframes textIn {
	
	to	{transform: translateY(0); opacity: 1}
	
}

/* ARTICLE  */
article             {padding-top: 180px; padding-bottom: 0px; overflow: hidden}
.first-character    {float: left; margin: 0; display: inline-block; font-size: 100px; line-height: 140px; margin-top: -22px; margin-bottom: -30px; margin-right: 15px; font-family: desire-pro, serif;}
.article-inner      {width: 780px; padding: 0 40px; max-width: 100%; margin: auto; position: relative; z-index: 5}
.article-inner p    {font-size: 19px; line-height: 1.7em; margin-bottom: 1em}
.article-inner p.disclaimer {font-size: 17px; font-style: italic; margin: 3em 0}
.no-overflow        {overflow: hidden;}

.relative       {position: relative;}
.graphic-right  {}

.article-cols                       {display: flex; width: 100%; max-width: 1660px; margin: auto}
.graphic-container                  {flex: 1; position: relative;}
.graphic-container.flexed           {display: flex;}
.graphic-container.bottom.centre    {justify-content: center; align-items: flex-end}

.lottie-container           {width: 1340px; max-width: calc(100% - 40px); margin: 70px auto;}
.lottie-container h2        {display: block; text-align: center; font-size: 50px; margin-bottom: 0.5em}
.lottie-container h3        {display: block; text-align: center; font-size: 28px; margin-bottom: 0.5em}
.lottie-container p.source  {font-size: 12px; margin-top: 20px;}
.graph-pattern              {background-image: url(/_uploads/_assets/bg-graph-pink.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat;}

.blockquote-container                   {background-color: #666666; text-align: center; margin: 70px 0; display: flex; flex-direction: column; position: relative;}
.blockquote-container blockquote        {width: 1144px; max-width: calc(100% - 40px); margin: auto; padding: 60px 0; position: relative; z-index: 2}
.blockquote-container blockquote p      {font-size: 50px; line-height: 1.2em; font-family: 'Romie', sans-serif; font-weight: 400; margin-bottom: 0.75em;}
.blockquote-container blockquote cite   {line-height: 1.3em}
.blockquote-container:before            {display: block; width: 100%; height: 24px; transform: translateY(-12px); background-image: url(/_uploads/_assets/jagged-top-blue.png); content: ''; background-repeat: no-repeat; background-position: center; background-size: 100% auto;}
.blockquote-container:after             {display: block; width: 100%; height: 24px; transform: translateY(12px); background-image: url(/_uploads/_assets/jagged-top-blue.png); content: ''; background-repeat: no-repeat; background-position: center; background-size: 100% auto;}

.split-dots {position: absolute; right: 0; top:-300px; width: 245px; z-index: 1}

.pattern    {position: absolute; left: 0; top: 0; z-index:1;}

.button-container       {margin: 60px 0; display: flex; justify-content: center; flex-direction: column; text-align: center; align-items: center}
.button-container h5    {font-size: 30px; margin-bottom: 35px; padding: 0 20px;}
.button-container .btn  {transition: var(--smooth); width: 507px; height: 150px; /*background-image: url(/_uploads/_assets/btn-shape.png);*/ background-size: 100%; display: flex; justify-content: center; align-items: center; position: relative}
.button-container #lottieButton {position: absolute; left: 0; top: 0; height: 100%; width: 100%;}
.button-container span  {font-size: 45px; font-family: 'Romie', sans-serif; padding: 5px 0; transition: var(--smooth);}
.button-container div   {overflow: hidden; display: flex; flex-direction: column; height: 57px; transform: translateY(5px)}
.button-container .btn:hover        {transform: scale(0.95);}
.button-container .btn:hover span   {transform: translateY(-100%);}

.article-inner.article-inner-disclaimer     {padding-bottom: 40px;}
.article-inner.article-inner-disclaimer p   {font-size: 16px;}

/* AUDIO */
.audio-container    {position: relative; z-index: 10; display: flex; margin:90px auto 50px auto; width: 900px; max-width: 100%;}
.play-btn 		    {background-color: #FFFEFA; width: 85px; height: 85px; border-radius: 85px; border: 1px solid #3B3B3B; background-image: url(/_uploads/page-images/icon-play.svg); background-position: 27px 23px; background-size: 36px 36px; background-repeat: no-repeat; margin: 0; cursor: pointer}
.play-btn.pause     {background-image: url(/_uploads/page-images/icon-pause.svg); background-position: center;}
.player-controls	{align-items: center;justify-content: center;margin-top: 0; flex: 3;}
.audio-player 		{text-align: center; display: flex; flex-flow: row; align-items: center; gap:10px; width: 100%; position: relative;}
.start-time			{font-size: 12px; display: block; text-align: right; position: absolute; right: 0; top: 15px;}
.audio-player-right {display: flex; flex-direction: column; justify-content: center; flex: 1; background-image: url(/_uploads/_assets/bg-graph-blue.jpg); background-size: 100% 100%; margin-left: -50px; width: calc(100% + 50px);}
p.audio-attribute   {font-size: 13px !important; text-align: right; margin-top: -15px;}
.audio-thumb        {width: 200px; flex-shrink: 0; margin-top: -45px;}

progress 		                         {width: 100%;}
progress[value]                         {-webkit-appearance: none; appearance: none; background-color: white; color: blue; height: 12px;}
progress[value]::-webkit-progress-bar   {background-color: #ffffff;border-radius: 6px; border: 1px solid #3B3B3B; color: blue; overflow: hidden}
progress::-webkit-progress-value        {background-color: #000000;}

/* RELATED ARTICLES */
.related-articles       {background-color: #ffffff; padding: 80px 0; position: relative}
.related-articles h3    {display: block; text-align: center; font-size: 50px;}

.related-articles .inner        {width: 1260px;}
.related-carousel               {display: flex; margin-top: 40px;}
.related-carousel .column       {padding: 0 25px; flex: 50% 1 0; text-align: center;}
.listing-card-image-container   {position: relative; padding-top: 40%; overflow: hidden;}
.listing-card-image             {position: absolute; inset:0; background-size: cover; background-position: center; transition: var(--smooth);}
#tvn-content .listing-card      {height: 100%; display: flex; flex-direction: column;}
#tvn-content .listing-card h2   {font-size: 32px; margin-bottom: 0.5em}
#tvn-content .listing-card p    {font-size: 16px; line-height: 1.5em; max-width: 500px; width: 100%; margin-left: auto; margin-right: auto;}
.listing-card-bottom            {padding-top: 15px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; align-items: center; gap: 20px;}

.panel-container-text .btn,
.listing-card-bottom .btn       {display: inline-block; padding:15px 25px; border:1px solid #3B3B3B; border-radius: 50px; font-family: 'Romie', sans-serif !important; font-size: 18px; transition: var(--smooth);}

.listing-card:hover .listing-card-image     {transform: scale(1.1);}
.listing-card:hover .btn                    {background-color: #3b3b3b; color: #ffffff}

.slick-dots                 {display: flex; justify-content: center; gap: 10px; position: absolute; bottom: -70px; width: 100%;}
.slick-dots li              {width: 25px; height: 25px; border-radius: 25px; background-color: transparent; border:1px solid #3b3b3b; font-size: 0;}
.slick-dots li.slick-active {background-color: #3b3b3b}

/* FOOTNOTES */
.footnotes                      {display: none; padding: 30px 0}
.footnotes-toggle               {background-color: #3B3B3B; color: #ffffff; font-size: 18px; text-align: center; padding: 15px; cursor: pointer;}
.footnotes .article-inner p,
.footnotes .article-inner ol    {font-size: 14px;}
.footnotes .article-inner ol    {font-size: 12px; list-style: auto; margin-left: 10px}
.footnotes .article-inner ol li {margin: 7px 0; line-height: 1.4em;}

/* FOOTER */
.manulife-footer                    {padding:60px 20px; text-align: center}
.manulife-footer h4                 {font-size: 55px; margin-bottom: 0.25em}
.manulife-footer p                  {font-size: 20px; line-height: 1.3em}
.manulife-footer ul                 {display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 30px;}
.manulife-footer ul li svg path     {fill: #383838 !important; transition: var(--smooth)}
.manulife-footer ul li a            {width: 50px; height: 50px; border-radius: 50px; border:1px solid #383838; display: inline-flex; justify-content: center; align-items: center; transition: var(--smooth)}
.manulife-footer ul li a:hover      {background-color: #383838;}
.manulife-footer ul li a:hover svg path {fill:#ffffff !important}

.skyline        {position: relative;}
.skyline img    {position: relative; z-index: 2}
.skyline .sky   {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1}

/*******************/
/* RISK OPPORUNITY */

body.risk-opportunity                                           {background-color: #F2FFFC !important}   
.risk-opportunity .article-hero-text                            {background-color: #F2FFFC}
body.risk-opportunity .blockquote-container                     {background-color: #EFFCFF}
body.risk-opportunity .blockquote-container.secondary           {background-color: #FDEFEF}
body.risk-opportunity .blockquote-container.secondary:after,
body.risk-opportunity .blockquote-container.secondary:before    {background-image: url(/_uploads/_assets/jagged-top-pink.png)}

.ro-header-graph    {position: absolute; top:0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.ro-header-lines    {position: absolute; top:0; bottom: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1}
.ro-header-skyline  {position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 2}
.ro-header-lady     {position: absolute; right: 30px; bottom: 0; height: 45vw; max-height: 590px; z-index: 5}
.ro-header-man      {position: absolute; right: 20vw; bottom: 0; height: 45vw; z-index: 5; max-height: 590px;}

.ro-graphic-coins                   {}
.ro-graphic-coins .coin-stack       {width: 232px; max-width: 100%; position: relative; z-index: 2}
.ro-graphic-coins .coin-pattern     {width: 375px; max-width: unset; position: absolute; top: 0; left: 0}

.ro-graphic-crossroads              {overflow: hidden;}
.ro-graphic-crossroads .crossroads  {width: 385px; max-width: unset; position: relative; z-index: 2}
.ro-graphic-crossroads .pattern     {width: 590px; max-width: unset; height: auto; left: -250px;}

.ro-graphic-laptop-lady                 {overflow: hidden; height: 550px; align-self: flex-end}
.ro-graphic-laptop-lady .laptop-lady    {width: 100%; max-width: 100%; position: relative; z-index: 2}
.ro-graphic-laptop-lady .pattern        {width: 423px; max-width: unset; height: auto; left: auto; right: 0}

.ro-lottie-container-2      {width: 1400px; position: relative;  margin: 100px auto}
.ro-lottie-container-2 p    {font-size: 22px; width: 285px; max-width: 100%; line-height: 1.4em; margin-bottom: 0 !important; position: relative; z-index: 2}
.cs-graphic-cols            {display: flex; align-items: center; justify-content: center}
.cs-graphic-column          {display: flex; flex: 33.333% 0 0; position: relative;}
.cs-graphic-column-1        {flex-direction: column; align-items: flex-end; text-align: right; padding-right: 0px;}
.cs-graphic-column-2        {justify-content: center;}
.finger-print               {width: 118px; margin-bottom: 10px;}
.pattern-padlocks           {width: 204px; left: 0; top: auto; bottom: 0; z-index: 0;}
.laptop-image               {transform: translate(-70px, 40px); position: relative; z-index: 2}
.pattern-fingerprints       {width: 432px; left: auto; right: 0; top: auto; bottom: 0; z-index: 0;}

#rolottie2  {width: 430px; flex-shrink: 0; position: relative; z-index: 5}


/********************/
/* RISK ENTREPENEUR */

body.risk-entrepeneur                               {background-color: #FFFEFA !important}
.risk-entrepeneur .article-hero-text                {background-color: #FFFEFA}
.risk-entrepeneur .blockquote-container             {background-color: #EFFCFF}
.risk-entrepeneur .blockquote-container.secondary   {background-color: #FDF9EF}
body.risk-entrepeneur .blockquote-container.secondary:after,
body.risk-entrepeneur .blockquote-container.secondary:before    {background-image: url(/_uploads/_assets/jagged-top-peach.png)}

.re-header-man          {position: absolute; right: 5vw; bottom: 0; height: 45vw; z-index: 5; max-height: 590px;}
.re-header-road         {position: absolute; top:0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.re-header-birds        {position: absolute; top:0; bottom: 0; left: 50%; margin-left: -30vw; width: auto; height: 100%; object-fit: cover; z-index: 4}

.re-map {position: absolute; right: 50%; margin-right: -1080px; width: 700px; bottom: 0;}

.re-lottie-container-1                  {width: 1093px;}
.re-lottie-container-1 h2               {margin-bottom: 0.25em}
.re-lottie-container-1 .graph-pattern   {margin-top: 40px; background-image: url(/_uploads/_assets/bg-graph-peach.png);}

.re-card-suits  {width: 338px; max-width: unset; bottom: 150px; top: auto; z-index: 1}
.tightrope-left,
.tightrope-right    {position: relative; z-index: 2}

.blockquote-container-money .split-dots {left: 0; width: 200px;}


/******************/
/* LIVING LONGER */

body.living-longer                      {background-color: #FFFBF4 !important}
.living-longer .article-hero-text       {background-color: #FFFBF4}
.living-longer .blockquote-container    {background-color: #DFF7FA}

.living-longer .blockquote-container.secondary               {background-color: #FFF3D5}
body.living-longer .blockquote-container.secondary:after,
body.living-longer .blockquote-container.secondary:before    {background-image: url(/_uploads/_assets/jagged-top-orange.png)}

body.living-longer .blockquote-container:after,
body.living-longer .blockquote-container:before    {background-image: url(/_uploads/_assets/jagged-top-blue-2.png)}


.ll-header-family   {position: absolute; right: 5vw; bottom: 0; height: 45vw; z-index: 5; max-height: 590px;}
.ll-header-bg       {position: absolute; top:0; bottom: 0; width: 100%; height: 100%; object-fit: cover;}
.ll-header-leaves   {position: absolute; top:0; bottom: 0; right: 2vw; width: auto; height: 80%; object-fit: cover; z-index: 4}

.ll-lottie-container-1                  {margin: 30px auto 60px}
.ll-lottie-container-1 .graph-pattern   {background-image: url(/_uploads/_assets/bg-graph-peach.png)}

.living-longer .blockquote-container .split-dots    {top: -325px;}
.living-longer .blockquote-container.secondary .split-dots  {left: 0; width: 165px; top: -272px;}

.ll-lottie-container-2  {width: 1020px;}
.ll-lottie-container-2 .graph-pattern   {background-image: url(/_uploads/_assets/bg-graph-pink.png)}

.graphic-container.ll-tree-graphic-container    {justify-content: flex-end !important; overflow: visible}
.graphic-container.ll-tree-graphic-container .pattern {z-index: 1;max-width: unset;right: 0;left: auto;width: 320px;}

.ll-tree    {width: 600px; max-width: unset; position: absolute; right: 0; bottom: 0; z-index: 2}


#pmLink     {visibility: hidden}