﻿@media (max-width: 1300px) 
{
	.panel-container .circle-container 	{right: 3%;}
    
    /*
	.listing .coll-1:nth-child(odd) .panel-container .circle-container	{left: 3%}
	.listing .coll-1:nth-child(odd) .panel-container:after	{left: 3%}
	.listing .coll-1:nth-child(1) .panel-container:after	{left: auto}
	*/
}

@media (max-width: 1170px) 
{
	/* ARTICLE PAGE */
	.article-top-inner img		{width:50%;}
	.article-top-text			{width:50%;}
	.article-top-text h1		{font-size: 7.5vw;}
	.article-top-text p.intro	{font-size:2.3vw}
}

@media (max-width: 1100px) 
{
	/* HOME LISTING */
	.panel-container .circle-container		{right: -5%; height: 100%; top:0;}
	.panel-container .circle-container img	{width: auto; height: 100%;}
	.circle-container	{display: flex; justify-content: flex-end}
	
    /*
	.listing .coll-1:nth-child(odd) .panel-container .circle-container	{left: -5%; width:522px; justify-content: flex-start}
	.listing .coll-1:nth-child(odd) .panel-container:after	{left: -5%; width:50vw}
	.listing .coll-1:nth-child(1) .panel-container:after	{left: auto; width: 80%}
    */
}

@media (max-width: 1050px) 
{
	/* VIDEO */
	.main-article-top:before,
	.main-article-top:after	{display: none}
	.main-article-bottom,
	.main-article-top		{top:-40px; width:calc(100% - 30px);}
	.main-article-bottom	{bottom: -40px;}
	
	.listing .coll-1:nth-child(1) .panel-container:after	{left: auto}

}


@media (max-width: 1000px) 
{
	/* VIDEO */
	.video-top h1		{font-size: 42px; margin-bottom: 0.4em}
	.video-top .inner	{text-align: center}
	.video-top p.intro	{font-size: 20px; width:550px; max-width: 100%; margin: auto}
	.intro-text			{text-align: left}
	.intro-text	 p		{font-size: 17px;}
	span.fc				{font-size: 108px; padding: 43px 21px 38px 0;}
	.video-top:after	{background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.9) 100%); opacity: 0.65}
	.video-top:before	{background-image: url(/_assets/circle-large-full.png); background-size: 150% auto; background-position: top center; opacity: 0.3; background-repeat: no-repeat;}
	.main-article-content .inner p	{font-size: 17px;}
	
	.related-articles .inner,
	.video-top .inner,
	.main-article-content .inner	{padding: 0 50px;}
	
	/* RELATED ARTICLES */
	.related-articles							{padding-top: 100px;}
	.related-articles h3						{font-size: 44px;}
	.related-articles .panel-container			{align-items: flex-start}
	.related-articles .panel-container-image	{width:40%; min-height: 32vw;}
	.related-articles .panel-container-text		{width:60%; padding-top: 0; padding-bottom: 0; padding-left: 30px;}		
	
}

@media (max-width: 930px) 
{
	.listing .panel-container .circle-container	{right: -110px;}
	.listing .coll-1:nth-child(odd) .panel-container .circle-container	{left: -110px;}
}

@media (max-width: 915px) 
{
	/* FT */
	.pc__client-title	{font-size: 16px;}
}

@media (max-width: 860px) 
{
	/* FT */
	.listing .coll-1:nth-child(odd) .panel-container .circle-container	{left: -150px;}
}

@media (max-width: 768px) 
{
	.article-page .article-top		{padding: 0; min-height: 400px; display: flex; align-items: center}
	.article-page .article-top h1	{font-size: 36px;}
	.article-page .article-top p	{font-size: 20px;}
	

}

@media (max-width: 767px) 
{
    	.listing .coll-1 .panel-container:after	{display: none !important}

    
	.home-icon		{top:118px; padding: 7px 11px;}
	.home-icon svg	{width:15px;}
	
	/* HOME LISTING */
	.listing 							{}
	.listing .panel-container			{min-height: unset; flex-direction: column;}
	.listing .panel-container-image		{height: 440px; position: relative}
	.listing .panel-container .circle-container	{height: 540px !important; width: 540px !important; left: 50% !important; right: auto !important; margin-left: -270px !important; top:-45px !important}
	.listing .panel-container-inner		{background-color:#ffffff; z-index: 5; position: relative; width:100%; justify-content: center; background: rgb(231,231,231); background: linear-gradient(0deg, rgba(231,231,231,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);}
	.listing .panel-container-text		{min-height: unset; padding: 40px 0 55px;}
	.listing .panel-container-text p	{width:100%;}
	
	.listing .panel-container-text h2,
	.listing .panel-container-text p,
	.listing .panel-container-text p.tag,	
	.listing .panel-container .line-button 			{color:#373741 !important}
	.listing .panel-container .line-button:before	{border-color:#373741 !important}
	.listing .panel-container svg path				{fill:#373741 !important}
	
	.listing .coll-1.video .panel-container:after	{width:540px; height: 540px; left: 50% !important; margin-left: -270px;}
	
	.listing .coll-1				{position: relative;}
	.listing .coll-1:nth-child(1)	{z-index: 11}
	.listing .coll-1:nth-child(2)	{z-index: 12}
	.listing .coll-1:nth-child(3)	{z-index: 13}
	.listing .coll-1:nth-child(4)	{z-index: 14}
	.listing .coll-1:nth-child(5)	{z-index: 15}
	.listing .coll-1:nth-child(6)	{z-index: 16}
	.listing .coll-1:nth-child(7)	{z-index: 17}
	.listing .coll-1:nth-child(8)	{z-index: 18}
	.listing .coll-1:nth-child(9)	{z-index: 19}
	.listing .coll-1:nth-child(10)	{z-index: 20}
	
	/* ARTICLE PAGE */
	.article-top			{text-align: center; background-position: center;}
	.article-top h1			{font-size: 42px; margin: 0.5em 0; line-height: 1em !important;}
	.article-top p.intro	{font-size: 22px; width:550px; max-width: 100%; margin:0 auto 1em}
	.article-top p.tag		{font-size: 14px;}
	.article-top-inner		{flex-direction: column;}
	.article-top-inner img	{width:500px; max-width: 100%; margin-bottom: -100px;}
	.article-top-text		{width:100%; margin-bottom: 30px;}
	
	/* RELATED CONTENT */
	.related-articles							{padding-top: 70px;}
	.related-articles .panel-container-text p	{font-size: 15px;}
	.related-articles .panel-container-text h2	{font-size: 35px;}

	/* FOOTER */
	footer.jpm-footer .inner	{flex-direction: column}
	footer.jpm-footer .logo-lockup	{margin-bottom: 25px;}
}

@media (max-width: 600px) 
{
	/* HERO CONTAINER */
	.home-hero-container		{}
	.home-hero-text				{width:375px; max-width: 100%;}
	.home-hero-text h1			{font-size: 45px; width: 300px; max-width: 100%;}
	#content .home-hero-text p	{font-size: 18px;}
	.home-hero-container .circle-graphic-large	{width: 800px; height: 800px; right: -370px; top: -210px;}
}
	
@media (max-width: 500px) 
{
	/* FT WRAPPER */
	.pc__client-title	{font-size: 14px;}
	.pc__title			{flex-basis: 100%; max-width: 100%;}
	
	/* RELATED CONTENT */
	.related-articles h3 {font-size: 32px;}
	.related-articles .panel-container-text p		{display: none}
	.related-articles .panel-container-text p.tag	{display: block}
	.related-articles .panel-container-text h2		{font-size: 18px; line-height: 1.3em;}
	.related-articles .panel-container				{align-items: center;}
	.related-articles .panel-container .line-button span	{font-size: 14px; margin-left: 0; letter-spacing: 0.5px;}
	.related-articles .panel-container .line-button:before	{display: none}
	.related-articles .panel-container .line-button			{justify-content: flex-start}
	.related-articles .panel-container-text					{padding-left: 20px;}
	
	.panel-container-text h2	{font-size: 40px; line-height: 1.1em}
	
	/* ARTICLE */
	.article-top	{padding-bottom: 70px;}
	
	/* VIDEO */
	.video-outer-container			{margin-top: 15px;}
	.video-top						{padding-bottom: 60px;}
	.related-articles .inner		{padding: 0 25px;}
	.related-articles .panel-container-text h2	{margin-bottom: 0.65em;}
	.video-top .inner,
	.main-article-content .inner	{padding: 0 40px; transform: translateY(-15px);}
	
	.main-article-top		{min-height: unset}
	.main-article-content	{min-height: unset}
	
	.video-top h1			{font-size: 32px;}
	
	.main-article-content-video .main-article-top	{padding-bottom: 10px;}
	
	/* FOOTER */
	footer.jpm-footer .inner p	{font-size: 14px; display: block; text-align: center}
	.social-lockup span			{font-size: 16px;}
	.social-link				{width: 52px; height: 52px;}
	.social-link svg			{width: 20px; height: auto;}
}

@media (max-width: 414px) 
{
	/* HOME LISTING */
	.panel-container-text h2				{font-size: 40px;}
	.panel-container-text p					{font-size: 16px;}
	.panel-container .line-button span		{font-size: 16px;}
	.panel-container .line-button span svg 	{margin-left: 10px; width: auto; height: 14px;}
}

@media (max-width: 360px) 
{
	/* FOOTER */
	footer.jpm-footer .inner p	{font-size: 12px;}
	.social-lockup span			{font-size: 14px;}
	.social-link				{width: 42px; height: 42px;}
}