: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;}

#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;}

/* HERO */
.hero-container     {height: calc(100vh - 107px); min-height: 800px; 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 h1  {font-size: 144px; font-weight: 500; text-transform: uppercase; margin-bottom: 0.2em}

.hero-top                       {display: flex; flex-direction: column; align-items: center; flex: 0 0 30%; justify-content: center; padding: 0 20px; text-align: center}
ul.podcast-platforms            {display: flex; gap: 50px;}
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%; display: flex; align-items: center; position: relative;}
img.collage             {position: absolute; z-index: 5; top: 50%;}
.trace-layer            {position: absolute; left: 50%; top: auto !important; transform: translateX(-50%); z-index: 5; opacity: 0.5}

.joggers        {left: 50%; margin-top: -268px; width: 100px; margin-left: -400px;}
.mic            {left: 50%; margin-top: -99px; width: 80px; margin-left: -480px;}
.cogs           {left: 50%; margin-top: -40px; width: 72px; margin-left: -438px;}
.lightbulb      {left: 50%; margin-top: 60px; width: 59px; margin-left: -470px;}
.tree           {left: 50%; margin-top: 75px; width: 169px; margin-left: -408px;}
.phone          {left: 50%; margin-top: -110px; width: 129px; margin-left: -360px;}
.robot          {left: 50%; margin-top: -250px; width: 309px; margin-left: -310px;}
.coin           {left: 50%; margin-top: -70px; width: 71px; margin-left: -240px;}
.headphones     {left: 50%; margin-top: -70px; width: 325px; margin-left: -210px;}
.airpods        {left: 50%; margin-top: -240px; width: 55px; margin-left: -102px;}
.frame          {left: 50%; margin-top: -265px; width: 227px; margin-left: -18px;}
.drone          {left: 50%; margin-top: -200px; width: 117px; margin-left: 212px;}
.harvester      {left: 50%; margin-top: -130px; width: 170px; margin-left: 133px;}
.butterfly      {left: 50%; margin-top: -125px; width: 70px; margin-left: 251px;}
.ipad           {left: 50%; margin-top: 16px; width: 280px; margin-left: 108px;}
.stethascope    {left: 50%; margin-top: 15px; width: 130px; margin-left: 338px;}

.drone  {animation: 2s drone ease-in-out 5;}

.podcast-hero-collage               {position: absolute; right: 50%; margin-right: -860px; top: 50%; transform: translateY(-50%); height: 620px; width: 400px; z-index: 5}
.podcast-hero-collage .joggers      {left: 50%; margin-top: -49px; width: 67px; margin-left: -150px;}
.podcast-hero-collage .ipad         {left: 50%; top:0; margin-top: 0; width: 200px; margin-left: -169px;}
.podcast-hero-collage .stethascope  {left: 50%; margin-top: 0; width: 90px; margin-left: 0; top: 0;}
.podcast-hero-collage .harvester    {left: 5px; margin-top: -166px; width: 115px; margin-left: 0; }
.podcast-hero-collage .butterfly    {left: 50%; margin-top: -165px; width: 55px; margin-left: -120px;}
.podcast-hero-collage .frame        {left: 50%; margin-top: -187px; width: 150px; margin-left: 10px;}
.podcast-hero-collage .drone        {left: 50%; margin-top: -80px; width: 77px; margin-left: -83px;}
.podcast-hero-collage .robot        {left: 50%; margin-top: -36px; width: 199px; margin-left: -80px;}
.podcast-hero-collage .airpods      {left: 50%; margin-top: -38px; width: 43px; margin-left: 51px;}
.podcast-hero-collage .coin         {left: 50%; margin-top: 80px; width: 60px; margin-left: -40px;}
.podcast-hero-collage .mic          {left: 0; margin-top: 67px; width: 54px; margin-left: 0;}
.podcast-hero-collage .cogs         {left: 0; margin-top: 113px; width: 50px; margin-left: 30px;}
.podcast-hero-collage .lightbulb    {left: 4px; margin-top: 177px; width: 41px; margin-left: 0;}
.podcast-hero-collage .phone        {left: 50%; margin-top: 60px; width: 88px; margin-left: -120px;}
.podcast-hero-collage .tree         {left: 50%; margin-top: 182px; width: 120px; margin-left: -156px;}
.podcast-hero-collage .headphones   {left: 50%; margin-top: 82px; width: 225px; margin-left: -20px;}

@keyframes drone    {
    
    0%  {transform: translateY(0)}
    50%  {transform: translateY(-5px)}
    0%  {transform: translateY(0px)}
    
}

/* HOME INTRO */
.home-intro         {padding:35px 0 45px 0; background-image: url(/_uploads/_assets/bg-texture.png); background-position: bottom left;}
.home-intro h2      {color: var(--beige); margin-bottom: 0.2em}
.home-intro p       {color:#ffffff !important; font-size: 24px;}
.home-intro p:last-child    {margin-bottom: 0 !important}

.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: #ffffff;}
.latest-episode-section h2      {margin-bottom: 0.75em}
.latest-episode-section .cols   {align-items: flex-start}

.column-latest-ep           {padding: 50px 50px 50px 0; max-width: 100%; flex: 1;}
.column-latest-ep h3        {font-size: 26px; 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: 253px; 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}
.podcast-listing-section h2 {color:var(--beige); 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}

.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(--beige); 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);}

.podcast-listing .btn         {border-color:var(--beige); color: var(--beige);}
.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     {color:#ffffff}

.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 #707070; border-bottom:1px solid #707070; padding: 15px 0; margin-bottom: 2em}
.filters ul                     {display: flex; text-transform: uppercase; color: var(--beige) !important;}
.filters ul li a                {color: var(--beige);}
.filters ul li a:hover          {color:#ffffff}
.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; z-index: 20; width: 52px; 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(-5px); display: block; position: relative; z-index: 2; transition: var(--smooth);}

.home-icon:hover        {transform: translateX(4px)}  
.home-icon:hover svg    {transform: scaleX(-1);}
.home-icon:hover span   {transform: translateX(3px);}

/* 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;}
.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; z-index: 5}
.podcast-hero h1        {font-size: 60px; font-weight: 500; margin:0.2em 0 0.5em 0}
.podcast-hero p         {font-size: 18px; font-weight: 500;}
.podcast-hero iframe    {margin-top:1em; width: 900px; max-width: 100%; box-shadow: 0 0 20px rgba(0,0,0,0.3); border-radius: 6px;}

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

.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}

.featured-in                {padding:45px 0 55px 0}
.featured-in h3             {font-size: 28px; font-weight: 600; margin-bottom: 0.75em}
.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}
.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: 40px; 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;}

/* BUTTON */
.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);}
.btn:hover      {background-color: var(--bodyCopy); color: #ffffff;}




/* TILE COLOURS */
.tile ul.tags   {color: #ffffff !important;}

body.tech .home-icon span,
.tile.tech h3,
.filters [data-id="Tech"]:hover {color: var(--tech);}

body.health .home-icon span,
.tile.health h3,
.filters [data-id="Health"]:hover   {color: var(--health);}

body.climate .home-icon span,
.tile.climate h3,
.filters [data-id="Climate"]:hover  {color: var(--climate);}

body.finance .home-icon span,
.tile.finance h3,
.filters [data-id="Finance"]:hover      {color: var(--finance);}

body.lifestyle .home-icon span,
.tile.lifestyle h3,
.filters [data-id="Lifestyle"]:hover  {color: var(--lifestyle);}

body.climate .podcast-hero      {background-image: url(/_uploads/hero-images/podcast-hero-climate.jpg)}
body.tech .podcast-hero         {background-image: url(/_uploads/hero-images/podcast-hero-tech.jpg)}
body.finance .podcast-hero      {background-image: url(/_uploads/hero-images/podcast-hero-finance.jpg)}
body.health .podcast-hero       {background-image: url(/_uploads/hero-images/podcast-hero-health.jpg)}
body.lifestyle .podcast-hero    {background-image: url(/_uploads/hero-images/podcast-hero-lifestyle.jpg)}

body.climate .featured-in,
body.climate .website-button    {background-color:var(--climate);}

body.tech .featured-in,
body.tech .website-button       {background-color:var(--tech);}

body.finance .featured-in,
body.finance .website-button    {background-color:var(--finance);}

body.health .featured-in,
body.health .website-button    {background-color:var(--health);}

body.lifestyle .featured-in,
body.lifestyle .website-button     {background-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;}