﻿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__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:#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;}

.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 	{font-family: 'jpm_am_proregular', sans-serif; background-color: #ffffff !important; height: auto !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
ul 		{margin:0;}

#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content p,
#content ul,
#content ol, 
#content a 	{font-family: 'jpm_am_proregular', sans-serif; font-weight: normal}

/******************************************************************************************************************************/

a.cover {position: absolute; left: 0; top:0; width:100%; height: 100%; z-index: 6;}

.inner 	{width:1340px; max-width: 100%; padding-left: 25px; padding-right: 25px; margin: auto;}

.column-container 	{width:calc(100% + 50px); margin-left: -25px; font-size: 0}
.col-1 			{width:100%; display: inline-block; vertical-align: top; padding:25px; font-size: 16px;}
.col-2 			{width:50%; display: inline-block; vertical-align: top; padding:25px; font-size: 16px;}
.col-3 			{width:33.333%; display: inline-block; vertical-align: top; padding:25px; font-size: 16px;}

/* HOME HERO CONTAINER */
.home-hero-container		{min-height: 500px; padding-bottom: 35px; height: calc(100vh - 108px) ; background-size: cover; background-position: top right; position: relative; overflow: hidden;}
.home-hero-container .inner	{display: flex; align-items: center; height: 100%; position: relative}
.home-hero-text				{width:600px; max-width: 100%; position: relative; z-index: 5}
.home-hero-text h1			{color:#ffffff; font-size: 70px; line-height: 1em; margin-bottom: 0.4em;}
#content .home-hero-text p	{color:#ffffff; font-size: 22px; line-height: 1.4em; width: 537px; max-width: 100%; margin-bottom: 3em; font-family: 'jpm_am_prolight', sans-serif;}
.home-hero-container:after	{display: block; position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background: rgb(21,14,45); background: linear-gradient(75deg, rgba(21,14,45,1) 0%, rgba(0,0,0,0.7) 20%, rgba(37,9,33,0.5) 50%, rgba(0,0,0,0) 100%); z-index: 2;}

/* HERO LINE BUTTON */
.home-hero-container .circle-graphic-large	{width:1090px; height: 1090px; background-size: contain; background-image: url(/_assets/circle-graphic-large.png); mix-blend-mode: multiply; position: absolute; right: -170px; top: -330px; display: none}
.home-hero-container .line-button			{display: flex; justify-content: flex-end; position: relative; transition: 0.3s ease-out; left: 0}
.home-hero-container .line-button a			{font-size: 20px; font-weight: 500; color:#ffffff;}
.home-hero-container .line-button a svg		{margin-left: 8px; transform: translateY(1px)}
.home-hero-container .line-button:before	{border-top:1px solid #ffffff; content: ''; right:210px; width: 5000px; position: absolute; top:50%; margin-top: -1px;}

.home-hero-container .line-button:hover 	{left: 20px}

.p-container p,
.h1-container			{overflow: hidden;}

.article-top-inner img,
.circle-graphic-large	{animation: spin linear 100s infinite; transform: rotate(0deg);}
.h1-container h1		{animation: move-up 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.2s; transform: translateY(110%); opacity: 0; filter: blur(2px)}
.p-container p			{animation: move-up 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards 0.7s; transform: translateY(110%); opacity: 0; filter: blur(2px)}

.home-hero-container .line-button	{animation: slide-in 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards 1s; transform: translateX(-150%); opacity: 0;}

@keyframes move-up {
	to {transform: translateY(0); opacity: 1; filter: blur(0px)}
}

@keyframes spin {
	to	{transform: rotate(359.99deg)}
}


@keyframes slide-in {
	to {transform: translateX(0); opacity: 1;}
}

/* HOME LISTING */
.listing							{padding:0}
.panel-container					{min-height: 495px; position: relative; display: flex;}
.panel-container-image				{width:100%; height: 100%; overflow: hidden; position: absolute; left: 0; top:0;}
.panel-container-image-inner		{width:100%; height: 100%; position: absolute; left: 0; top:0; background-size: cover; background-position: center;}		
.panel-container-inner				{position: relative; z-index: 5; width:1130px; max-width: 100%; padding-left: 25px; padding-right: 25px; margin: auto; display: flex; height: 100%}
.panel-container-text				{height:100%; width:475px; max-width:100%; display: flex; flex-direction: column; justify-content: center; padding: 20px 0; position: relative; min-height: 450px;}
.panel-container-text h2			{color:#ffffff; font-size: 45px; line-height: 1em; margin:0.3em 0; font-weight: 300 !important;}
#content .panel-container-text p	{color:#ffffff; font-size:18px; line-height: 1.5em; margin-bottom: 1.5em; width:375px; max-width: 100%; font-family: 'jpm_am_prolight', sans-serif;}
.panel-container-text p.tag			{font-size: 14px; text-transform: uppercase; margin-bottom: 0}

.panel-container .line-button			{display: flex; justify-content: flex-end; color:#ffffff; align-items: center;}
.panel-container .line-button span		{display: flex; align-items: center; font-size: 20px; font-weight: 500; flex-shrink: 0; margin-left: 15px; margin-right: 20px; transition: 0.3s cubic-bezier(0.65, 0, 0.35, 1);}
.panel-container .line-button span svg	{margin-left: 15px;}
.panel-container .line-button:before	{border-top: 1px solid #ffffff; display: block; content: ''; width: 100%;}

.panel-container .circle-container	{height:calc(100% + 100px); width: 600px; position: absolute; right: 10%; top:-45px; z-index: 2; content: ''; display: none}
.panel-container .circle-container img	{transition: 20s linear; transform: rotate(0deg);}
.coll-1.video .panel-container:after	{width:600px; height: 595px; right:10%; background-image: url(/_assets/icon-play-big.png); background-position: center; background-size: contain; content: ''; position: absolute; top:-45px;}


.panel-container-image:before	{display:none; transform: rotate(180deg); position: absolute; right: -100%; top: 0; content: ''; opacity: 0; width: 100%; height: 100%; background: rgb(21,14,45); background: linear-gradient(75deg, rgba(21,14,45,1) 0%, rgba(0,0,0,0.7) 20%, rgba(37,9,33,0.5) 50%, rgba(0,0,0,0) 100%); z-index: 1; transition: 0.5s ease-out;}

/* ODD/EVEN COUNT */
.listing .coll-1        {margin: 20px 0}
.listing .coll-1:nth-child(odd) .panel-container-inner				{flex-direction: row-reverse;}
.listing .coll-1:nth-child(odd) .panel-container .circle-container	{left: 10%; right: auto;}
.listing .coll-1:nth-child(odd) .panel-container:after				{left: 10%; right: auto;}
.listing .coll-1:nth-child(odd) .panel-container .panel-container-image:before			{left: -100%; right: auto; transform: rotate(0deg);}
.listing .coll-1:nth-child(odd) .panel-container:hover .panel-container-image:before	{left: 0%; opacity: 1}

.listing .coll-1:nth-child(odd) .panel-container			{position: relative;}
.listing .coll-1:nth-child(odd) .panel-container:after	{position: absolute; left: auto; right: 0; top: 0; height: 100%; background: rgb(0,0,0); background: linear-gradient(-90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); content: ''; width: 70%}

.listing .coll-1:nth-child(even) .panel-container			{position: relative;}
.listing .coll-1:nth-child(even) .panel-container:after	{position: absolute; left: auto; left: 0; top: 0; height: 100%; background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%); content: ''; width: 70%}


/* PANEL HOVERS */
.panel-container:hover .circle-container img			{transform: rotate(359.99deg);}
.panel-container:hover .panel-container-image-inner		{transform: scale(1);}
.panel-container:hover .line-button span				{margin-right: 0}
.panel-container:hover .panel-container-image:before	{right: 0; opacity: 1}

/* DARK LISTING */
.coll-1.dark .panel-container-text h2,
.coll-1.dark .panel-container-text p,
.coll-1.dark .panel-container-text p.tag,	
.coll-1.dark .panel-container .line-button {color:#373741}
.coll-1.dark .panel-container .line-button:before	{border-color:#373741}
.coll-1.dark .panel-container svg path	{fill:#373741}

.coll-1.dark .panel-container-image:before	{background: rgb(21,14,45); background: linear-gradient(75deg, rgba(21,14,45,1) 0%, rgba(0,0,0,0.5) 20%, rgba(37,9,33,0.3) 50%, rgba(0,0,0,0) 100%);}

/* ARTICLE PAGE */
.article-page .article-top						{text-align: center; padding-top:60px}
.article-page .article-top h1					{font-size: 68px; text-shadow: 0 3px 6px rgba(0,0,0,.75); width: 800px; max-width: 100%; margin:0 auto 0.5em auto; line-height: 1em !important}
.article-page .article-top p					{font-size: 30px; text-shadow: 0 3px 6px rgba(0,0,0,.75); color: #ffffff; line-height: 1.3em}
.article-page .article-top 						{padding-bottom: 120px;}
.article-page .article-top .article-top-text	{width: 100%; max-width: 820px;}

.article-page .main-article-content .inner p	{line-height: 1.8em}
.article-page h2								{font-size: 40px; font-family: 'Playfair Display', serif !important; font-weight: 700; margin:1em 0 0.75em}
.article-page a									{color:rgb(227, 115, 26); text-decoration: underline}
.article-page a:hover 							{color: #373741}

.first-character {float: left; font-size: 70px; line-height: 65px; position: relative; top: 0; padding-right: 13px; padding-left: 0; font-family: 'Playfair Display', serif; font-weight: 700;}

.home-icon						{position: fixed; left: 0; top:108px; padding: 10px 15px; transition: 0.2s cubic-bezier(0.65, 0, 0.35, 1); z-index: 20; background-color: rgba(0,0,0,0.4)}
.home-icon:hover				{padding-left: 25px;}
.home-icon svg					{width:20px; height: auto}
.home-icon svg .cls-1			{fill:#ffffff}

.article-top				{background-size: cover; background-position: left top; padding-bottom: 100px; position: relative; overflow: hidden}
.article-top-inner			{display: flex; align-items: center; justify-content: center; position: relative; z-index: 5}
.article-top-inner img		{width:550px; height: auto}
.article-top-inner p.tag	{font-size: 16px; color:#ffffff; text-transform: uppercase; font-weight: 300 !important}
.article-top-inner h1		{font-size: 80px; color:#ffffff; line-height: 0.9em !important; margin: 0.3em 0}
.article-top-text			{width:535px;}
.article-top-text p.intro	{font-size: 28px; color:#ffffff; line-height: 1.3em;}
.article-top:after			{position: absolute; left: 0; top:0; width:100%; height: 100%; content: ''; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%); z-index: 0; mix-blend-mode: multiply;}

.inner-standfirst					{margin: auto;}
.blockquote-container				{position: relative; margin:100px 0 80px 0; text-align: center; border-top:1px solid rgb(227, 115, 26);}
.blockquote-container:before		{width: 145px; height: 53px; content: ''; background-color: #ffffff; background-repeat: no-repeat; background-image: url(/_assets/icon-quote.jpg); background-size: 74px auto; background-position: center; position: absolute; left: 50%; transform: translateX(-50%); top: -26px;}
.blockquote-container blockquote	{padding: 40px 50px 40px; border-bottom: 1px solid rgb(227, 115, 26);}
.blockquote-container blockquote p	{font-family: 'Playfair Display', serif !important; font-size: 30px !important; margin-bottom: 0 !important; line-height: 1.3em !important}
.blockquote-container cite			{display: block; font-style: normal; margin: 20px auto 0; font-size: 12px; width: 200px; line-height: 1.3em !important}

.article-page .article-top h1		{animation: 0.75s header-in ease-in-out 0.5s forwards; opacity: 0}
.article-page .article-top p		{animation: 0.75s header-in ease-in-out 1s forwards; opacity: 0}

@keyframes header-in {
	
	0%		{opacity: 0; transform: translateY(40px);}
	100%	{opacity: 1; transform: translateY(0px);}
	
}

/* RELATED ARTICLES */
.related-articles								{background-color:#F8F8F8; padding-top: 130px; padding-bottom: 60px;}
.related-articles h3							{display: block; text-align: center; font-size: 50px; color:#373741; margin-bottom: 1em}
.related-articles .panel-container				{display: flex; min-height: unset; width:800px; max-width: 100%; margin: auto; align-items: center; margin-bottom: 50px;}
.related-articles .panel-container:last-child	{margin-bottom: 0}
.related-articles .panel-container:before		{display: none}
.related-articles .panel-container-image		{width:375px; min-height: 375px; position: relative; left: auto; top:auto; height: auto; flex-shrink: 0}
.related-articles .panel-container-text			{min-height: unset; padding-left: 50px;}
.related-articles .panel-container-text h2		{font-size: 35px; line-height: 1.1em; color:#373741}
#content .related-articles .panel-container-text p		{font-size: 17px; color:#373741}
.related-articles .panel-container-text p.tag	{font-size: 14px; color:#373741}
.related-articles .line-button span				{color:#373741; font-size: 18px;}
.related-articles .panel-container .line-button:before	{border-color:#373741;}
.related-articles .panel-container .line-button svg			{width:8px; height: auto}
.related-articles .panel-container .line-button svg	path	{fill:#373741;}

/* VIDEO */
.video-top			{background-size: cover; background-position: center; padding-top: 60px; padding-bottom: 100px; position: relative;}
.video-top p.tag	{font-size: 16px; text-transform: uppercase; color:#ffffff; margin-bottom: 20px;}
.video-top h1		{color:#ffffff; font-size: 60px; margin-bottom: 0.2em}
.video-top p.intro	{font-size: 24px; color:#ffffff; line-height: 1.3em;}

.inner-standfirst,
.video-top .inner	{width:860px; max-width: 100%; padding: 0 30px; position: relative; z-index: 5}

.video-top:after	{position: absolute; left: 0; top:0; width:100%; height: 100%; content: ''; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.9) 100%); opacity: 0.5;}
.video-top:before	{position: absolute; left: 0; top:0; width:100%; height: 100%; background-image: url(/_assets/circle-largest.png); content: ''; background-size: cover; background-position: center; opacity: 0.1}

.video-top:after	{animation: slow-fade 5s linear forwards 1s;}

@keyframes slow-fade {
	to {opacity: 1}
}

.video-outer-container			{width:952px; max-width: 100%; margin:30px auto 40px; box-shadow: 0 0 30px rgba(0,0,0,0.5); position: relative; z-index: 5}
.video-container 				{position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.video-container iframe,
.video-container object,
.video-container embed,
.video-container video			{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.intro-text	p {font-size: 22px; color:#ffffff; line-height: 1.5em; font-weight: 300 !important}

span.fc	{font-family: 'Playfair Display', serif; color: #ffffff; float: left; line-height: 0; padding:60px 21px 85px 0; font-size: 168px; font-weight: 700;}

.main-article-content		{position: relative; min-height: 350px;}
.main-article-top			{width:1012px; min-height: 377px; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); background-color: #ffffff; z-index: 5}
.main-article-top-white		{width:100%; height: 100%; background-color: #ffffff; position: absolute; left: 0; top:0; z-index: 1}
.main-article-top:before	{width:98px; height: 376px; position: absolute; left: -45px; top:0px; content: ''; background-image: url(/_assets/shadow.png); z-index: 0}
.main-article-top:after		{width:98px; height: 376px; position: absolute; right: -45px; top:0px; content: ''; background-image: url(/_assets/shadow.png); z-index: 0; transform: rotate(180deg )}
.main-article-bottom		{width:1012px; min-height: 180px; position: absolute; bottom: -80px; left: 50%; transform: translateX(-50%); background-color: #ffffff;}

.main-article-content .inner	{position: relative; z-index: 10; width:860px; max-width: 100%; padding-left: 30px; padding-right: 30px;}
.main-article-content .inner p	{font-size: 20px; line-height: 1.6em; margin-bottom: 1.2em;}

.main-article-content-video								{min-height: unset;}
.main-article-content-video .main-article-top			{min-height: unset; padding-top: 40px; padding-bottom: 40px; box-shadow: 0 0 30px rgba(0,0,0,0.2); position: relative;}
.main-article-content-video .main-article-top:before,
.main-article-content-video .main-article-top:after		{display: none}

/* FOOTER */
footer.jpm-footer .inner				{width:1346px; max-width: 100%; padding-left: 20px; padding-right: 20px; display: flex; justify-content: space-between; align-items: center;}
footer.jpm-footer .inner p				{color:#373741; font-weight: 300 !important}
footer.jpm-footer .footer-top 			{background-color:#383741; padding: 60px 0;}
footer.jpm-footer .footer-top .inner	{display: flex; justify-content: center;}
.social-lockup 							{display: flex; align-items: center}
.social-lockup span						{text-align: right; color:#ffffff; text-transform: uppercase; display: block; font-size: 20px; font-weight: 300; line-height: 1.2em; margin-right: 20px;}
.social-link							{width:62px; height: 62px; border:1px solid #ffffff; display: flex; align-items: center; justify-content: center; transition: 0.2s ease-out}
.social-link svg						{width: 25px; height: auto; transition: 0.2s ease-out}
.social-link path						{fill:#ffffff}
.social-link:hover 						{background-color: #ffffff;}
.social-link:hover path					{fill:#383741}

.footer-bottom							{padding: 50px 0; text-align: center}
footer.jpm-footer .footer-bottom .inner					{justify-content: center}

/* IE FIXES */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
	

	
	
	
}



#pmLink     {visibility: hidden}

