.lottie-mb	{display: none}


@media (max-width: 1100px) 
{
	/** 2024 **/
	.page-2024.panel-container				{}
	.page-2024.panel-container.narrow:nth-child(even) .panel-image-container	{left: 0px;}
	
	.page-2024.panel-container .panel-container-text,
	.page-2024.panel-container.long-title .panel-container-text	{padding: 70px 0}
	
	.page-2024.panel-container .panel-container-text h2		{font-size: 40px;}	
	.page-2024.panel-container .panel-container-text h2 br	{display: none}
	.page-2024.panel-container .panel-container-text div	{width: 414px; max-width: 100%; margin: 0 auto; padding: 40px 30px;}
	
    
    .page-2024.panel-container.narrow .panel-image-container    {right: 0; top: -30px; bottom: -30px;}
    
}

@media (max-width: 1040px) 
{
	/* ARTICLE */
	.article-hero-outer	{flex-direction: column; justify-content: flex-end; height: auto; min-height: unset}
	.article-hero-image	{position: relative; transform: none !important; height: 47vw;}
	.article-inner-inner	{padding: 0 30px;}
    .article-hero-text      {margin-top: 0}
    
	/* RELATED ARTICLES */
	.related-articles							{padding: 40px 0}
	.related-articles .article-inner			{padding-bottom: 25px;}
	.related-articles .panel-image-container	{height: 15vw; width: 40%}
	.related-articles .panel-container-text		{width:60%; padding-left: 30px;}
	.related-articles .panel-container-text h2	{font-size: 23px;}
	
	.related-articles-2024 h3,
	.related-articles h3						{font-size: 35px;}
}

@media (max-width: 960px) 
{
	/* HOME HERO */
	.hero-text h1	{font-size: 10vw;}
	
	/* HOME LISTING */
	.listing-inner				{padding: 30px; overflow: hidden}
	.panel-container-text h2	{font-size: 36px;}
	
	.listing-inner .panel-container:not(.page-2024) .panel-container-text	{padding: 0 30px;} 
	
	.panel-container.podcast-style	.panel-image {background-size: contain; background-repeat: no-repeat; background-color: #721b7c; background-position: center;}
	
	/** 2024 **/
	.page-2024.panel-container.narrow .panel-image-container	{width: 50%}
	.page-2024.panel-container .panel-container-text h2			{font-size: 34px}
	.tab	{font-size: 30px;}
}

@media (max-width: 860px) 
{
	/** 2024 **/
	.hero-text-inner h1		{font-size: 80px;}
	.hero-text-inner p		{font-size: 30px; line-height: 1.2em}

}

@media (max-width: 800px) 
{
	.listing-inner	{max-width: 100%;}
	
	/* 2024 */
	.related-articles-2024			{max-width: 100%;}
	.related-articles-2024 .slide	{padding: 30px 0}
	
}

@media (max-width: 767px) 
{
	/* HERO */
	.hero-video		{height: 80vh}
	
	/* HOME NAV */
	.nav-container:after	{display: none}
	.nav-container			{left: 10px; position: absolute;}
	.circle-btn				{margin-top: 135px;}
	.nav-container ul		{background-color:#521160}
	
	/* ARTICLE */
	.article-inner blockquote:before	{position: relative; left: auto; top: 0; display: block; margin-bottom: 15px;}
	
	.lottie-dk	{display: none}
	.lottie-mb	{display: block}
	
	
	
}

@media (max-width: 730px) 
{
	/* HOME LISTING */
	.listing-inner					{padding: 0}
	.listing .panel-container-cols	{}
	.listing .panel-container:not(.page-2024)		{margin: 0; padding: 20px 0}
	.listing .panel-image-container	{min-height: 300px; height: 50vw;}
	.listing .panel-container		{padding: 40px 0;}
	
	.listing-inner .panel-container:not(.page-2024):nth-child(even) {background-color: #F7F9FD}
	
	/* 2024 */
	#tvn-content[data-article-tag='futurePowerhouses'] .listing-inner			{padding-top: 30px}
	.page-2024.panel-container			{padding-top: 0; padding-bottom: 0}
	.page-2024.panel-container .panel-image-container	{min-height: unset; height: auto}
	
	.tab	{font-size: 20px; padding: 30px 20px;}
	.tab.active	{padding:30px 20px 35px 20px;}
	
}

@media (max-width: 700px) 
{
	/* RELATED ARTICLES */
	.carousel-nav-container						{display: flex; padding: 30px 0 10px}
	.related-articles .panel-image-container	{height: 30vw;}
	
	/* 2024 */
	.page-2024.panel-container .panel-container-text:before,
	.page-2024.panel-container .panel-container-text:after	{width: 50%}
	
}

@media (max-width: 640px) 
{
	.text-lottie	{flex-direction: column;}
	.text-lottie .lottie-container	{width: 414px; max-width: 100%; margin: auto; transform: none}
	
	/** 2024 **/
	.page-2024.panel-container .panel-container-text h2	{font-size: 24px;}
	.page-2024.panel-container .panel-container-text p	{font-size: 14px; line-height: 1.3em}
    
    .video-container    {width: calc(100% + 60px); max-width: calc(100% + 60px); margin-left: -30px; height: auto; padding: 0; aspect-ratio: 16 / 9}
    
    .video-page .article-inner-inner    {padding: 0}
    
}

@media (max-width: 600px) 
{
	/* LISTING */
	.panel-container:not(.page-2024) .panel-container-text h2	{font-size: 28px;}
	.panel-container:not(.page-2024) .panel-container-text p		{font-size: 14px;}
	.panel-container:not(.page-2024) .panel-container-text .btn	{font-size: 14px; padding: 12px 15px}
	.panel-container:not(.page-2024) .panel-container-text .btn:after	{width: 8px; height: 14px;}
	
	.article-hero-text h1	{font-size: 38px;}
	.article-inner h2		{font-size: 30px;}
	
	.article-inner p.intro	{font-size: 18px;}
	.article-inner p		{font-size: 16px;}
	
	.article-inner blockquote	{width: 350px; max-width: 100%; margin: 3em auto 2em}
	.article-inner blockquote p	{font-size: 25px;}
	.article-inner blockquote:before	{background-size: cover; width: 38px; height: 28.5px;}
	
	.home-icon	{left: 5px;}
	.home-icon svg	{width: 15px; height: auto; display: block}
	
	.article-inner .button-container			{flex-direction: column; justify-content: center; align-items: center; text-align: center;}
	.article-inner .button-container .btn		{margin-top: 1em; font-size: 16px;}
	.article-inner .button-container .btn:after	{width: 8px; height: 14px;}
	.article-inner .button-container p			{padding: 0; font-size: 20px;}
	
	/** 2024 **/
	.hero-text-inner h1		{font-size: 14vw; line-height: 0.9em; margin-bottom: 0.45em}
	.hero-text-inner p		{font-size: 24px;}
	
	.page-2024.panel-container .btn	{width: max-content; margin-top: 10px;}
	
	.page-2024.panel-container .panel-container-text,
	.page-2024.panel-container.long-title .panel-container-text	{padding-top: 30px; padding-bottom: 30px}
	.page-2024.panel-container .panel-container-text div		{padding-top: 20px; padding-bottom: 10px;}	
	.page-2024.panel-container .panel-container-text:before		{top: 30px;}
	.page-2024.panel-container .panel-container-text:after		{bottom: 30px;}
	
	.page-2024.panel-container.narrow							{margin-top: 0; margin-bottom: 110px;}
	.page-2024.panel-container.narrow .panel-image-container	{top: -30px; bottom: -30px;}
	
	
	
}

@media (max-width: 499px) 
{
	/* HOME LISTING */

	.listing .panel-container-cols	{align-items: flex-start} 
	.listing .panel-image-container	{width:170px; min-height: 150px; height: auto}
	.listing .panel-container-text	{width:calc(100% - 170px);}
	
	/* SCROLL ANIMATIONS */
	.panel-image-container.reveal			{opacity: 0; transform: translateY(50px) scale(0.9); transform-origin: center; transition:1s ease-out}
	.panel-image-container.reveal.active	{opacity: 1; transform: translateY(0) scale(1);}
	
	/* 2024 */
	.page-2024.panel-container	{margin-bottom: 70px !important;}
	.page-2024.panel-container .panel-container-text:before,
	.page-2024.panel-container .panel-container-text:after				{display: none}
	.page-2024.panel-container .panel-image-container	{width: 45% !important}
	.page-2024.panel-container .panel-container-text	{width: 55% !important}
	.page-2024.panel-container .btn					{position: relative; bottom: auto; left: auto; transform: translateX(0); font-size: 14px; background-color: #ffffff !important}
	.page-2024.panel-container .panel-container-text,	
	.page-2024.panel-container.long-title .panel-container-text	{padding-bottom: 10px; padding-top: 25px;}
	.page-2024.panel-container .panel-container-text div							{padding: 0 20px;}
	
	.page-2024.panel-container .panel-container-text h2	{font-size: 22px; line-height: 1.1em}
	
	.tab	{font-size: 16px; padding-left: 10px; padding-right: 10px;}
	
}	

@media (max-width: 414px) 
{
	
	.panel-container:not(.page-2024) .panel-container-text h2	{font-size: 24px;}

	footer.standard-chartered-footer p		{font-size: 16px;}
	footer.standard-chartered-footer 		{text-align: center}
	footer.standard-chartered-footer ul li	{margin: 0 5px}
	
	footer.standard-chartered-footer ul li a	{width: 45px; height: 45px;}
	
	.page-2024.panel-container .panel-image-container,
	.page-2024.panel-container.narrow .panel-image-container	{top: -10px; bottom: -10px;}
	.page-2024.panel-container .btn	{margin-top: 0}
	
}
	
@media (max-width: 375px) 
{
	.listing .panel-image-container		{width: 40%}
	.listing .panel-container-text		{width: 60%; padding: 0 20px;}
	.listing .panel-container-text h2	{font-size: 20px;}
	.listing .panel-container-text p	{font-size: 13px;}
	.listing .panel-container-text .btn:after	{display: none}
}