.four-shapes {
	position: absolute;
	top: 50%;
	left: 55%;
	width: 50%;
	transform: translate3d(0,-50%,0);
	z-index: 0;
	height: 0;
	padding-bottom: 50%;
	z-index: -1;
}

.four-shapes.variation-two {
	left: auto;
	right: 0;
	transform: translate3d(50%,-40%,0);
	z-index: 0;
}

	.inner-four-shapes {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
	}
		
		.inner-four-shapes > * {
			transform: translate3d(0, 20%,0);
			opacity: 0;
		}
		.four-shapes.in-view .inner-four-shapes > * {
			opacity: 1;
			transform: translate3d(0, 0,0);	
		}
	
		.four-shape-1 {
			width: 66.66%;
			height: 66.66%;
			position: absolute;
			top: 0;
			left: 0;
			transition: transform 1.5s, opacity 1s;
		}
		
		.four-shape-2 {
			width: 33.33%;
			height: 33.33%;
			position: absolute;
			top: 0;
			right: 0;
			background: linear-gradient(221.99deg, #BB1579 14.49%, #F7351E 80.5%);
			transition: transform 1s ease-in-out .3s, opacity 1s ease-in-out .3s;
		}
		.variation-two .four-shape-2 {
			right: 100vw;
			transform: translate3d(-100%,0,0) rotate(-90deg) !important;
			top: auto;
			bottom: 20%;
		}
		
		.four-shape-3 {
			width: 33.33%;
			height: 33.33%;
			position: absolute;
			top: 33.33%;
			right: 0;
			transition: transform 1s ease-in-out .5s, opacity 1s ease-in-out .5s;
		}
		
		.four-shape-4 {
			width: 66.66%;
			height: 33.33%;
			position: absolute;
			bottom: 0;
			left: 0;
			background: rgba(219, 235, 251, 1);
			transition: transform 1s ease-in-out .3s, opacity 1s ease-in-out .3s;
		}
		
		.four-shape-3-2 {
			right: 100vw;
			transform: translate3d(-100%,0,0) !important;
			bottom: calc(20% + 33%);
			position: absolute;
			width: 33% !important;
		}
		
		
		
/*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*/
/*-- MEDIA QUERIES --*//*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*/
/*------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*//*--------------------*/

/* 
1100 
*/
@media only screen and (max-width:1100px) {
	
	.four-shapes {
		position: relative;
		top: 0;
		left: 50%;
		width: 485px;
		transform: translate3d(-50%,-10%,0);
		height: 0;
		padding-bottom: 485px;
		z-index: -1;
	}	
	
	.four-shapes.variation-two {
		display: none;
	}
		
}