.carousel-inner.carousel-double {
	height: 250px;
	width: 100%;
	position: relative;
}

.carousel-inner.carousel-double .carousel-item {
	height: 100% !important;
	width: 100% !important;
	position: absolute;
	transition: transform 1s ease;
}

.carousel-inner.carousel-double .carousel-item.active {
	height: 100% !important;
	width: 100% !important;
	position: absolute;
	transition: transform 9s ease;
}

.top-left {
	width: 45%;
	height: 45%;
	background: beige;
	position: absolute;
	top: 0;
	left: 0;
	animation: first 9s normal forwards;
	animation-direction: alternate;
}

@keyframes first {
	0% {
		left: -100%;
	}

	60% {
		left: 0;
	}

	100% {
		left: 100%;
	}
}

.top-right {
	width: 55%;
	height: 55%;
	/* background: green; */
	position: absolute;
	top: 0;
	right: 0;
	animation: second 9s normal forwards;
	animation-direction: alternate;
}

@keyframes second {
	0% {
		right: 100%;
	}

	60% {
		right: 0;
	}

	100% {
		right: -100%;
	}
}

.bottom-left {
	width: 45%;
	height: 55%;
	/* background: red; */
	position: absolute;
	bottom: 0;
	left: 0;
	animation: third 9s normal forwards;
	animation-direction: alternate;
}

@keyframes third {
	0% {
		left: -100%;
	}

	60% {
		left: 0;
	}

	100% {
		left: 100%;
	}
}

.bottom-center {
	width: 20%;
	height: 55%;
	/* background: yellow; */
	position: absolute;
	bottom: 0;
	right: 55%;
	animation: fifth 9s normal forwards;
	animation-direction: alternate;
}

@keyframes fifth {
	0% {
		right: +85%;
	}

	60% {
		right: 35%;
	}

	100% {
		right: -50%;
	}
}

.bottom-right {
	width: 35%;
	height: 45%;
	/* background: pink; */
	position: absolute;
	bottom: 0;
	right: 0;
	animation: sixth 9s normal forwards;
	animation-direction: alternate;
}

@keyframes sixth {
	0% {
		right: +45%;
	}

	60% {
		right: 0;
	}

	100% {
		right: -110%;
	}
}

.top-left img,
.top-right img,
.bottom-left img,
.bottom-center img,
.bottom-right img {
	width: 100%;
	height: 100%;
}

/* .carousel-item-next.carousel-item-left,
	.carousel-item-prev.carousel-item-right {
		transform: translate3d(0, 0, 0);
		transition: 1s ease;
	} */

.carousel-item-next,
.active.carousel-item-right {
	transform: translate3d(-100%, 0, 0);
	/* transition: 1s ease-out; */
}

.carousel-item-prev,
.active.carousel-item-left {
	transform: translate3d(100%, 0, 0);
}

.carousel-inner.carousel-double .carousel-item {
	transition: transform 5s ease !important;
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.carousel-inner.carousel-double {
		height: 450px;
		width: 100%;
		position: relative;
	}
}


@media (min-width: 992px) {
	.carousel-inner.carousel-double {
		height: 700px;
		width: 100%;
		position: relative;
	}
}