@media only screen and (max-width: 1399px) { 

	h1 {font-size: 4rem;}
	
	.container { width: calc(100% - 40px); margin-left:20px; margin-right:20px; }
	
	#use-cases ul.icon-boxes h3 {height: auto;}
			
}


@media (min-width:1024px) and (max-width:1249px){
	
	#problem .flex-container .flex-left {padding-top: 0;}
		#problem .flex-container .flex-left h2 br {display: none !important;}
	#problem ul.icon-boxes li{flex:0 0 calc((100% - 20px) / 2);}
	
	#use-cases ul.icon-boxes li{flex:0 0 calc((100% - 20px) / 2);}
	
}


@media only screen and (max-width: 1023px) {

	h1 {}
	h2 {}

	.view-desktop { display:none; }
	.view-mobile { display:block; }
	.flex-container {display:block;}
		.flex-left { width: 100% !important; padding-right: 0 !important;}
		.flex-right { width: 100% !important; padding-left: 0 !important;}

	body .button-holder .button {margin: 10px 5px auto !important;}	
	
	#header {position: relative;}
		#header .container > nav {display: none;}
	
	#text-banner {padding: 40px 0 30px 0;}
	
	#page-hero, 
	#page-hero .container {height: auto; padding-top: 15px;}
	#page-hero .container {background: url(images/bg-dots-hero.png) no-repeat calc(100% + 50px) top / auto 739px;}
		#page-hero  .flex-left { padding-bottom: 30px;}
	
	#logos ul {flex-wrap: wrap; justify-content: center; gap: 60px;}
	
	#problem .flex-container .flex-left p {max-width: 960px;}
	#problem .flex-container .flex-right {justify-content: flex-start;}
	#problem .icon-boxes li {flex: 0 0 100%; width: 100%;}
	
	#faster-path .flex-container {display:flex;}
		#faster-path .flex-left {order: 2; margin-top: 50px;}
		#faster-path .flex-right {order: 1;}
	
	#before {padding: 50px 0 30px 0;}
		#before ul#before-list-left {position:relative;margin-bottom:70px;}
			#before ul#before-list-left li{position:static;}
			#before ul#before-list-left li:nth-child(-n+3)::after{
				content:"";position:absolute;bottom:-50px;width:11px;height:23px;
				background:url(../images/icon-arrow-right-purple.svg?v=2) no-repeat center/11px 23px;transform:rotate(90deg);
			}
			#before ul#before-list-left li:nth-child(1)::after{left:20%;}
			#before ul#before-list-left li:nth-child(2)::after{left:50%;}
			#before ul#before-list-left li:nth-child(3)::after{left:80%;}
		#before .flex-right {padding-top:20px;}
	
	#platform .icon-boxes li {flex: 0 0 100%; width: 100%;}
	#benefits .icon-boxes li {flex: 0 0 100%; width: 100%;}
	#benefits .flex-right .icon {display: none;}
	
	#pip-top .flex-right {padding: 30px !important;}
		#pip-top h2 br {display: none !important;}
	ul#pip-grid {flex-direction: column;}
		ul#pip-grid li {flex: 0 0 auto;width: 100%; padding: 30px 30px 0 30px;}
		ul#pip-grid li:last-child {padding-bottom: 30px}
	
	#use-cases .flex-right {justify-content: flex-start;}
	#use-cases .icon-boxes li {flex: 0 0 100%; width: 100%;}
		#use-cases .icon-holder {margin-bottom: 25px;}
		#use-cases ul.icon-boxes h3 {height: auto;}
	
	#data-rich .button-holder {margin-top: 0;}
	
	#bottom-cta {height: auto; padding: 100px 0;}
		#bottom-cta .container {height: auto; display: block;}	
		#bottom-cta h2 br {display: none;}

}


@media (min-width:768px) and (max-width:1023px){
	
	#problem ul.icon-boxes li{flex:0 0 calc((100% - 20px) / 2);}
	#platform ul.icon-boxes li{flex:0 0 calc((100% - 20px) / 2);}
	#benefits ul.icon-boxes li{flex:0 0 calc((100% - 20px) / 2);}
	#use-cases ul.icon-boxes li{flex:0 0 calc((100% - 20px) / 2);}
	
}


@media only screen and (max-width: 768px) { 

	body .button-holder {display: block !important; text-align: center !important;}	
	
	ul.icon-boxes li h3 {font-size: 1.425rem; line-height: 1.8rem;}
	
	h1 {font-size: 3.5rem;}
	h2 {font-size: 2.25rem; line-height: 2.5rem;}
		h2 br {display: none !important;}
	
	#footer .container {display: block;}
		#footer-left {width: 100%; justify-content: center; margin-bottom: 20px;}
		#footer-right {width: 100%; justify-content: center;}

	#logos {padding: 50px 0;}
	#logos.empty {padding: 20px 0;}
	#logos ul {flex-direction: column; gap: 30px;}
	
	#intro-grid ul li h3 {margin-bottom: 5px; font-size: 1.25rem;}
	#intro-grid ul li {flex: 0 0 100%;}
	
	#problem {padding: 50px 0 30px 0;}
		#problem .flex-container .flex-left {padding-top: 0;}
		#problem .icon-holder {margin-bottom: 25px;}
		
	#faster-path {padding: 50px 0;}
	#faster-path .flex-container .flex-right {padding-top: 50px;}
	
	#platform {padding: 50px 0 20px 0;}
	
	#benefits {padding: 50px 0 20px 0;}
	
	#trust {padding: 50px 0;}
		#trust ul.collapse-expand li h3 {font-size: 1.25rem;}
	
	#pip-top {display:flex; flex-direction:column;}
		#pip-top .flex-left {order:2; width:100%; padding: 0;}
		#pip-top .flex-right {order:1; width:100%; padding:30px;}
			#pip-top h2 {font-size: 1.8rem; line-height: 2rem;}
		ul#pip-grid {flex-direction:column;}
			ul#pip-grid li {width:100%;}
				ul#pip-grid li h3 {font-size: 1.25rem; margin-bottom: 5px;}

	#use-cases {padding: 30px 0 30px 0;}
	
	#data-rich {padding: 20px 0 20px 0;}
		#data-rich .button-holder {margin-top: 20px;}
	
}

@media only screen and (max-width: 639px) { 

	body {font-size: 0.9rem;}
	h1 {font-size: 3rem; line-height: 3.2rem;}
	h2 {font-size: 2.1rem; line-height: 2.3rem;}
	
	#header-right {display: none;}

	#footer {padding: 25px 0;;}

	#page-hero p {font-size: 1rem; line-height: 1.8rem;}
	
	#trust ul.collapse-expand li h3 {font-size: 1.1rem;}
	
	#bottom-cta {padding: 50px 0;}
	
}

@media only screen and (max-width: 499px) { 

	h1 {font-size: 2.75rem; line-height: 3rem;}
	
}