:root {
	
	--bodyCopy: #222222;
}

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 	{background-color: #FEF8E8 !important; height: auto !important; color: #333333; font-family: "degular", sans-serif;}
ul 		{margin:0;}

#tvn-content h1,
#tvn-content h2,
#tvn-content h3,
#tvn-content h4,
#tvn-content h5,
#tvn-content h6	{text-transform: uppercase; font-weight: 500; font-family: "degular", sans-serif;}
#tvn-content p,
#tvn-content ul,
#tvn-content ol, 
#tvn-content cite {font-family: "degular", sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--bodyCopy)}

.inner  {width: 1312px; max-width: 100%; padding: 0 16px; margin: auto}

.main-content   {padding: 0 64px}

.hub-intro                      {text-align: center; margin: 15px 0 25px;}
#tvn-content .hub-intro h1      {font-size: 120px; line-height: 0.8em}

.listing-inner  {padding-bottom: 10px;}

.cols                 {display: flex;}

.coll   {}

.cols.span-1                        {width: calc(100% + 24px); margin-top: 12px; margin-bottom: 12px; margin-left: -12px;}
.cols.span-1 .coll                  {padding: 0 12px; width: 100%;}
.cols.span-1 .panel-container h2,
.cols.span-1 .panel-container p     {width: 850px; max-width: 100%;} 
.cols.span-1 .panel-image-container {padding-top: 52%;}

.cols.span-2                    {width: calc(100% + 24px); margin-top: 12px; margin-bottom: 12px; margin-left: -12px;}
.cols.span-2 .coll              {padding: 0 12px; flex: 0 0 50%}
.cols.span-2 .coll:last-child   {border-left: 2px solid var(--bodyCopy)}

.cols.span-3                    {width: calc(100% + 24px); margin-top: 12px; margin-bottom: 12px; margin-left: -12px;}
.cols.span-3 .coll              {padding: 0 12px; flex: 0 0 33.333%}
.cols.span-3 .coll:nth-child(2) {border-left: 2px solid var(--bodyCopy); border-right: 2px solid var(--bodyCopy)}
.cols.span-3 h2,
.cols.span-3 p  {width: 100%;}
.cols.span-3 .panel-image-container {padding-top: 70%;}


.panel-container             {height: 100%; display: flex; flex-direction: column}
.panel-container h2          {font-size: 34px; line-height: 0.9em; width: 470px; max-width: 100%;}
.panel-container-top         {display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 0; margin-bottom: 16px;}
.panel-container-top-text    {display: flex; justify-content: space-between; align-items: flex-end; margin-top: -10px; gap: 30px;}
.panel-container-top-text h3 {font-size: 109px; font-weight: 400 !important; line-height: 0.8em;}
.panel-container-top-text p  {font-size: 19px; font-weight: 500; margin: 0; line-height: 1.2em}

.panel-container.multiline .panel-container-top-text {margin-top: 15px;}

.number {flex-shrink: 0}

.panel-image-container      {position: relative; overflow: hidden; padding-top: 57%;}
.panel-image                {position: absolute; inset:0; background-size: cover; background-position: center; transition: 0.3s ease-in-out}

.panel-container:hover .panel-image {transform: scale(1.1);}

.border-top {border-top:2px solid var(--bodyCopy);}

/* ARTICLE */

.home-icon			       {position: fixed; left: 0; top: 108px; background-color: #FEF8E8; border:2px solid #222222; border-left: none; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; z-index: 30; transition: 0.75s cubic-bezier(0.5, 0, 0, 1);}
.home-icon svg path        {transition: 0.75s cubic-bezier(0.5, 0, 0, 1); fill:#222222}
.home-icon:hover	       {background-color: #222222;}
.home-icon:hover svg path  {fill:#ffffff !important}

article {padding-bottom: 50px}

.article-hero-container         {height: calc(100vh - 102px); max-height: 850px; display: flex; flex-direction: column}
.article-hero-image-container   {flex: 1; position: relative; overflow: hidden; border-bottom: 3px solid var(--bodyCopy)}
.article-hero-image             {position: absolute; inset:0; background-size: cover; background-position: center;}

.article-heading       {width: 1220px; max-width: 100%; margin: 0 auto; padding: 20px 20px 0}
.article-heading h1    {font-size: 62px; margin-bottom: 0.45em; display: block; text-align: center}


.standfirst     {width: 1220px; max-width: 100%; margin: auto; text-align: center; padding:0px 20px 30px 20px;}
.standfirst p   {font-size: 24px; font-weight: 500; width: 700px; max-width: 100%; margin-left: auto; margin-right: auto; line-height: 1.2em; margin-bottom: 0;}

.blockquote-container hr,
hr.divide       {display: block; border:none; border-bottom: 2px solid var(--bodyCopy); width: 1080px; max-width: calc(100% - 40px); margin: 1em auto 2em;}

hr.divide.divide-top    {margin: 20px auto 50px;}

.article-inner      {width: 620px; max-width: calc(100% - 40px); margin: auto;}
.article-inner p    {font-size: 18px; line-height: 1.5em; margin-bottom: 1em}
.article-inner h2   {font-size: 27px; font-weight: 400 !important; text-transform: uppercase; margin-top: 1.5em; margin-bottom: 1em;}

.article-inner p a          {text-decoration: underline}
.article-inner p a:hover  {text-decoration: none}

.article-image              {width: 100%; max-width: calc(100% - 40px); height: 60vw; max-height: 90vh; margin: 3em auto; padding-bottom: 50px; /*border-bottom: 2px solid var(--bodyCopy);*/ overflow: hidden; position: relative;}
.article-image img          {margin-bottom: 0.75em;}
.article-image .image       {position: absolute; inset:0; background-attachment: fixed; background-position: center; background-size: cover}
.article-image p.caption    {font-size: 16px;}

.article-inner.video-inner  {width: calc(100% - 84px)}

.video-container            {position: relative; aspect-ratio: 16 / 9; /*width: 100%; max-width: 100%; */max-height: 85vh; overflow: hidden; max-width: 100%; margin:auto;}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video	     {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.blockquote-container       {width: 970px; max-width: calc(100% - 40px); margin: 4em auto; text-align: center;}
.blockquote-container p     {font-size: 48px;}
.blockquote-container hr    {width: 48px; margin-top: 2.2em; margin-bottom: 1em; border-width: 3px}

/* RELATED ARTICLES */
.related-carousel-container {position: relative;}

.slick-arrow    {width: 57px; height: 57px; background-color: #FEF8E8; border: 2px solid #222; display: flex; justify-content: center; align-items: center; font-size: 0; z-index: 10; position: absolute; top:50%; margin-top: 14px;}
.slick-next     {right: -13px; background-image: url(/_uploads/_assets/slick-next.svg); background-size: 16px auto; background-repeat: no-repeat; background-position: center}
.slick-prev     {left: -13px; background-image: url(/_uploads/_assets/slick-prev.svg); background-size: 16px auto; background-repeat: no-repeat; background-position: center}

.related-articles           {padding-bottom: 80px;}
.related-articles h3        {font-size: 48px; text-transform: uppercase; width: 900px; max-width: 100%; color: #231F20; line-height: 1.1em; font-weight: 500; display: block; text-align: center; margin: 0 auto 1em}
.related-articles .inner    {width: 1340px;}
.related-carousel .slide    {padding: 0 12px; border-right: 2px solid #222222;}
.related-carousel .slide:last-child {border:none}

.related-carousel:before {position: absolute; left: 0; top: 0; width: 2px; height: 100%; background-color: #FEF8E8; content: '';}
.related-carousel:after  {position: absolute; right: 0; top: 0; width: 2px; height: 100%; background-color: #FEF8E8; content: '';}

/* TEMPORY - DELETE WHEN MORE THAN 2 ARTICLE */
.related-carouselx   {width: 620px; max-width: calc(100% - 40px); margin: auto;}

ul.slick-dots                           {display: flex; justify-content: center; font-size: 0; margin: 40px 0 0 0; gap: 6px;}
ul.slick-dots li                        {width: 30px; height: 20px; display: flex; align-items: center}
ul.slick-dots li.slick-active button    {background-color: rgba(34, 34, 34, 1);}
ul.slick-dots li button                 {height: 3px; width: 100%; background-color: rgba(34, 34, 34, 0.20);}

.related-articles .slick-track  {display: flex;}
.related-articles .slick-slide  {height: auto}

/* CTA CONTAINER */
.cta-container					{border-top: 2px solid #222; border-bottom: 2px solid #222; background: #EFE8C3; margin: 0 0 46px; padding: 86px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center;}
#tvn-content .cta-container p	{font-size: 48px; text-transform: uppercase; width: 960px; max-width: 100%; color: #231F20; margin:0 auto 1em; line-height: 1.1em; font-weight: 500}
.cta-container .btn				{background-color: #FEF8E8; font-size: 16px; color: #222222; padding:13px 25px 15px 25px; font-weight: 400;  border: 2px solid #222; -webkit-transition: background .5s ease-in, color .5s ease-in; transition: background .5s ease-in, color .5s ease-in;}
.cta-container .btn:hover		{background-color: #222222; color: #fff; border-color: #222222; -webkit-transition: all .5s ease-in; transition: all .5s ease-in; text-decoration: none;}


#pmLink     {visibility: hidden}