﻿
/*
.pc__disclaimer,
.o-cookie-message--active	{display: none !important}
*/

:root	{
	
--smooth: 0.5s cubic-bezier(0.5, 0, 0, 1);
    
    
}

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    	{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;}

/* 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;}

.o-header__drawer    {transform: translate3d(-100%, 0, 0); width: auto; position: fixed}

#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: "basic-sans", sans-serif; background-color: #ffffff !important; height: auto !important; color: #000000}
ul 		{margin:0;}

#tvn-content h1,
#tvn-content h2,
#tvn-content h3,
#tvn-content h4,
#tvn-content h5,
#tvn-content h6	    {font-family: "basic-sans", sans-serif; color: #000000; font-weight: 500}
#tvn-content p,
#tvn-content ul,
#tvn-content ol, 
#tvn-content a,
#tvn-content cite   {font-family: "basic-sans", sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #000000}

#tvn-content h1         {font-size: 50px; font-weight: 700}
#tvn-content h2         {font-size: 50px; font-weight: 700}
#tvn-content p          {font-size: 18px; line-height: 1.55em; margin-bottom: 1.2em}
#tvn-content p.intro    {font-size: 30px; font-weight: 700; line-height: 1.2em; margin-top: 1.2em}

#tvn-content p a        {text-decoration-color: #0F12FF; text-decoration-line: underline;}
#tvn-content p a:hover  {color: #0F12FF;}

#tvn-content .blue p a        {text-decoration-color: #ED8AB6; color: #ffffff; text-decoration-line: underline;}
#tvn-content .blue p a:hover  {color: #ED8AB6;}

   

/******************************************************************************************************************************/

.home-icon  {display: none !important}

.inner 	    {width:1360px; max-width: 100%; padding-left: 30px; padding-right: 30px; margin: auto;}

/* HERO IMAGE */
.article-header                         {overflow: hidden; position: relative; font-size: 0; height: 40vw; background-color: #EDEDF4; animation: 3s imageIn 0.2s ease forwards; opacity: 0; transform: scale(1.1)}
.article-header .article-header-people  {position: absolute; left: 50%; bottom: 0; margin-left: -22.5vw; width: 45vw;}
.article-header-image                   {position: absolute; inset:0; background-position:center; background-repeat: no-repeat; background-size: cover;}

.article-2025.video-2025 .article-header    {height: 35vw}


@keyframes imageIn {
	
	to	{opacity: 1; transform: scale(1)}
	
}

/* BOX */
.box-master-container           {width: 930px; margin: 0; padding: 10px; transform-origin: top left; position: relative; z-index: 5}
.box-outer-container            {width: 0%; height: 0%; border:1px solid #007FFF; position: absolute; background-color: #ffffff;}

.box-outer-container:before,
.box-outer-container:after,
.box-outer:before,
.box-outer:after                {width: 18px; height: 18px; border-radius: 18px; border: 1px solid #007FFF; background-color: #ffffff; content: ''; display: block; box-shadow: 2px 2px 0 rgba(0,0,0,0.16); position: absolute;}

/* TOP LEFT DOT */
.box-outer-container:before {left: -9px; top: -9px;}

/* TOP RIGHT DOT */
.box-outer-container:after  {right: -9px; top: -9px;}

/* BOTTOM LEFT DOT */
.box-outer:before           {left: -9px; bottom: -9px;}

/* BOTTOM RIGHT DOT */
.box-outer:after            {right: -9px; bottom: -9px;}

/* HERO BOX */
.box-master-container-hero       {text-align: center; margin-top: -85px;margin-left: auto; margin-right: auto; transform-origin: top left}
.box-master-container-hero h1    {width: 100%; position: relative; z-index: 10; padding: 20px 0; opacity: 0} 


.article-inner  {width: 768px; width: 808px; max-width: 100%; padding: 0 20px; margin: 0 auto;}

/* LOTTIE CONTAINER */
.lottie-container-glasses,
.lottie-container                       {width: 930px; max-width: calc(100% - 40px); margin: 60px auto; font-size: 0}
.lottie-container-glasses.full-width    {width: 100%; max-width: 100%; display: flex; justify-content: center; padding: 50px 0; background-color: #8030F0; margin-bottom: 0}

.lottie-container.has-source    {margin-bottom: 10px;}

.source     {width: 930px; max-width: calc(100% - 40px); margin: 0 auto 60px; padding-left: 10px;}
.source p   {font-size: 13px !important}

.lottie  {width: 888px; max-width: 100%; margin:10px auto; opacity: 0}

.heading            {position: relative; left: 50%; margin-left: -383px; padding: 5px 0; margin-bottom: 40px;}
.heading h2         {position: relative; z-index: 2}
.heading:after      {position: absolute; left: -70px; top: 0; width: 100%; height: 100%; background-color: #EDEDF4; content: ''; border-radius: 10px 0 0 10px; transform: skewX(10deg)}

.heading.heading-orange:after            {background-color: #EE8E2C;}
#tvn-content .heading.heading-orange h2  {color: #ffffff;}

.blockquote-container         {width: 640px; max-width:calc(100% - 100px); margin: 80px auto 70px; position: relative;}
#tvn-content blockquote p     {font-size: 36px; line-height: 1.2em; margin-bottom: 0.5em}
#tvn-content blockquote cite  {font-style: normal; font-size: 18px;}

.blockquote-container:before    {width: 76px; height: 45px; background-image: url(/_uploads/_assets/quote-orange.svg); background-size: cover; content: '';position: absolute; left: -105px; top: -20px;}

.blockquote-container.green:before {background-image: url(/_uploads/_assets/quote-green.svg);}
.blockquote-container.pink:before {background-image: url(/_uploads/_assets/quote-pink.svg);}

.underlines              {position: relative;}
.underlines span         {position: absolute; left: auto; left: 10px; top: calc(100% - 10px); width: 0; overflow: hidden; z-index: -1;}
.underlines span:before  {width: 137px; height: 37px; background-image: url(/_uploads/_assets/drawn-line-1-orange.svg); background-repeat: no-repeat; content: ''; display: block}
.underlines span:after   {width: 152px; height: 37px; background-image: url(/_uploads/_assets/drawn-line-2-orange.svg); background-repeat: no-repeat; content: ''; display: block; transform: translate(20px, -30px)}

.blockquote-container.green .underlines span:before {background-image: url(/_uploads/_assets/drawn-line-1-green.svg);}
.blockquote-container.green .underlines span:after {background-image: url(/_uploads/_assets/drawn-line-2-green.svg);}

.blockquote-container.pink .underlines span:before {background-image: url(/_uploads/_assets/drawn-line-1-pink.svg);}
.blockquote-container.pink .underlines span:after {background-image: url(/_uploads/_assets/drawn-line-2-pink.svg);}


/* LIGHT BLUE SECTION */
.light-blue          {background-color: #EDEDF4; padding-bottom: 100px;}
.heading-container   {background-color: #8030F0;}

/* WHITE SECTION */
.white  {padding: 50px 0 100px}

.white.white-pb {padding-bottom: 70px;}

/* LOTTIE SPECIFIC */
#lottie3    {width: 650px; max-width: 100%;}

/* BLUE SECTION */
.blue                       {padding-bottom: 100px; background-color: #0F12FF;}
.blue .heading-container    {background-color: #ffffff}
.heading.heading-blue:after {background-color: #0F12FF;}
#tvn-content .heading.heading-blue h2    {color: #ffffff}
#tvn-content .blue  p       {color: #ffffff}

/* CTA CONTAINER */
.cta-container-section  {display: flex; justify-content: center; background-color: #8030F0; padding-bottom: 50px; margin-top: 40px;}
.cta-container a        {display: block; width: 976px; height: 109px; position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; transform: translateY(-50%); position: relative; transition: var(--smooth)}
.cta-container a svg    {position: absolute; left: 0; top: 0; object-fit: contain; fill: #89f2ab; transition: var(--smooth);}
.cta-container a span   {font-size: 50px; color: #000000; font-weight: 700; display: block; position: relative; z-index: 5; transition: var(--smooth);}
.cta-container a:hover span {color: #ffffff}
.cta-container a:hover svg  {fill:#2B1E3D}

.cta-container a:hover  {transform: translateY(-40%);}

.cta-container:has(a:hover):after  {height: 90%;}

.cta-container        {position: relative; transition: var(--smooth);}
.cta-container:after  {position: absolute; top: 0; left: 12px; width:calc(100% - 5px); height: 100%; background-color: rgba(0,0,0,0.3); content: ''; display: block; z-index: 0; transform: skewX(10deg); border-radius: 10px; transition: var(--smooth);}


/* VIDEO PAGE */

.video-container-outer-outer        {position: relative;}
.video-container-outer-outer:after  {width: 100%; height: 50%; position: absolute; left: 0; bottom: 0; background-color: #8030F0; content: '';}
.video-container-outer              {width: 1070px; max-width: 100%; margin:40px auto 0 auto; position: relative; z-index: 2}

.video-text     {background-color: #8030F0; padding: 60px 0 80px}
.video-text p   {color: #ffffff !important; font-weight: 700; font-size: 20px !important}

.video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; /*margin-bottom: 30px;*/}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



#pmLink     {visibility: hidden}

