:root {
  --route__page-margin: calc((100% - var(--layout__width__md)) / 2);
}


/* 
	All illustrations are scaled to:
		Baseline: 0.8 of original
			@1200px: 0.7 of original
			@800px: 0.4 of original
			
			
	Shapes named like this:
	route__green__L__1__2400.svg
	route__[color]__[shape]__[version]__[image-size]
*/


.route {
	pointer-events: none;
	overflow: hidden;
	position: absolute;
	z-index: 1;
	pointer-events: none;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;}

.route::after {
	content: '';
	pointer-events: none;
	position: absolute;
	display: block;
	z-index: 1;
   	background-repeat: no-repeat;  }

/* Hero - Contact */
.m__hero__contact .route-1::after,
.m__hero__newsroom .route-1::after {
	background-image: url('../../images/routes/route__green__L__1__2400.svg');
	left: auto;
	right: 0;
	background-size: 1920px;
	height: 100%;
	width: var(--route__page-margin);
   	background-position: top left; }

@media (max-width: 1200px) {
	.m__hero__contact .route-1::after,
	.m__hero__newsroom .route-1::after {
		background-size: 1680px;
		height: calc(var(--header-height) * 2 + var(--spacing__sm));
		width: 30%;
		background-position: bottom left; }
}

@media (max-width: 800px) {
	.m__hero__contact .route-1::after,
	.m__hero__newsroom .route-1::after {
		width: 35%;
		background-size: 960px; }
}



/* 
	C - Module Join
*/
.m__content__feature-list + .m__content__table .route,
.m__content__feature-list + .m__content__feature-slider .route,
.m__accordion__features + .m__customer-success__featured .route {
	background-image: url('../../images/routes/route__green__C__1__195.svg');
	background-size: 156px;
   	width: 156px;
	height: auto;
	aspect-ratio: 195 / 360;
	transform: translateY(-50%);
	left: auto;
   	right: 0; }

/* Blue */
.m__accordion__features + .m__customer-success__featured .route {
	background-image: url('../../images/routes/route__blue__C__1__195.svg'); }
	   
@media (max-width: 1200px) {
	.m__content__feature-list + .m__content__table .route,
	.m__content__feature-list + .m__content__feature-slider .route,
	.m__accordion__features + .m__customer-success__featured .route {
		background-size: 137px;
		width: 137px; }
}
	
@media (max-width: 800px) {
	.m__content__feature-list + .m__content__table .route,
	.m__content__feature-list + .m__content__feature-slider .route,
	.m__accordion__features + .m__customer-success__featured .route {
		background-size: 78px;
	   width: 78px; }
}	



/* 
	Crev - Module Join 
*/
.m__content__centered + .m__cta .route,
.m__content__comparison-table + .m__cta .route,
.m__content__column-showcase + .m__accordion__features .route,
.m__hero__secondary .route-2 {
	background-image: url('../../images/routes/route__blue__Crev__1__195.svg');
	background-size: 156px;
	width: 156px;
	height: auto;
	aspect-ratio: 195 / 360;
	transform: translateY(-50%); }

/* Green + smaller */
/* Also used on secondary hero */
.m__content__column-showcase + .m__accordion__features .route,
.m__hero__secondary .route-2 {
	transform: translateX(-33%) translateY(-50%);
	height: auto;
	aspect-ratio: 195 / 360;
	background-image: url('../../images/routes/route__green__Crev__1__195.svg'); }

.m__hero__secondary .route-2 {
	height: auto;
   	aspect-ratio: 120 / 360;
	width: 120px;
	top: 50%;
	background-repeat: no-repeat;
   	background-position: center right; }

@media (max-width: 1200px) {
	.m__content__centered + .m__cta .route,
	.m__content__comparison-table + .m__cta .route,
	.m__content__column-showcase + .m__accordion__features .route {
		background-size: 137px;
		width: 137px; }
}
	
@media (max-width: 1000px) {
	.m__hero__secondary .route-2 {
		width: 80px; }
}

@media (max-width: 880px) {
	.m__hero__secondary .route-2 {
		display: none; }
}

@media (max-width: 800px) {
	.m__content__centered + .m__cta .route,
	.m__content__comparison-table + .m__cta .route,
	.m__content__column-showcase + .m__accordion__features .route {
		background-size: 78px;
		width: 78px; }
}	




/* 
	Home - Hero
*/
.m__hero__primary .route {
	height: calc(100% + 156px); }

.m__hero__primary .route::after {
	background-image: url('../../images/routes/route__home__hero__3220.svg');
	width: 100%;
	height: 100%;
	left: 0;
	background-size: 2576px;
   	background-position: bottom right; }

@media (max-width: 1200px) {
	.m__hero__primary .mc .hero__content { /* Content Area */
	   	max-width: 75%; }
	
	.m__hero__primary .route {
		height: calc(100% + 156px); }
		
	.m__hero__primary .route::after {
		background-image: url('../../images/routes/route__home__hero__3220__med.svg'); }
					  
	.m__hero__primary .route::after {
		background-size: 2254px; }
}
		   
@media (max-width: 800px) { 	
	  
	.m__hero__primary .route {
		height: calc(100% + 78px); }
				  
	.m__hero__primary .route::after {
		background-size: 1288px; }
}
		
@media (max-width: 600px) {
	.m__hero__primary .mc .hero__content {
	   max-width: 80%; }	
	
	.m__hero__primary .route {
		height: calc(100% + 78px); }
				 
	.m__hero__primary .route::after {
		background-image: url('../../images/routes/route__home__hero__3220__small.svg');
		background-size: 1288px; }
}	

@media (max-width: 500px) {
	.m__hero__primary .mc .hero__content {
	   max-width: 85%; }
				 
	.m__hero__primary .route::after {
		background-image: url('../../images/routes/route__home__hero__3220__xsmall.svg');
		background-size: 1288px; }
}	



/* 
	Products / Services
*/
.m__hero__secondary .route-1::after {
	background-image: url('../../images/routes/route__blue__L__1__382.svg');
	right: 0;
	background-size: 306px;
	height: calc(var(--header-height) * 2 + var(--spacing__lg));
	width: 306px;
	background-position: bottom left; }

@media (max-width: 1200px) {
	.m__hero__secondary .route-1::after {
	   background-size: 268px;
	   width: 268px; }
}

@media (max-width: 800px) {
	.m__hero__secondary .route-1::after {
		background-size: 153px;
		width: 153px;
	   	height: calc(var(--header-height) * 2 + var(--spacing__xs)); }
}

@media (max-width: 600px) {
	.m__hero__secondary .route-1::after {
		 height: calc(var(--header-height) * 1.8); }
		  
}



/* 
	Meet the team
*/
.pageID_54 .m__hero .route,
.single__team .m__hero .route {
	height: calc(100% + 147px); }

.pageID_54 .m__hero .route::after,
.single__team .m__hero .route::after {
	background-image: url('../../images/routes/route__about__hero__3220.svg');
	width: 100%;
	height: 100%;
	left: 0;
	background-size: 2576px;
	background-position: bottom right; }

@media (max-width: 1200px) {
	.pageID_54 .m__hero .route,
	.single__team .m__hero .route{
		height: calc(100% + 128px); }
	
	.pageID_54 .m__hero .route::after,
	.single__team .m__hero .route::after {
		background-image: url('../../images/routes/route__about__hero__3220__med.svg');
		background-size: 2254px; }						
}
		   
		   
 @media (max-width: 800px) {
	.pageID_54 .m__hero .route	{
		height: calc(100% + 74px); }
	 
	.pageID_54 .m__hero .route::after {
		background-size: 1288px; }							
}
		

/* 
	About us
*/
.pageID_52 .m__hero .route {
	height: calc(100% + 70px); }

.pageID_52 .m__hero .route::after {
	background-image: url('../../images/routes/route__green__L__1__2400.svg');
	left: auto;
	right: 0;
	background-size: 1920px;
	height: 100%;
	width: var(--route__page-margin);
	background-position: bottom left; }

@media (max-width: 1200px) {
	.pageID_52 .m__hero .route	{ 
		height: calc(100% + 62px); }
	
	.pageID_52 .m__hero .route::after {
		width: 15%;
		background-size: 1680px; }						
}
		   
		   
 @media (max-width: 800px) {
	.pageID_52 .m__hero .route	{
		height: calc(var(--header-height) * 2); }
	 
	.pageID_52 .m__hero .route::after {
		width: 40%;
		background-size: 960px;  }							
}
	
	





/* Overlay Team */
/* .overlay__team {
	position: relative; }

.overlay__team__image,
.overlay__team__biography {
	position: relative;
	z-index: 20; }


.overlay__team::after {
	content: '';
	position: absolute;
	display: block;
	background-image: url('../../images/routes/route__team__overlay__2558.svg');
	left: 0;
	bottom: 0;
	background-size: 2558px;
	height: 100%;
	width: 100%;
	z-index: 1;
	background-position: bottom left; } */