.carousel {
	position: relative;
	width: 40vw;
	height: 40vw;
	max-width: 800px;
	max-height: 800px;
	margin: auto;
	color: white;
	perspective: 1500px;
}

.carousel_content {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transform: translateZ(-30vw) rotateY(0);
	animation: carousel 15s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.carousel_content:hover {
	animation-play-state: paused;
}

.carousel_item {
	position: absolute;
	top: 0;
	left: 0;
	width: 40vw;
	height: 40vw;
	max-width: 800px;
	max-height: 800px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
	border-radius: 6px;
}

.carousel_item:nth-child(1) {
	background: #fdd94f;
	transform: rotateY(0) translateZ(35vw);
}

.carousel_item:nth-child(2) {
	background: #f87949;
	transform: rotateY(120deg) translateZ(35vw);
}

.carousel_item:nth-child(3) {
	background: #fbab48;
	transform: rotateY(240deg) translateZ(35vw);
}

.carousel_item img {
	width: 100%;
	height: 100%;
}

@keyframes carousel {

	0%, 10% {
		transform: translateZ(-35vw) rotateY(0);
	}

	20%, 40% {
		transform: translateZ(-35vw) rotateY(-120deg);
	}

	50%, 70% {
		transform: translateZ(-35vw) rotateY(-240deg);
	}

	80%, 100% {
		transform: translateZ(-35vw) rotateY(-360deg);
	}

}

/*-*-*-*- Schermen met een maximum van 600px breed -*-*-*-*/
@media screen and (max-width: 600px) {

	.carousel,
	.carousel_item {
		width: 80vw;
		height: 80vw;
	}

}