.spread { /* The spread itself. */
	background: #4d3391;
	height: 0;
	max-width: 980px; /* Set padding-top in HTML to set height of spread. */
	overflow: hidden;
	position: relative;
}

.spreadinside { /* Necessary to show cards. */
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

label { /* The card itself. */
	background: white;
	border-radius: 35px;
	cursor: pointer;
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: calc(225 / 600 * 100%);
	perspective: 1000px;
	-webkit-perspective: 1000px;
	position: absolute;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	width: 22.96%;
}

input { /* Hides the checkbox part that makes the card interactive. */
	display: none;
}

:checked + .cardinside { /* Rotates the card when clicked on. */
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

.cardinside { /* Necessary to show card faces. */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: all 600ms;
	-webkit-transition: all 600ms;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	width: 100%;
	z-index: 20;
}

.cardinside div { /* Styling for the card faces. */
	align-items: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	height: 100%;
	position: absolute;
	text-align: center;
	width: 100%;
}

.front { /* The front (default) of the card. */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	font-size: 5vw;
	justify-content: center;
}

.back { /* The back of the card. */
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	font-size: 20px;
	justify-content: center;
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}