.lottie-1-mobile	{display: none}

@media (min-width: 1300px) 
{
	.listing-col h2	{font-size: 50px;}
}

@media (max-width: 1140px) 
{
	.oil-section .pullout-graphic	{display: flex; justify-content: space-between; width: auto}
	.oil-section .oil				{position: relative; width: 90px; flex-shrink: 0; left: 0; margin-right: 10px;}
	
}

@media (max-width: 960px) 
{
	
}	

@media (max-width: 960px) 
{
	/* ARTICLE CONTENT */
	.article p.intro	{font-size: 16px;}
	.first-letter		{font-size: 79px;}
	
	/* GRAPHIC PULLOUT */
	.pullout-graphic h2		{font-size: 33px;}
	.pullout-graphic img	{width: 330px; max-width: 100%}
	.pullout-graphic p		{font-size: 20px;}

	.graph-section .pullout-graphic	{right:70px; width:calc(50% - 70px)}
	.graph-section	{padding:35px 0 20px}
	
	/* BLOCKQUOTE */
	.blockquote-container	{padding: 40px;}
	.quote-image-container	{width:215px; height: 215px;}
	blockquote				{padding-left: 50px;}
	
	/* LAPTOP SECTION */
	.laptop-text	{width: 50%}
	.laptop-text h2	{font-size: 35px;}
	.laptop-section	.inner-absolute	{top:auto; bottom: 20px; transform: translateX(-50%) translateY(0%);}
	
	/* HOME */
	.listing-col	{padding: 20px;}	
	.listing-col p	{font-size: 16px;}
	.listing-col .number	{left: 20px;}
	
}

@media (max-width: 768px) 
{
	/* CONTENT HERO */
	.content-hero-container	{height: auto; min-height: 600px;}
	
	.article p.intro	{font-size: 15px;}
	.article p			{font-size: 15px;}
	
	blockquote cite		{font-size: 15px;}
	
	.ipad-section p	{font-size: 20px;}
	
	.ipad-text-col-inner	{}
	
}


@media (max-width: 767px) 
{
	.home-icon	{top:118px;}
	
	/* LAPTOP SECTION */
	.laptop-section							{flex-direction: column; align-items: flex-start}
	.laptop-section .inner.inner-absolute	{position: relative; left: auto; top:auto; transform: none;}
	.laptop-image							{width: 80%;}
	.laptop-text							{margin: auto; width: calc(100% - 100px)}
	
}



@media (max-width: 700px) 
{
	.article .inner	{padding-left: 50px; padding-right: 50px;}
	
	/* CONTENT HERO */
	.content-hero-container		{min-height: 400px; height: auto}
	.content-hero-container h1	{font-size: 60px;}
	
	/* GRAPH SECTION */
	.graph-section					{padding-bottom: 0}
	.first-letter					{margin-right: 10px;}
	.graph-section .pullout-graphic	{position: relative; right: auto; bottom: auto; width: 100%;}
	.graph-section .text-col		{background-color: transparent; width: 100%}
	.graph-section p.intro			{background-color: #ffffff; width: 50%;}
	
	.pullout-graphic	{background-color: #f6f6f6; padding: 30px; box-shadow: var(--dropShadow1);}
	
	/* BLOCKQUOTE */
	.blockquote-container				{padding: 30px; margin-bottom: 25px;}
	.blockquote-container blockquote	{padding: 0px; padding-left: 30px;}
	.quote-image-container				{width: 150px; height: 150px;}
	blockquote img						{width:56px; float: left; margin: 0 15px 5px 0;}
	
	.text-container-two-col	.cols		{flex-direction: column}
	.text-container-two-col	.text-col	{width:100%; padding-top:0; padding-bottom: 0}
	
	/* OIL SECTION */
	.oil-section					{padding-top: 0}
	.oil-section .text-container-two-col	{padding-top: 0}
	.oil-section .pullout-graphic	{border:none}
	hr.from-left					{display: none}
	.oil-text-right					{background-color: #ffffff}
	
	/* IPAD SECTION */
	.ipad-text-col-inner	{border:1px solid #000000; box-shadow: 5px 5px 0 #000000; margin:20px 0 60px;}
	
	/* CTA */
	.cta-section a h4 br	{display: none}
	.cta-section a h4		{font-size: 40px;}
	
	/* HOME */
	
	.home-listing {height: auto; min-height: unset;}
	
	.home-listing .listing-col	{width: 100% !important; min-height: 33.333%; height: auto; position: relative; top:auto !important; left: auto !important; right: auto !important}

	.home-listing .listing-col:hover	{height: auto !important}
	
	.listing-col h2				{font-size: 30px; line-height: 1em}
	.listing-col h2 br			{display: none}
	.listing-col p				{font-size: 14px;}
	.listing-col:after			{background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 100%);}
	.home-listing-text			{width: 100%}
	
	.home-listing .number		{width: 50px; height: 50px; font-size: 25px; display: flex; position: relative; flex-shrink: 0; left: 0; top: auto; margin-bottom: 15px;}
	.home-listing .number img	{width: 15px;}
	
	.read-more svg				{width: 25px}
	.read-more					{font-size: 16px; margin-top: 5px}
	
	
	
	
	/********************/
	/* VERTICAL SPACING */
	/********************/
	
	.blockquote-section-1,
	.oil-section .pullout-graphic,
	.graph-section .pullout-graphic		{margin: 40px 0}
	
	.oil-section .pullout-graphic,
	.blockquote-section-1	{margin-top: 20px;}
	
	.blockquote-section-2 .blockquote-container	{margin-top: 20px}
	
}

@media (max-width: 640px) 
{
	.article .inner	{padding-left: 20px; padding-right: 20px;}
	
	/* BLOCKQUOTE */
	.blockquote-container					{display: block}
	.quote-image-container					{float: left; margin: 0 25px 15px 0}
	.blockquote-container blockquote		{padding: 0}
	.blockquote-container blockquote img	{float: none}
	
	/* LAPTOP SECTION */
	.laptop-text	{margin: auto; width: 100%}
	.laptop-image	{width: 100%;}

}

@media (max-width: 570px) 
{
	.lottie-1					{display: none;}
	.lottie-1 lottie-player		{position: relative;}
	.graph-section p.intro		{width: 100%}
	
	.lottie-1-mobile				{display: block; margin-bottom: 40px; width:calc(100% + 40px); margin-left: -20px;}
	.lottie-1-mobile lottie-player	{position: relative; left: auto; top:auto; }
}

@media (max-width: 500px) 
{
	
	/* CONTENT HERO */
	.content-hero-container h1	{font-size: 14vw;}
	.content-hero-image			{background-position: center;}
	
	/* BLOCKQUOTE */
	.blockquote-container	{width: calc(100% + 40px);  margin-left: -20px;}
	.quote-image-container	{width:120px; height: 120px;}
	.blockquote-container p	{font-weight: 400}
	
	.blockquote-section-2 .blockquote-container	{padding: 20px;}
	
	.cta-section a h4 {font-size: 35px;}
	
	/* HOME */
	.listing-col h2				{font-size: 28px; font-weight: 700; width: 320px; max-width: 100%;}
	.listing-col p				{font-size: 13px; display: none}
	.home-listing .number		{width: 30px; height: 30px; font-size: 18px; border-width: 2px;}
	.home-listing .number img	{width: 10px;}
	.listing-col:after 			{background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 100%);}
	
	
}

@media (max-height:620px) {
	
	.listing-col h2	{font-size: 36px;}
	.listing-col p	{font-size: 14px;}
	.listing-col .number	{top:20px;}
	
}