.segmenter {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.segmenter__image {
	width: 100%;
	display: block;
}

.segmenter__background,
.segmenter__pieces,
.segmenter__piece-wrap,
.segmenter__piece-parallax,
.segmenter__piece {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.segmenter__piece-parallax {
	-webkit-transition: -webkit-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
}

.segmenter__pieces {
	-webkit-perspective: 400px;
	perspective: 400px;
}

.segmenter__background,
.segmenter__piece {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.segmenter__shadow {
	position: absolute;
	opacity: 0;
	box-shadow: 0px 2px 15px rgba(0,0,0,0.7);
}

/* Individual shadow styles */
.demo-1 .segmenter__shadow {
	box-shadow: 0px 20px 50px rgba(18, 20, 28, 0.61);
}

.demo-2 .segmenter__shadow {
	box-shadow: 10px 10px 30px rgba(43, 27, 19, 0.95);
}

.demo-3 .segmenter__shadow {
	border: 7px solid rgba(255,255,255,0.7);
	box-shadow: none;
}

.demo-3 .segmenter__shadow::before {
	content: '';
	position: absolute;
	top: -20px;
	left: -20px;
	width: 100%;
	height: 100%;
	box-shadow: -5px -5px 30px rgba(0, 0, 0, 0.7);
}

.demo-4 .segmenter__shadow {
	box-shadow: 8px 8px 30px rgba(15, 32, 38, 0.35);
}

.demo-5 .segmenter__shadow {
	box-shadow: 0px 18px 29px rgba(4, 19, 22, 0.65);
}

.demo-6 .segmenter__shadow {
	box-shadow: 2px 20px 35px rgba(25, 23, 20, 0.75);
}