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

	--bodyCopy: #313131;
    --darkBG: #4B4B4B;
    --beige: #E6E6D8;
    
    --tech: #DDEDF7;
    --health: #F0CECD;
    --climate: #deedd8;
    --lifestyle: #E7D8EB;
    --finance: #FCEBBD;
    
}



body:not(.js-focus-visible) :focus, html:not(.js-focus-visible) :focus {
    outline:none;
}

html    {/*scroll-behavior: smooth*/}

/** 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:#333333 !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;}

.o-header__drawer    {transform: translate3d(-100%, 0, 0); width: auto; position: fixed}

.pc__disclaimer-content {padding: 0;}

#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: var(--darkBG) !important; height: auto !important; color: var(--bodyCopy); font-family: MetricWeb,sans-serif;}
ul 		{margin:0;}

#tvn-content h1,
#tvn-content h2,
#tvn-content h3,
#tvn-content h4,
#tvn-content h5,
#tvn-content h6	{}
#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 h2 {font-size: 45px; font-weight: 500;}

#tvn-content p  {margin-bottom: 1em; line-height: 1.4em}

.inner          {width: 1240px; max-width: 100%; margin: 0 auto; padding: 0 30px;}
.inner-narrow   {width: 960px; max-width: 100%; margin: 0 auto; padding: 0 30px;}

.cols   {display: flex;}

/* LOGIN */
.hero-container.login          {height: 100vh; background-image: url(/_uploads/page-images/login-bg.jpg); padding-top: 100px;}
.hero-container.login input[type="password"]     {font-size: 18px; padding: 10px; border-radius: 14px; border: 2px solid orange; width: 350px; max-width: 100%; }
.hero-container.login .login-button         {font-size: 18px; padding: 10px 16px; border-radius: 14px; background-color: orange; color: white;}
.login-form         {display: flex; flex-direction: column; align-items: center; gap: 16px;}

/* HERO */
.hero-container                  {height: calc(100vh - 107px); min-height: 830px; position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; background-image: url(/_assets/bg-header.jpg); background-size: cover; background-position: center;}
.hero-container .logo-lockup     {margin-bottom: 30px; position: relative; z-index: 10}
.hero-container .logo-lockup h1  {font-size: 109px; font-weight: 700; font-style: italic; text-transform: uppercase; margin-bottom: 0em; line-height: 78px;}
.hero-container .logo-lockup p   {font-size: 35px; font-weight: 600; font-style: italic; margin: 0 !important; display: block; text-align: right; text-transform: uppercase;}

.hero-top                       {display: flex; flex-direction: column; align-items: center; flex: 0 0 30%; justify-content: flex-end; padding: 0 20px; text-align: center}
ul.podcast-platforms            {display: flex; gap: 50px; position: relative; z-index: 19}
ul.podcast-platforms li         {text-align: center; transition: var(--smoothQuicker);}
ul.podcast-platforms li a       {display: block}
ul.podcast-platforms span       {display: inline-flex; height: 35px; justify-content: center; align-items: center;}
ul.podcast-platforms li p       {font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 8px; margin-bottom: 0 !important}
ul.podcast-platforms li:hover   {transform: translateY(-5px);}

.collage-container      {flex: 0 0 70%; width: 100%; max-width: 1700px; min-width: 1500px; display: flex; align-items: flex-start; position: relative;}
img.collage             {pointer-events: none; user-select: none}

.soundwave              {z-index: 1}
.cityscape              {position: absolute; bottom: 0; left: 50%; margin-left: -50%; width: 100%; mix-blend-mode: color-burn; z-index: 1}
.cityscape-masked       {position: absolute; bottom: 0; left: 50%; margin-left: -50%; width: 100%; mix-blend-mode: darken; z-index: 5;}
.cityscape-planet       {position: absolute; bottom: 0; left: 50%; margin-left: -50%; width: 100%; mix-blend-mode: normal; z-index: 2}
.cityscape-lady         {position: absolute; bottom: 0; left: 50%; margin-left: -50%; width: 100%; mix-blend-mode: normal; z-index: 5}


/* HOME INTRO */
.home-intro         {padding:55px 0 45px 0; position: relative; background-color: #ffffff;}
.home-intro:after    {position: absolute; inset: 0; width: 100%; height: 100%; background-image: url(/_uploads/_assets/bg-texture.png); content: ''; background-size: 15px; opacity: 0.3; z-index: 0}
.home-intro h2      {font-size: 45px; font-weight: 500; margin: -22px 20px 0 0; line-height: 53px; float: left; position: relative; z-index: 4}
.home-intro p       {font-size: 24px; position: relative; z-index: 2; color: var(--bodyCopy);}
.home-intro p:last-child    {margin-bottom: 0 !important}
.home-intro-inner           {}

.podcast-page-intro .inner {width: 960px;}

.podcast-listing-section h2   {position: relative; display: inline-block}

.podcast-listing-section h2 span,
.latest-episode-section h2 span,
.home-intro h2 span        {position: relative; z-index: 3}

.podcast-listing-section h2:before,
.latest-episode-section h2:before,
.home-intro h2:before      {width: calc(100% + 10px); height: 15px; background-color: #FFE7C6; position: absolute; left: -5px; bottom: 0; content: '';}

.scroll-down                {position: absolute; left: 50%; margin-left: -16px; bottom: 20px; text-align: center; z-index: 5}
.scroll-down .mini-phone    {width: 23px; height: 35px; border: 1px solid var(--beige); background-color: var(--darkBG); border-radius: 15px; margin: auto; margin-top: 14px; position: relative; text-align: center; padding-top: 1px;}
.scroll-down .scroller      {width: 3px; height: 5px; border-radius: 100%; background-color: var(--beige); display: block; margin: auto; animation: 2.5s scroller both infinite ease-in-out;}

@keyframes scroller {
    0%,20%,50%,80%,100% {
        transform: translateY(6px)
    }

    40% {
        transform: translateY(10px)
    }

    60% {
        transform: translateY(14px)
    }
}


/* LATEST EPISODE SECTION */
.latest-episode-section         {overflow: hidden; background-color: var(--darkBG);}
.latest-episode-section h2      {margin-bottom: 0.75em; color: #ffffff; position: relative; display: inline-block}
.latest-episode-section h2:before   {background-color: var(--bodyCopy);}
.latest-episode-section .cols   {align-items: flex-start}

.column-latest-ep           {padding: 50px 50px 50px 0; max-width: 100%; flex: 1; color: #ffffff}
.column-latest-ep h3        {font-size: 30px; font-weight: 500; margin-bottom: 0.5em}
.column-latest-ep p.intro   {font-size: 18px; font-weight: 500}
.column-latest-ep ul.tags   {margin-top: 1em}
.column-coming-soon         {flex: 0 0 330px; padding: 50px 0 30px 30px;}

.le-cols    {display: flex; gap: 40px;}
.le-left    {width: 300px; flex-shrink: 0}

p.date          {font-size: 12px; font-weight: 500; text-transform: uppercase}
ul.tags         {font-size: 12px; list-style: none; display: flex; gap:6px; text-transform: capitalize}
.tile-text .btn {margin: 0.75em 0}

/* COMING SOON */
.column-coming-soon         {background-color: var(--darkBG); background-image: url(/_uploads/_assets/bg-texture.png); background-position: top left; position: relative;}
.column-coming-soon:after   {background-color: var(--darkBG); background-image: url(/_uploads/_assets/bg-texture.png); background-position: top left; position: absolute; top: 0; width: 5000px; height: 100%; display: block; left: 100%; content: '';}
.column-coming-soon h2      {color:var(--beige);}

.cs-tile                             {display: flex; gap: 15px; margin-bottom: 25px;}
.cs-tile .tile-text                  {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}
.cs-tile .tile-text h3               {font-size: 18px; font-weight: 500; line-height: 1.1em}
.cs-tile.tile .podcast-tile-image    {width: 105px; flex-shrink: 0}
#tvn-content .cs-tile .tile-text  p.sponsor-name  {font-size: 15px; margin-bottom: 5px;}

.cs-tile p.sponsor-name {color: var(--beige);}

/* PODCAST LISTING SECTION */
.podcast-listing-section    {padding: 60px 0; background-color: #ffffff;}
.podcast-listing-section h2 {color:var(--bodyCopy); margin-bottom: 0.8em}

.podcast-listing .cols  {gap:60px; flex-wrap: wrap}
.podcast-listing .col   {flex: 0 0 calc(33.333% - 40px);}

.le-right a.btn,
.le-left a.podcast-tile-image,
.podcast-listing .col a     {cursor: url(/_uploads/_assets/headphones-cursor.png), auto}

.le-right p       {font-size: 18px;}
.le-right p.date  {font-size: 14px;}

.podcast-listing .tile                  {display: flex; flex-direction: column; height: 100%;}
.podcast-listing .podcast-tile-image    {width: 100%; max-width: 300px;; transition: var(--smooth);}
.podcast-listing .tile-text             {color: #ffffff; padding-top: 15px; flex: 1; display: flex; flex-direction: column; justify-content: space-between}
.podcast-listing .tile-text p           {color:var(--bodyCopy); font-size: 20px;}
.podcast-listing .tile-text p.date      {font-size: 12px}
.podcast-listing .tile-text h3          {font-size: 24px; font-weight: 600; margin-bottom: 0.5em; transition: var(--smooth); color: var(--bodyCopy);}


.podcast-listing .btn         {color: var(--bodyCopy);}
.podcast-listing .btn:hover   {border-color:var(--bodyCopy); color: var(--beige);}

.podcast-listing .tile:hover .podcast-tile-image        {transform: scale(1.03)}

/*.podcast-listing .tile:hover .btn   {border-color:var(--bodyCopy); color: var(--beige); background-color: var(--bodyCopy);}*/

.podcast-listing .tile:hover h3     {}

.podcast-listing ul.tags    {margin-top: 8px;}
.podcast-listing ul.tags li {display: inline-block; background-color: rgba(0,0,0,0.1); padding: 5px 6px; border-radius: 3px; }

p.sponsor-name,
.tile p.sponsor-name    {font-weight: 600; font-size: 16px;}


/* FILTERS */
.filters                        {display: flex; gap: 30px; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd; padding: 15px 0; margin-bottom: 2em}
.filters ul                     {display: flex; text-transform: uppercase; color:  var(--bodyCopy) !important;}
.filters ul li a                {color: var(--bodyCopy);}
.filters ul li a:hover          {color:#cccccc}
.filters ul li:after            {content: '/'; display: inline-block; margin: 0 10px;}
.filters ul li:first-child      {margin-right: 15px;}
.filters ul li:first-child:after{display: none}
.filters ul li:last-child:after {display: none}

/* HOME ICON */
.home-icon           {position: fixed; right: 0; z-index: 20; transform: translateX(6px); width: 62px; height: 42px; font-size: 12px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; color: var(--beige); font-weight: 500; transition: var(--smooth)}
.home-icon svg       {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; fill:var(--bodyCopy); transition: var(--smooth);}
.home-icon span      {transform: translateX(3px); display: block; position: relative; z-index: 2; transition: var(--smooth); color: #ffffff}

.home-icon:hover        {transform: translateX(0px)}  
.home-icon:hover svg    {}
.home-icon:hover span   {}

/* PODCAST PAGE */
.podcast-hero           {/*height: calc(100vh - 107px);*/ min-height: 700px; position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; background-size: cover; background-position: center; background-image: url(/_assets/bg-header.jpg);}
.podcast-hero .inner    {width: 100%; max-width: 100%; height: 100%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; position: relative;}
.podcast-hero h1        {font-size: 50px; font-weight: 500; margin:0.2em 0 0.5em 0}
.podcast-hero p         {font-size: 18px; font-weight: 500;}
.podcast-hero iframe    {margin-top:0; width: 900px; max-width: 100%; box-shadow: 0 0 20px rgba(0,0,0,0.3); border-radius: 6px;}

.ph-text                {max-width: 720px; width: 100%; margin-left: auto; margin-right: auto; position: relative; z-index: 10}
.podcast-hero-details   {flex: 1; align-items: center; display: flex; padding: 40px 20px; max-width: 100%}

.podcast-hero-text-bar      {background-color: var(--bodyCopy); width: 100%; flex-shrink: 0; padding: 20px 0}
.podcast-hero-text-bar h2   {color: var(--beige); flex-shrink: 0}
.podcast-hero-text-bar p    {font-size: 18px; color: #ffffff; margin-bottom: 0 !important; line-height: 1.2em !important}

.podcast-hero-text-bar .inner-narrow   {display: flex; justify-content: center; gap: 30px; flex-direction: row; text-align: left; align-items: center;}

.podcast-container               {position: relative;}
.podcast-hero .soundwave         {position: absolute; transform: scale(0.8) translateY(-60%); transform-origin: center; z-index: 1; top: 50%; margin-left: -808px; left: 50%; opacity: 0.8}
.podcast-hero .video-container   {z-index: 5}

.podcast-hero-details-inner   {width: 900px; max-width: 100%;}

.podcast-hero .cityscape-lady  {min-width: 392px; width: 30vw; left: 0; margin: 0; z-index: 4}
.podcast-hero .cityscape       {z-index: 0;}

.featured-in                {padding:45px 0 55px 0}
.featured-in h3             {font-size: 28px; font-weight: 600; margin-bottom: 0.75em; color: #ffffff;}
.featured-in .cols          {flex-wrap: wrap; gap:20px 80px;}
.featured-in .person-col    {flex:0 0 calc(50% - 40px);}
.featured-in p              {margin-bottom: 0 !important; color: #ffffff;}
.featured-in strong         {font-size: 20px; font-weight: 600;}

.podcast-description        {background-color: #ffffff; padding: 50px 0}
.podcast-description p      {font-size: 18px;}
.intro-copy                 {margin-bottom: 30px}
.intro-copy, 
.intro-copy p               {font-size: 35px; font-weight: 500; line-height: 1.1em !important}
.intro-copy p:last-child    {margin-bottom: 0 !important}

.podcast-description .tags  {border-top:0.5px solid #CBCBCB; border-bottom:0.5px solid #CBCBCB; padding: 10px 0; font-size: 12px; margin: 30px 0}

.social-container                   {display: flex; gap: 15px; align-items: center;}
.social-container p                 {margin: 0 !important; font-weight: 600; color:var(--bodyCopy);}
.social-container ul                {display: flex; align-items: center; gap:10px;}
.social-container ul a              {width: 40px; height: 40px; border-radius: 50px; display: flex; align-items: center; justify-content: center; border:1px solid var(--bodyCopy); transition: var(--smooth);}
.social-container ul a svg          {fill:var(--bodyCopy); transition: var(--smooth); width: auto; height: 15px;}
.social-container ul a:hover        {background-color: var(--bodyCopy);}
.social-container ul a:hover svg    {fill:#ffffff}

.social-container ul a.website-button           {width: auto; font-weight: 600; text-transform: uppercase; padding: 0 20px; font-size: 14px; text-align: center}
.social-container ul a.website-button:hover     {color: #ffffff;}

.transcript     {padding-top: 50px;}
.transcript h3  {font-weight: 500 !important; font-size: 40px; margin-bottom: 0.5em}

.sticky-header          {padding:10px; 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        {text-transform: uppercase; font-weight: 600; margin-bottom: 0 !important; font-size: 20px;}

.audio-version          {margin: 40px 0 15px;}
.audio-version h3       {font-size: 28px; font-weight: 600; margin-bottom: 0.75em;}

/* VIDEO */
.video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; margin:30px 0 0 0 }
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.related-articles h2          {color: #ffffff}
.related-articles h2:before   {background-color: var(--bodyCopy);}

.related-articles .podcast-listing .tile-text h3,
.related-articles .podcast-listing .tile-text p {color: #ffffff;}

.related-articles .podcast-listing ul.tags li   {color: #ffffff;}

/* BUTTON */

.buttons       {display: flex; gap: 10px;}

.btn            {font-size: 12px; font-weight: 600; text-transform: uppercase; padding: 10px 20px; border:1px solid var(--bodyCopy); display: inline-block; border-radius: 20px; transition: var(--smooth); background-color: #ffffff;}
.btn:hover      {background-color: var(--bodyCopy); color: #ffffff;}




/* TILE COLOURS */
.tile ul.tags   {color: var(--bodyCopy);}

.filter-category           {position: relative;}
a.filter-category:before   {position: absolute; bottom: -3px; left: 0; width: 100%; height: 3px; content: ''; display: block; background: var(--bodyCopy); opacity: 0; visibility: hidden;}
a.filter-category.active   {text-decoration: none}
a.filter-category.active:before  {opacity: 1; visibility: visible}

.tile.climate h3,
.filters [data-id="Climate"]:hover  {color: var(--bodyCopy);}
.filters [data-id="Climate"].active:before {background-color: var(--climate)}

.tile.tech h3,
.filters [data-id="Tech"]:hover {color: var(--bodyCopy);}
.filters [data-id="Tech"].active:before {background-color: var(--tech)}

.tile.health h3,
.filters [data-id="Health"]:hover {color: var(--bodyCopy);}
.filters [data-id="Health"].active:before {background-color: var(--health)}

.tile.finance h3,
.filters [data-id="Finance"]:hover      {color: var(--bodyCopy);}
.filters [data-id="Finance"].active:before {background-color: var(--finance)}

.tile.lifestyle h3,
.filters [data-id="Lifestyle"]:hover  {color: var(--bodyCopy);}
.filters [data-id="Lifestyle"].active:before {background-color: var(--lifestyle)}



body.climate .podcast-hero          {background-image: url(/_uploads/page-images/BG-climate.jpg);}
body.climate .home-intro h2:before,
body.climate .website-button        {background-color:var(--climate);}
body.climate .featured-in h3,
body.climate .featured-in p         {color: var(--climate)}

body.tech .podcast-hero          {background-image: url(/_uploads/page-images/BG-tech.jpg);}
body.tech .home-intro h2:before,
body.tech .website-button        {background-color:var(--tech);}
body.tech .featured-in h3,
body.tech .featured-in p         {color: var(--tech)}

body.finance .podcast-hero          {background-image: url(/_uploads/page-images/BG-finance.jpg);}
body.finance .home-intro h2:before,
body.finance .website-button        {background-color:var(--finance);}
body.finance .featured-in h3,
body.finance .featured-in p         {color: var(--finance)}

body.health .podcast-hero           {background-image: url(/_uploads/page-images/BG-health.jpg);}
body.health .home-intro h2:before,
body.health .website-button         {background-color:var(--health);}
body.health .featured-in h3,
body.health .featured-in p         {color: var(--health)}

body.lifestyle .podcast-hero           {background-image: url(/_uploads/page-images/BG-lifestyle.jpg);}
body.lifestyle .home-intro h2:before,
body.lifestyle .website-button         {background-color:var(--lifestyle);}
body.lifestyle .featured-in h3,
body.healifestylelth .featured-in p         {color: var(--lifestyle)}


/* HOME PAGE FILTERS */

.filter-year,
.filter-category      		{cursor:pointer;}

.filter-year.active,
.filter-category.active 	{font-weight: 600; text-decoration: underline;}


.pc-article.col
.pc-article.col				{transition: 0.2s ease-in-out;}
.pc-article.col.hidden		{display: none;}
.pc-article.col.hiddenYear	{display: none;}


#pmLink     {visibility: hidden}