﻿
/*
.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: "Open 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: "Open 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: "Open Sans", sans-serif;text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #000000}

html    {scroll-behavior: smooth}

/******************************************************************************************************************************/

a.cover {position: absolute; left: 0; top:0; width:100%; height: 100%; z-index: 6; display: none}

strong	{font-weight: 700}	

.inner 	{width:1360px; max-width: 100%; padding-left: 30px; padding-right: 30px; margin: auto;}

article {padding: 50px 0 20px}

#tvn-content article h1 {font-size: 45px; font-weight: 700; margin: 0.5em 0; line-height: 1.15em}

.article-inner p    {font-size: 16px; line-height: 1.5em; margin-bottom: 1.5em}

p a {text-decoration:  underline}
p a:hover   {text-decoration: none}

/* HOME LISTING */

.listing-card                   {display: flex; justify-content: space-between; flex-direction: column;align-items: flex-start}
.listing-card .btn              {padding: 10px 20px; margin-left: 30px}
.listing-card .btn span         {font-size: 15px;}
.listing-card-image-container   {position: relative; padding-top: 50%; overflow: hidden; border-radius: 20px;}
.listing-card-image             {position: absolute; inset: 0; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; transition: var(--smooth);}

.listing-top            {width: 100%;}
.listing-card-text      {padding: 20px 30px;}
.listing-card-text h2   {font-size: 21px; font-weight: 600 !important; margin: 0.5em 0; color: #000000}
.listing-card-text p    {font-size: 14px; color: #555555; line-height: 1.5em; width: 100%; max-width: 500px;}

/* TIME AND TAGE */
.time-container     {display: flex; gap: 15px;}
.time-container p   {display: flex; align-items: center; font-weight: 600; color: #959595 !important; font-size: 12px; text-transform: uppercase; gap:8px;margin-bottom: 0 !important}

p.time-tag:before   {width: 15px; height: 15px; background-image: url(/_uploads/_assets/icon-clock.svg); content: ''; flex-shrink: 0}
p.category:before   {width: 11px; height: 14px; background-image: url(/_uploads/_assets/icon-category.svg); content: ''; flex-shrink: 0}

/* HOME ICON */
.home-icon				{position: fixed; left: 10px; top:117px; z-index: 20; background-color: #ffffff; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50px; display: flex; box-shadow: 0 0 2px rgba(0,0,0,0.2); display: none}
.home-icon svg			{width: 20px; transition: 0.3s ease-out; height: auto; fill:#2D2D2D; flex-shrink: 0}
.home-icon:hover		{}
.home-icon:hover svg	{}
.home-icon:before		{content: 'Back to hub'; font-size: 12px; position: absolute; color:#2D2D2D; border-radius: 1px; padding: 2px 3px; background-color: #ffffff; left: 0px; width: max-content; opacity: 0; z-index: 0; visibility: hidden; transition: 0.3s ease-out}
.home-icon:hover:before	{opacity: 1; visibility: visible; left: 55px;}

/* VIDEO */
.article-inner  {width: 915px; max-width: 100%; padding: 0 20px; margin: 0 auto}

#tvn-content .intro-copy p   {font-weight: 500; font-size: 20px; line-height: 1.5em}

/* RELATED ARTICLES */
.ra-heading-text		{display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 30px;}
.ra-heading-text h3		{font-size: 34px; font-weight: 700 !important}

.related-articles 			{padding:0 0 70px 0; overflow: hidden;}
.related-articles .inner	{width: 915px; padding: 0 20px}

/*
.related-articles .cols		{width:calc(100% + 30px); margin-left:-15px; display: flex;}
.related-articles .column	{padding: 15px;}
*/

.related-carousel				{width: 100%;}
.related-carousel .slick-list	{overflow: visible}
.related-carousel .slick-track	{display: flex;}
.related-carousel .slick-slide	{height: auto}

.carousel-nav					{gap:10px; display: flex; margin-top: 20px; justify-content: center}
.slick-arrow					{width: 50px; height: 50px; border-radius: 50px; font-size: 0; border:1px solid var(--DarkBlue); background-color: transparent; background-image:url(/_assets/slick-arrow.svg); background-position: center; background-repeat: no-repeat;}
.slick-arrow.slick-disabled		{opacity: 0.5; pointer-events: none}
.slick-arrow.slick-prev			{background-image:url(/_assets/slick-arrow-prev.svg);}

.listing-card:hover .listing-card-image		{transform: scale(1.1)}

blockquote									{margin: 3em auto; width: 600px; max-width: 100%;}
#tvn-content .article-inner  blockquote p	{font-size: 26px; font-weight: 500; line-height: 1.4em}	

/* VIDEO */
.video-container-outer  {margin: 50px auto; max-width: calc(100% - 40px); width: 1100px;}

.video-container        {position: relative; aspect-ratio: 16 / 9; /*width: 100%; max-width: 100%; */max-height: 75vh; overflow: hidden; margin: 0 auto; border-radius: 20px}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video	{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.video .article-inner			{padding:30px; padding-top: 23px;}
.video #tvn-content .date-container p.date	{margin-bottom: 0px;}

.video-header   {animation: 1s fadein 0.25s ease-in-out forwards; opacity: 0}

@keyframes fadein {
    to  {opacity: 1;}    
}

/* CTA CONTAINER */
.cta-container              {border-top:1px solid #B5B5B5; border-bottom: 1px solid #B5B5B5; padding: 50px 0; text-align: center; width: 1100px; max-width: calc(100% - 40px); margin: 50px auto}
.cta-container p            {font-size: 20px; line-height: 1.5em; width: 800px; max-width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1.5em}
.cta-container p a          {font-weight: 700; text-decoration: none}
.cta-container p a:hover    {text-decoration: underline;}

.btn            {border:1px solid #D8D8D8; box-shadow: 0 5px 0 #D8D8D8; display: inline-flex; gap: 14px; align-items: center; border-radius: 30px; padding:12px 20px 13px 20px; transition: var(--smooth);}
.btn:before     {width: 29px; height: 29px; display: block; content: ''; background-image: url(/_uploads/_assets/icon-arrow.svg); transition: var(--smooth);}
.btn span       {font-size: 19px; font-weight: 700;}

.btn:hover          {transform: translateY(5px); box-shadow: 0 0 0 #D8D8D8}
.btn:hover:before  {transform: rotate(45deg);}


.btt        {width: 90px; height: 90px; display: flex; justify-content: center; align-items: center; background-color: #000000; right: 50px; top: -45px; transition: var(--smooth); position: absolute; border-radius: 70px; border: 10px solid #ffffff}
.btt svg    {transition: var(--smooth);}
.btt:hover  {transform: translateY(-5px) scale(1.1);}
.btt:hover svg  {transform: translateY(-5px);}

/* FOOTER */	
.hsbc-footer                {background-color: #000000; padding: 50px 0; width: calc(100% - 40px); margin: 0 auto; border-radius: 20px 20px 0 0; display: flex; justify-content: center; position: relative;}
.hsbc-footer li a           {display: flex; color: #ffffff; align-items: center; gap: 10px; transition: var(--smooth);}
.hsbc-footer li a span      {color: #ffffff}
.hsbc-footer li a:hover     {opacity: 0.75}

.footer-social-link div,
.panel-arrow-circle div			{width: 30px; height: 30px; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 30px; margin-left: 11px; position: relative; background-color: var(--DarkBlue); transition: 0.75s cubic-bezier(0.75, 0, 0, 1);} 


#pmLink     {visibility: hidden}

