﻿.lottie-mb	{display: none}

@media (max-width: 1620px) 
{	
	
	.funnel-animation-container .pullout			{width: 19vw; margin-left: 7vw;}
	.funnel-animation-container .pullout .big-bold	{font-size: 6vw;}
	.funnel-animation-container .pullout p			{font-size: 2.2vw}
	.ia--animation-section-4 .circle-1 #lottie5		{position: relative; z-index: 2}
	.ia--animation-section-4 .article-inner			{position: relative; z-index: 2}
	
	.ia--animation-section-3 #lottie4    {width: 23vw; left: 0; margin-left: 0; z-index: 0; bottom: auto; top: 611px;}
}

@media (max-width: 1550px) 
{
	.ia--animation-3-container			 {right: -50px; margin-right: 0}
	.ia--animation-3-container .circle-4 {width: 35vw; height: 35vw;}
	.ia--animation-3-text-quote .article-inner p	{width: 40vw}
	
	.ia--animation-3-container .circle-4 .pullout .big-bold {font-size: 7vw}
	.ia--animation-3-container .circle-4 .pullout p			{font-size: 2.3vw;}
	.ia--animation-3-container .circle-4 .pullout span 		{font-size: 4.5vw}
}

@media (max-width: 1470px) 
{
	.funnel-animation-container	.blockquote-section .mb-medium	{margin-bottom: 0 !important}
	.funnel-animation-container	.blockquote-section .inner	{justify-content: flex-start; left: 0}
	.funnel-animation-container .pullout					{margin-left: 0;}
	.funnel-animation-container .blockquote-container		{width: 54vw;}
	.ia--animation-section-4 .article-inner	p				{width: 47vw}
	
	.journey-container	{text-align: center;}
	
	.aa1-animation-4 .article-inner			{position: static}
	.aa1-animation-4 .journey-container 	{width:414px; margin-left: 0; left: 0}
	.aa1-animation-4 .journey-container img	{width: 414px;}
	
}

@media (max-width: 1375px) 
{
	.article-hero .panel-container h1		{font-size: 6.5vw}
	.article-hero .panel-container h2		{font-size: 5vw}
	
	
	.ia--animation-3-container						{right: 0; top: 445px;}
	.ia--animation-3-text-quote .article-inner .article-inner			{width: 54vw}
	.ia--animation-3-container .circle-4 .pullout 	{width: calc(100% - 130px);}
	
	.aa1-animation-3.aa-section	.stat p	{width: 27vw}
	
	.aa1-animation-3 .whiteboard-container	{margin-right: 0; right: 20px;}
	
}
	

@media (max-width: 1300px) 
{
	.listing				{overflow: hidden; padding-top: 32vw}
	
	.home-hero-text h1		{font-size: 9.5vw}
	.home-hero-text h1 span	{font-size: 9.5vw}
	.home-hero-text-inner	{width: 90vw;}

	.panel-container-text-outer		{padding: 0 0 40px}
	.panel-container-text h2		{font-size: 8vw;}
	.panel-container-text h3	{font-size: 4vw}
	.panel-container-text p			{font-size: 18px; max-width: 100%}
	
	.panel-container-cols			{min-height: unset; padding: 40px 0 0}
	
	.panel-container .cloud-image	{width: 60vw}
	
	/* VARIATIONS */
	.listing-inner .panel-container:first-child .panel-image-container	{margin-bottom: 0; transform: none}
	
	.panel-container.green .panel-shape-container	{transform: translateX(0px);}
	
	/**************/
	/* IMMERSIVE */
	.ia-animation-container-1	{width: 460px; height: 460px;}
	
	/* ANIMATED ARTICLES */
	.aa1-animation-4 .pullquote	{margin-left: auto}
	
}

@media (max-width: 1260px) 
{
	.ia--animation-section-4 .article-inner				{z-index: 5; background-color: #ffffff}
	.ia--animation-section-4 .article-inner	p			{width: 100%}
	.ia--animation-section-4 .circle-1-container		{position: relative; display: block; width: 960px; max-width: 100%; margin: 40px auto 0}
	.ia--animation-section-4 .circle-1-container:before	{width: 300px; height: 300px; border-radius: 250px; border: 1px solid var(--primaryYellow); content: ''; position: absolute; left: 0; top: 0; z-index: 0}
	.ia--animation-section-4 .circle-1-container:after	{width: 350px; height: 350px; border-radius: 350px; border: 1px solid var(--primaryYellow); content: ''; position: absolute; right: 0; bottom: 0; z-index: 0}

	.ia--animation-section-4 .circle-1					{position: relative; margin: 0 auto; right: auto; top: auto; margin-bottom: 70px; margin-top: 40px; width: 500px; height: 500px; background-color: #ffffff; z-index: 2}
	.funnel-animation-container .pullout				{width: 280px; max-width: 100%; margin-top: 15px; margin-left: 45px}
	.funnel-animation-container .pullout .big-bold		{font-size: 80px}
	.funnel-animation-container .pullout p				{font-size: 30px}
	.ia--animation-section-4 .circle-1 #lottie5			{margin-top: -150px; z-index: 1;}
	.funnel-animation-container .blockquote-container	{width: 817px; max-width: 100%}
	
}

@media (max-width: 1220px) 
{
	.blockquote-section .inner			{left: auto; justify-content: flex-start}
	.blockquote-section.flipped .inner	{justify-content: center}
	
	/* IMMERSIVE */
	.ia--animation-section-2 .article-inner-inner	{width: 100%;}
	
	.ia--animation-section-2						{min-height: unset}
	.ia--animation-2-container						{margin-top: 50px;}
	.ia--animation-2-container .inner				{display: flex; align-items: center; padding: 0}
	.ia--animation-2-container .circle-1			{top: -20px}
	.ia--animation-2-container .circle-2			{position: relative; left: auto; top: auto;}
	.ia--animation-2-container .circle-2 #lottie2 	{width: 670px;left: -35px;top: -20px;}
	.ia--animation-2-container .circle-3			{display: none}
	.ia--animation-2-container .line-text			{width: auto; flex: 1; position: relative; top: auto; left: auto}
	.ia--animation-2-container .line-text-inner		{width: 360px; max-width: 100%; margin-right: 50px;}

	.handshake-container	{margin-right: 0; right: 0}
	
}

@media (max-width: 1160px) 
{
	.panel-container-text-outer							{width: 45% !important; flex-shrink: 0}
	.panel-container .panel-image-container				{width: 55% !important; transform: none !important; margin: 0 !important}
	.panel-container .panel-container-text h3		{width: 400px !important; max-width: 100% !important;}
	.panel-container .panel-container-text p			{font-size: 16px;}
	
	.panel-container.yellow	.panel-container-text h2 	{width: 530px;}	
	
	.panel-container .cloud-image						{width: 57vw}
	
	/* IMMERSIVE */
	.section-heading .inner	{display: flex; padding: 0 30px}
	.section-heading h2	{font-size: 60px;}
	
	.ia--animation-section-1 .blockquote-section	{margin-bottom: 50px}
	.ia--animation-section-1 .article-inner-inner	{width: 32vw}
	.ia-animation-container-1						{bottom: 50px}
	
	.blockquote-section.flipped,
	.aa-blockquote-section.aa-blockquote-section-with-person .blockquote-section.flipped	{width: 100%}
	.blockquote-section.flipped,
	.blockquote-section.flipped .inner			{transform: translateX(0)}
	.blockquote-section.flipped .inner			{justify-content: flex-start;}
	.blockquote-section.flipped .person-outer	{margin-right: 0}
	
	.ia--animation-section-2						{margin-top: 50px; margin-bottom: 50px;}
	.ia--animation-2-container .line-text-inner		{margin-right: 0}
	.ia--animation-2-container .circle-2			{width: 50vw; height: 50vw}
	.ia--animation-2-container .circle-2 #lottie2	{height: auto; left: 50%; margin-left: -30.5vw; width: 65vw; top: 2vw;}
	.ia--animation-2-container .line-text			{height: auto}
	.ia--animation-2-container .line-text-inner		{width: 35vw}
	.ia--animation-2-container .pullout .big-bold	{font-size: 120px;}
	.ia--animation-2-container .pullout p			{font-size: 30px; margin-bottom: 0;}
	
	.related-articles .panel-container-text-outer	{width: 100% !important;}
	.related-articles .panel-arrow-circle			{width: 50px; height: 50px;}
	.related-articles .panel-arrow-circle svg		{width: 20px;}
	.related-articles .panel-container-text			{padding: 30px;}
	.related-articles .panel-container-cols			{padding-top: 0}
	.related-articles h3							{font-size: 10vw}

	/*********** ANIMATED ARTICLES **************/
	.aa-blockquote-section.aa-blockquote-section-with-person .blockquote-section.flipped	{transform: translateX(0)}
	
	.handshake-container .circle	{width: 200px; height: 200px; margin-left: -100px;}
	.handshake-container 			{width: 306px; height: 200px;}
	
	.blockquote-section.no-person .inner	{justify-content: center}
	
	/* ANIMATED ARTICE 2 */
	.aa2-animation-3 .article-inner	{position: static}
	.animation-3-table				{right: 20px;}
	.aa2-animation-3 .circle.yellow	{left: 20px}
	.aa2-animation-3 .circle.green	{left: 100px}
	
}

@media (max-width: 1120px) 
{
	/*********** ANIMATED ARTICLES **************/
	.aa1-animation-1 #lottie1, .aa1-animation-3 #lottie2	{left: 0; margin-left: 0}
	
	.aa1-animation-2-circles				{position: absolute; left: 0; width: 100%; height: 100%; top: 0}
	.aa1-animation-2-circles .circle.binary	{left: -100px; top: 0; margin: 0}
	.aa1-animation-2 .circle.pink			{left: -150px;}
	.aa1-animation-2 .circle.yellow			{left: -80px; bottom: 0; top: auto}
	.aa1-animation-2 .stat					{position: relative; z-index: 3}
	
	.aa1-animation-4 .pullquote	{width: 38vw}
	
}

@media (max-width: 1060px) 
{
	.person-outer						{width: 158px; margin-right: -60px;}
	.person-overflow-hidden 			{width: 158px; height: 200px;}
	.person-circle						{width: 158px; height: 158px; border-radius: 158px;}
	#content .blockquote-container h3	{font-size: 26px;}
	.blockquote-container p				{font-size: 20px;}
	.blockquote-container cite			{font-size: 14px;}
	
	.blockquote-section.flipped .person-outer	{margin-left: -60px;}
	
	/*********** ANIMATED ARTICLES **************/
	.aa1-animation-1 #lottie1,
	.aa1-animation-3 #lottie2				{width: 290px; height: auto}
	.aa1-animation-3 .whiteboard-container	{width: 300px;}
	.aa1-animation-3.aa-section .stat p		{width: 32vw;}
	
	/* ANIMATED ARTICLE 2 */
	.animation-3-table img	{width: 420px;}
}

@media (max-width: 1000px) 
{
	.panel-container .panel-container-text h2			{font-size: 54px;}
	.panel-container .panel-container-text h3		{font-size: 35px; width: auto !important; max-width: 100%;}
	.panel-container .panel-container-text p			{width: 90% !important}
	.panel-container svg								{width: 55px; height: auto}
	
	.panel-container.yellow .panel-container-text h2	{width: 100% !important}
	
	/* ARTICLE */
	.article-hero .panel-container h1		{font-size: 6.5vw}
	.article-hero .panel-container h2	{font-size: 5vw}
	.article-hero .panel-container h2		{font-size: 30px}
	.yellow .article-hero .panel-container h1,		
	.yellow .article-hero .panel-container h2	{width: auto}
	.pink .article-hero .panel-shape-container	{right: 50px;}
}

@media (max-width: 980px) 
{
	/* IMMERSIVE */
	.ia-animation-container-1			{width: 400px; height: 400px; bottom: 10%}
	.ia--animation-section-1 .circle-1	{top: 110px;}
	.ia-animation-container-1 #lottie1 	{left: 37px; top: 26px;}
	
	.ia--animation-section-3 #lottie4	{position: relative; width: 414px; max-width: 100%; left: auto; top: auto; margin: 0 auto -100px;}
	
	.ia--animation-3-text-quote						{display: flex; flex-direction: row-reverse; align-items: center; padding-right: 30px;}
	.ia--animation-3-text-quote	.article-inner		{width: 70%;}
	.ia--animation-3-text-quote	.article-inner p	{width: 100%;}
	.ia--animation-3-container						{position: relative; right: auto; top: auto}
	
	.ia--animation-section-5 .circle-1,
	.ia--animation-section-5 .circle-2	{display: none}
}

@media (max-width: 900px) 
{
	.ia--animation-3-text-quote	{flex-direction: column}
	.ia--animation-3-container	{margin-bottom: 50px;}
	.ia--animation-3-container .circle-4	{width: 414px; height: 414px; text-align: center}
	.ia--animation-3-container .circle-4 .pullout .big-bold	{font-size: 10vw}
	.ia--animation-3-container .circle-4 .pullout p			{font-size: 3.5vw}
	.ia--animation-3-text-quote .article-inner,
	.ia--animation-3-text-quote .article-inner p			{width: 100%;}
	
	.related-articles .cols				{flex-direction: column; align-items: center; padding: 30px;}
	.related-articles .panel-container	{width: 500px; max-width: 100%;}
	.related-articles .panel-container:last-child	{margin-top: 40px;}
	
	/*********** ANIMATED ARTICLES **************/
	.aa-section,
	.aa1-animation-3.aa-section								{display: flex; overflow: visible}
	
	.aa1-animation-1 .article-inner,
	.aa1-animation-2 .article-inner,
	.aa1-animation-3 .article-inner,
	.aa1-animation-4 .article-inner,
	.aa2-animation-1 .article-inner,
	.aa2-animation-2 .article-inner,
	.aa2-animation-3 .article-inner		{flex-direction: column; width: 414px;}
	
	.aa1-animation-1 #lottie1, .aa1-animation-3 #lottie2	{position: relative; top: auto; left: auto; margin: 0}
	
	.aa-section .bg-pattern,
	.bg-pattern	{flex-shrink: 0; flex: 1}
	
	/* ANIMATION 1 */
	.aa-section .stat			{width: 100%; margin:40px 0; text-align: center}
	.handshake-container		{position: relative; top: auto;}
	.aa1-animation-1 #lottie1,
	.aa1-animation-3 #lottie2	{margin-top: -40px; width: 100%; height: auto}
	.handshake-container		{margin-bottom: -40px;}
	
	/* ANIMATION 2 */
	.aa1-animation-2-circles		{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; margin-top: -40px; margin-bottom: 40px;}
	.aa1-animation-2 .aa1-animation-2-circles .circle.binary	{position: relative; left: auto; top: auto; flex-shrink: 0}
	.aa1-animation-2 .circle.pink	{width:200px; height: 200px; left: auto; right: -20px; top: 20px}
	.aa1-animation-2 .circle.yellow	{left: 20px;}
	.aa1-animation-2 .article-inner .stat		{padding-bottom: 30px;}
	.aa1-animation-2 .article-inner .stat h3	{font-size: 70px; margin-bottom: 0.2em;}
	.aa1-animation-2 .article-inner .stat p		{font-size: 35px;}
	
	/* ANIMATION 3 */
	.aa1-animation-3.aa-section .stat p		{width: 100%}
	.aa1-animation-3 .whiteboard-container	{position: relative; width: 100%}
	.aa1-animation-3 .whiteboard-container #lottie3	{width: 100%; height: auto}
	
	/* ANIMATION 4 */
	.aa1-animation-3 .whiteboard-container	{right: 0}
	.aa1-animation-4 .article-inner			{flex-direction: column-reverse; padding: 40px 0 0}
	.aa1-animation-4 .pullquote p			{line-height: 1em; font-size: 48px;}
	.aa1-animation-4 .journey-container		{position: relative; left: auto; margin-top: 60px;}
	
	
	/* ANIMATED ARTICLE 2 */
	.aa2-animation-3 .circle.green	{display: none}
	.aa2-animation-3 .circle.yellow	{display: none}
	.aa2-animation-3 p	{text-align: center}
	.animation-3-table	{position: relative; right: auto; top: auto; width: 100%;}
	.animation-3-table	{margin-top: 40px;}
	.animation-3-table .circle.yellow	{width: 340px; height: 340px; left: 0; display: block}
	
	.aa2-animation-1 .article-inner	{justify-content: center}
	.aa-section.aa2-animation-1		{min-height: 360px;}
	
	.aa-section.aa2-animation-2				{overflow: hidden}
	.aa-section.aa2-animation-2 #lottie2	{align-items: center; width: 320px; max-width: 100%;}
	.aa2-animation-2 .circle.pink			{left: -60px;}
	.aa2-animation-2 .circle.yellow			{right: -60px;}
	.aa2-animation-2 .circle.green			{left: -20px}
	
	.aa2-animation-2 .article-inner	{align-items: center}


}

@media (max-width: 768px) 
{
	.home-hero-text										{}
	.listing .panel-container							{margin-bottom: 30px}
	.panel-container-inner								{padding: 0}
	.panel-container-cols								{flex-direction: column !important; width: 550px; margin: auto; max-width: 100%; padding-top: 50px;}
	.panel-container-text-outer							{width: 100% !important; position: relative; padding: 0; margin-bottom: 40px; padding-left: 30px; padding-right: 70px;}
	.panel-container .panel-container-text p			{width: 100% !important;}
	.panel-container .panel-container-text h3 br	{display: none}
	.panel-container .panel-image-container				{width: 100% !important; min-height: 260px;}
	.panel-container .panel-image-container	img			{width: calc(100% - 60px); margin: 0 auto}
	
	.panel-arrow-circle		{width: 70px; height: 70px;}
	.panel-container svg	{width: 40px;}
	
	.panel-shape-container				{top: auto; bottom: 0; transform: translateX(0) !important; justify-content: center; align-items: flex-end}
	.panel-shape-container .cloud-image	{width: 414px; max-width: 100%}
	
	.listing-inner .panel-container:nth-child(even) .cloud-image,
	.listing .panel-shape-container .cloud-image	{width: 550px; left: 50%; margin-left: -275px;}
	
	/* ARTICLE */
	.article-hero .panel-container-cols				{width: 100%}
	.article-hero .panel-container .panel-arrow-circle svg				{width: 35px}
	.article-hero .panel-container-text-outer		{padding:0 30px;}
	.article-hero .panel-container-text h1 span	br	{display: none}
	
	.article-hero .panel-container h1				{font-size: 10.5vw}
	.article-hero .panel-container h2			{font-size: 7vw}
	
	.article-hero .panel-container .cloud-image	{width: 100%;}

	
	.home-icon				{top: 118px; width: 30px; height: 30px;}
	.home-icon svg			{width: 14px;} 
	.home-icon:hover:after	{left: 40px;}
	
	/* STANDFIRST */
	.standfirst p		{font-size: 22px;}
	.first-character	{font-size: 120px;}
	
	/* VARIATIONS */
	.panel-container.yellow .panel-image-container 			{position: relative; right: auto; bottom: auto}

	.pink .article-hero .panel-image-container				{position: relative; bottom: auto; right: auto}
	
	.panel-container:hover svg	{transform: none}
	
	
	/**************/
	/* IMMERSIVE */
	.section-heading		{margin: 70px 0 50px 0;}
	.section-heading h2		{font-size: 50px;}
	.section-heading h2 br	{display: none}
	.sh-text				{padding: 3px 20px 3px 0; width: 414px; max-width: 100%;}
	
	.blockquote-section					{margin-bottom: 110px;}
	.person-outer						{position: absolute; left: 30px; bottom: -60px;}
	.blockquote-container blockquote	{border-radius: 40px; padding: 40px; width: calc(100% - 60px); margin-left: auto; padding-left: 90px;}
	.blockquote-section .inner			{padding: 0 60px;}
	.blockquote-container:before		{display: none}
	.blockquote-container:after 		{position: absolute; left: 20px; top: -30px; width: calc(100% + 10px);}
	.blockquote-container, .aa-blockquote-section-with-person.aa-blockquote-section .blockquote-container	{margin-bottom: 0}
	
	.ia--animation-section-1 .article-inner-inner	{width: 100%}
	.ia--animation-section-1 .blockquote-section 	{margin-bottom: 110px;}
	.ia-animation-container-1						{position: relative; margin: auto; bottom: auto; max-width: 100%; right: auto; margin-top: 40px}
	.ia--animation-section-1 .circle-1 				{bottom: 0; top: auto;}
	
	.blockquote-section.flipped .person-outer						{left: auto; right: 30px}
	.blockquote-section.flipped  .blockquote-container blockquote	{margin-left: 0; padding: 40px; padding-right: 90px}
	.blockquote-section.flipped .blockquote-container:after			{left: -30px;}
	
	.bg-numbers	.blockquote-section	{margin-bottom: 60px}
	
	.ia--animation-section-4 .circle-1-container:before	{width: 250px; height: 250px; left: 30px; top: 100px;}
	.ia--animation-section-4 .circle-1-container:after	{width: 200px; height: 200px; right: 30px;}

	.ia--animation-3-text-quote	{margin-top: 70px;}
	.ia--animation-section-3 .article-inner,
	.ia--animation-section-3 .article-inner p {width: 100%;}

	.as2-clare.mb-medium	{margin-bottom: 100px !important;}
	.ia--animation-3-text-quote	{padding-right: 0}
	
	.discover-more-container,
	.discover-more-container.discover-more-container-aa	{margin-top: 70px;}
	
	.rocket-animation-container	{width: 50%; z-index: 4; bottom: 280px; height: 700px;}
	
	/*****
	****** ANIMATED ARTICLES **************/
	.aa-blockquote-section	{padding: 70px 0}
	.aa-blockquote-section.aa-blockquote-section-with-person .blockquote-section	{margin-bottom: 50px;}
	
	.aa1-animation-4 .pullquote			{width: 100%; padding: 0 30px; text-align: center}
	.aa1-animation-4 .pullquote:before	{left: -40px; background-size: contain; width: 60px; height: 42px}
	
	.blockquote-section.no-person									{margin-bottom: 0}
	.blockquote-section.no-person .blockquote-container:after		{width: calc(100% + 60px); left: -30px !important;}
	.blockquote-section.no-person .blockquote-container blockquote	{padding: 40px; width: 100%}
}

@media (max-width: 767px) 
{
	.home-hero-text.sticky	{padding: 75px 0 15px;}
	.sticky-header			{padding: 15px; top: 62px;}
}
	
@media (max-width: 700px) 
{
	/** IMMERSIVE **/
	.ia--animation-2-container .inner				{flex-direction: column}
	.ia--animation-2-container .circle-1			{top: 100px; width: 370px; height: 370px;}
	.ia--animation-2-container .circle-2			{width: 80vw; height: 80vw}
	.ia--animation-2-container .circle-2 #lottie2	{margin-left: -48.5vw; width: 105vw;}
	.ia--animation-2-container .line-text			{border: none; margin: -20px auto 0; padding:0 50px; text-align: center; max-width: 500px; position: relative; z-index: 2;}
	.ia--animation-2-container .line-text-inner		{width: 100%; margin: 0; padding: 0;}
}

@media (max-width: 650px) 
{
	.ia--animation-section-4 .circle-1-container:before	{left: 20px; top: 30px;}
	.ia--animation-section-4 .circle-1-container:after	{right: 20px;}
}

@media (max-width: 550px) 
{
	.panel-container svg			{width: 45px;}
	.home-hero-text.sticky h1 span	{font-size: 20px;}
	
	.listing-inner .panel-container:nth-child(even) .cloud-image,
	.listing .panel-shape-container .cloud-image	{width: 100%; left: auto; margin-left: 0;}
	
	/* ARTICLE */
	.article-hero .panel-container h1		{font-size: 60px}
	.article-hero .panel-container h2		{font-size: 40px; margin-top: 0.25em; line-height: 1.1em}
	.article-hero .panel-container h3		{font-size: 20px;}
	
	/* VARIATION */
	.green .article-hero .panel-container:after		{opacity: 0.2}
	
	/* PERSON PULLQUOTES */
	.person-outer						{width: 100%; position: relative; left: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 15px; margin-top: -25px;}
	.person-circle						{width: 118px; height: 118px;}
	.person-overflow-hidden				{width: 118px; height: 143px; flex-shrink: 0;}
	.icon-audio							{width: 40px; bottom: 0}
	.blockquote-container blockquote	{width: 100%; margin-left: 0; padding: 40px;}
	.blockquote-section .inner			{flex-direction: column-reverse; padding: 0 30px; align-items: flex-start}
	.blockquote-container:after 		{left: -20px; top: -20px; width: calc(100% + 40px); height: calc(100% + 40px);}
	
	.blockquote-section.flipped .inner,
	.aa-blockquote-section.aa-blockquote-section-with-person .blockquote-section.flipped	{flex-direction: column-reverse}
	.blockquote-section.flipped .person-outer 	{left: auto; right: auto; margin: 0; margin-top: -25px;}
	.blockquote-section.flipped .icon-audio		{left: 0; right: auto}
	
	/* IMMERSIVE */
	.ia--animation-section-1						{padding-bottom: 0; width: 100%; height: auto}
	.ia--animation-section-1 .circle-1				{width: 100vw; height: 100vw;}
	.ia-animation-container-1						{width: 100%; height: auto; border: none; padding-left: 30px; padding-right: 30px; background-color: transparent}
	.ia-animation-container-1 #lottie1				{width: 100%; position: relative; left: auto; top: auto;}
	.ia--animation-section-1 .blockquote-section	{margin-bottom: 50px}
	
	.ia--animation-section-3 .blockquote-section	{margin-bottom: 0}
	
	.blockquote-section.flipped .person-outer	{flex-direction: row-reverse}
	.blockquote-section.flipped .icon-audio		{left: auto; right: 0}
	.blockquote-section.flipped .blockquote-container:after	{left: -20px;}
	.section-heading h2		{font-size: 45px;}
	
	.ia--animation-section-4 .circle-1-container:before,
	.ia--animation-section-4 .circle-1-container:after	{display: none}
	
	.ia--animation-section-4 .circle-1			{width: calc(100vw - 60px); height: calc(100vw - 60px); margin-bottom: 50px;}
	.ia--animation-section-4 .circle-1 #lottie5	{width: 45vw; margin-top: -20vw; height: auto;}
	.funnel-animation-container .pullout		{width: 50vw; margin-top: 0; margin-left: 30px;}
	.funnel-animation-container .pullout p		{font-size: 5vw}
	.funnel-animation-container .pullout .big-bold {font-size: 16vw;margin: 0.1em 0;}
	.funnel-animation-container .pullout span		{font-size: 8vw}
	
	.as2-clare.mb-medium	{margin-bottom: 40px !important;}
	
	.blockquote-section.flipped .blockquote-container blockquote	{padding-right: 40px;}

	.ia--animation-3-container .circle-4	{width: calc(100vw - 40px); height:calc(100vw - 40px) }
	.ia--animation-3-container .circle-4 .pullout .big-bold	{font-size: 17vw;}
	.ia--animation-3-container .circle-4 .pullout .big-bold span	{font-size: 13vw;}
	.ia--animation-3-container .circle-4 .pullout p			{font-size: 6vw;}
	.ia--animation-section-3 #lottie4	{margin-bottom: -180px;}
	
	.ia--animation-section-5 .blockquote-section	{margin-bottom: 40px}
	
	.bg-numbers .blockquote-section	{margin-bottom: 0}

	.ia--animation-section-4 .blockquote-section.mb-medium	{margin-bottom: 0 !important}
	.blockquote-section.ia-sayan-1 {margin-bottom: 50px;}
	
	.ia--animation-3-text-quote	{margin-top: 20px;}
	
	#content .blockquote-container h3	{font-size: 23px;}
	.discover-btn						{font-size: 35px;}
	
	.related-articles h3	{font-size: 60px}
	.related-articles .cols	{padding: 30px 0}
	
	/*********** ANIMATED ARTICLES **************/
	.aa-blockquote-section.aa-blockquote-section-with-person .blockquote-section	{margin-bottom: 0px;}

	.aa1-animation-4 					{overflow: hidden}
	.aa1-animation-4 .pullquote:before	{left: 0}
	.aa1-animation-4 .pullquote p		{font-size: 40px;}
	.aa1-animation-4 .journey-container,
	.aa1-animation-4 .journey-container img	{width: 100%}
	
	.aa2-animation-1 .circle.green	{right: 20px;}
	.aa2-animation-1 .circle.yellow	{width: 220px; height: 220px;}
	
	.audio-container	{flex: 1}
	progress			{width: calc(100% - 22px)}
	.start-time			{left: 29px;}
	
	.pre-cta p	{font-size: 30px;}
	
}

@media (max-width: 460px) 
{
	/*********** ANIMATED ARTICLES **************/
	.aa1-animation-1 .article-inner,
	.aa1-animation-2 .article-inner,
	.aa1-animation-3 .article-inner,
	.aa1-animation-4 .article-inner,
	.aa2-animation-1 .article-inner,
	.aa2-animation-3 .article-inner		{width:calc(100% - 60px)}
	
	
	
	.aa-section .stat h3				{font-size: 100px;}
	.aa-section .stat p					{font-size: 30px;}
	
	.aa1-animation-2 .article-inner .stat p		{font-size: 30px;}
	.aa1-animation-2 .article-inner .stat h3	{font-size: 14vw;}
	
	.aa1-animation-4 .pullquote:before	{position: relative; display: block; margin:0 auto 20px}
	
	.aa1-animation-4 .circle.yellow	{width:250px; height: 250px; left: 50%; margin-left: -125px;}
	.aa1-animation-4 .circle.green	{left: 0}
	.aa1-animation-4 .article-inner	{padding: 0}
	
	.animation-3-table .circle.yellow	{width: 74vw; height: 74vw; left: 50%; margin-left: -37vw}
	.animation-3-table .circle.pink		{left: -60px;}
	.aa2-animation-3 p					{font-size: 40px;}
	
	.aa2-animation-1 .article-inner		{padding: 0}

	.sticky-header p	{font-size: 16px;}
	
}

@media (max-width: 414px) 
{
	.workday-footer-inner ul li a svg	{width: 30px; height: auto; max-height: 30px;}
	.workday-footer-inner ul li a		{width: 60px; height: 60px; border-radius: 60px;}
	
	.panel-shape-container .cloud-image {width: 340px;}

	/**************/
	/* IMMERSIVE */
	.section-heading		{background-size: 29px; margin: 50px 0 40px}
	.section-heading h2		{font-size: 40px;}
	.section-heading .inner	{padding: 0}
	.sh-text				{background-color: rgba(255,255,255,0.75); padding: 30px}

	.ia--animation-2-container .circle-1	{top: auto; width: 460px; height: 460px; bottom: 0;}

	
	/* BLOCKQUOTE */
	.blockquote-container p	{font-size: 18px;}
	
	
	.discover-btn						{font-size: 30px; padding-top: 27px;}

	
}

@media (max-width: 413px) 
{
		.discover-btn						{font-size: 24px; padding-top: 24px;}

	
}

@media (max-width: 340px) 
{
}







