/*SHAPE STUFF*/
.shapes-grid {	
	height: calc(var(--shape-half-size) * 4);
	position: relative;
	width: calc(var(--shape-half-size) * 8);
	max-width: 100%;
	margin: -30px auto 0;
	z-index: 0;
}
.shapes-grid::before {
	content: '';
	display: block;
	position: absolute;
	right: calc(50% + var(--shape-h-size) + var(--shape-h-size));
	width: 100vw;
	height: 100%;
	bottom: 0;
	background-image: url('../../images/header-outer-left-shapes.svg');
	background-position: right center;
	background-size: contain;
	opacity: 0;
	transform: translate3d(0, var(--shape-half-size), 0);
}
.shapes-grid::after {
	content: '';
	display: block;
	position: absolute;
	left: calc(50% + var(--shape-h-size) + var(--shape-h-size));
	width: 100vw;
	height: 100%;
	bottom: 0;
	background-image: url('../../images/header-outer-right-shapes.svg');
	background-position: left center;
	background-size: contain;
	opacity: 0;
	transform: translate3d(0, var(--shape-half-size), 0);
}
body.loaded .shapes-grid::before,
body.loaded .shapes-grid::after {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	transition: opacity 1s, transform 2s;
}

	
	/*DOWN ARROW*/	
	.next-section-button {
		display: block;
		position: absolute;
		top: calc(var(--shape-half-size) * 1.35);
		left: 50%;
		transform: translate3d(-50%,0,0) scale(0);
		z-index: 10;
	}
	body.loaded .next-section-button {
		transform: translate3d(-50%,0,0) scale(1);
		transition: transform 1.25s;
	}
	body.loaded .next-section-button:hover {
		transition: transform .3s;
		transform: translate3d(-50%,0,0) scale(1.1);
	}

	/*GENERAL SHAPE SIZES*/
	.shapes-grid > *:not(.next-section-button) {
		width: var(--shape-h-size);
		height: var(--shape-h-size);
		position: absolute;
	}
	.shapes-grid > div:not(.next-section-button) {
		opacity: 0;
		transform: translate3d(0, var(--shape-half-size), 0);
	}
	body.loaded .shapes-grid > div:not(.next-section-button):nth-child(even) {
		transition: opacity 1s, transform 2.25s;
	}
	body.loaded .shapes-grid > div:not(.next-section-button) {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition: opacity 1s, transform 2s;
	}
	
	
	/*HOME SHAPES*/
	.shape-1 {
		top: 0;
		right: calc(50% + var(--shape-h-size) + var(--shape-half-size));
		background: #e39d56;
	}
	.shape-2 {
		top: 0;
		right: calc(50% + var(--shape-h-size));
	}
	.shape-3 {
		top: 0;
		left: calc(50% + var(--shape-h-size));
		z-index: 2;
	}
	.shape-4 {
		top: 0;
		left: calc(50% + var(--shape-h-size));
	}
	.shape-5 {
		top: 0;
		left: calc(50% + var(--shape-h-size) + var(--shape-half-size));
		background: linear-gradient(221.99deg, #F7351E 14.49%, #BB1579 80.5%);
	}
	.shape-6 {
		top: var(--shape-half-size);
		right: calc(50% + var(--shape-h-size));
	}
	.shape-7 {
		top: var(--shape-half-size);
		left: calc(50% + var(--shape-half-size));
		background: #dbebfb;
	}
	.shape-8 {
		top: calc(var(--shape-half-size) * 2);
		right: calc(50% + var(--shape-h-size));
		z-index: 2;
	}
	.shape-9 {
		top: calc(var(--shape-half-size) * 2);
		right: calc(50% + var(--shape-half-size));
	}
	.shape-10 {
		top: calc(var(--shape-half-size) * 2);
		right: 50%;
	}
	.shape-11 {
		top: calc(var(--shape-half-size) * 2);
		left: 50%;
	}
	.shape-12 {
		top: calc(var(--shape-half-size) * 2);
		left: calc(50% + var(--shape-half-size));
	}
	.shape-13 {
		top: calc(var(--shape-half-size) * 2);
		left: calc(50% + var(--shape-h-size) + var(--shape-half-size));
	}
	.shape-14 {
		top: calc(var(--shape-half-size) * 3);
		right: calc(50% + var(--shape-h-size) + var(--shape-half-size));
		background: linear-gradient(221.99deg, #BB1579 14.49%, #F7351E 80.5%);
	}
	.shape-15 {
		top: calc(var(--shape-half-size) * 3);
		right: 50%;
	}
	.shape-16 {
		top: calc(var(--shape-half-size) * 3);
		left: 50%;
		background: #e39d56;
	}
	.shape-17 {
		top: calc(var(--shape-half-size) * 3);
		left: 50%;
		z-index: 2;
	}
	.shape-18 {
		top: calc(var(--shape-half-size) * 3);
		left: calc(50% + var(--shape-h-size));
	}
	.shape-19 {
		top: calc(var(--shape-half-size) * 3);
		left: calc(50% + var(--shape-h-size) + var(--shape-half-size));
		background: #e39d56; 
	}
	
	

/*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*/
/*-- MEDIA QUERIES --*//*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*/
/*------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*/

/* 
HEIGHT LESS THAN 900 + WIDTH GREATER THAN 850
*/
@media only screen and (min-width:850px) and (max-height:900px) {
	
	body.loaded #become-a-future-ready-business-with-a-forward-thinking-partner.home-title {
		font-size: clamp(35px,5vw, 50px) !important;
		max-width: 750px;
	}
	
	.next-section-button {
		display: block;
		position: absolute;
		top: calc(var(--shape-half-size) * .80);
  	}
}


/* 
850
*/
@media only screen and (max-width:850px) {
	
	.next-section-button {
		top: calc(var(--shape-half-size) * 1);
	}
		
	.next-section-button img {
		width: 50px;
	}
	#page-container {
		overflow-x: hidden;
	}
	
	svg text{display:none;}
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body.loaded .shapes-grid text a {
    text-decoration: none;
}

svg text.first {
  animation: fadeIn 4s ease-in infinite alternate;
}

svg text.second, .shape-2 img.first{
  animation: fadeIn 7s ease-in infinite alternate;
}

svg text.third, .shape-12 img.second{
  animation: fadeIn 10s ease-in infinite alternate;
}

svg:hover text, .shape-with-image:hover img {
    opacity: 1;
    animation: fadeOut 1s step-end infinite;
}

svg:hover text a{fill-opacity:1; fill:#6100ff;}
svg:hover .shape-outline-ani{fill:#f4f4f4;stroke: #f4f4f4;}
svg.shape-8:hover, svg.shape-3:hover{z-index:-9!important;}
.shape-4:hover, .shape-9:hover{z-index:9!important;}
svg.shape-17:hover .shape-outline-ani{
    fill: none;
}