/* CSS Document */

.conveyor {
	display: flex;
	height: auto;
	margin: auto;
	overflow: hidden;
	align-items: center;
}

.conveyor:before {
	position: absolute;
	z-index: 1;
	left: 0;
	content: "";
	width: 23.958%;
	height: 330px; /* originally 110px */
	background: linear-gradient(-90deg, hsla(0, 0%, 96.9%, 0), #3fc4b7); /* Last colour code is the shading the image fades to, match to page background colour */
}

.conveyor:after {
	position: absolute;
	right: 0;
	content: "";
	width: 23.958%;
	height: 330px; /* originally 110px */
	background: linear-gradient(90deg, hsla(0, 0%, 96.9%, 0), #3fc4b7 99%);
}

.conveyor .conveyor-belt {
	display: flex;
	animation: scroll 35s linear infinite;
	-webkit-animation: scroll 35s linear infinite;
	width: calc(240px * 10);
}

.conveyor .package {
	display: flex;
}

.conveyor .package img {
	width: 210px;
	height: 300px; /* originally 80px */
	padding: 10px;
	background-color: white;
	cursor: pointer;
	margin: 20px;
	border-radius: 8px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}

@keyframes scroll {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(calc(-240px * 5));
		transform: translate((calc(-240px * 5));
	}
}