.appPanel {
	text-align: center;
	position: relative;
	height: 300px;
	width: 1095px;
	margin-top: 0px;
	margin-left: 50%;
	transform: translateX(-50%);
	overflow: hidden;
}

.carouselside {
	position: absolute;
	height: 100%;
	width: 300px;
	z-index: 1;
	top: 0%;
}

.appPanel .left {
	left: 0px;
	background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 255) 60%, rgba(255, 255, 255, 255) 100%);
}

.appPanel .right {
	right: 0px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 255) 60%, rgba(255, 255, 255, 255) 100%);
}

.appPanel .carouselside img {
	position: absolute;
	filter: opacity(50%);
	top: 50%;
	transform: translate(100%, -110%) scale(0.5);
	z-index: 100;
} 

.appPanel .left img {
	transform: translate(-200%, -110%) scale(-0.5);
}

.appPanel .carousel {
	transform: translateX(10%);
	height: 100%;
	display: inline-block;
	width: max-content;
	font-size: 0px;
	position: relative;
	transition: 500ms transform;
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
}

.arrow {
	cursor: pointer;
	position: absolute;
	margin: auto;
	max-width: fit-content;
	height: fit-content;
	margin: 0px 10px 0px 10px;
	top: 50%;
	-webkit-user-select: none;
	-ms-user-select: none;
	 user-select: none;
}

.arrow:hover {
	filter: brightness(150%);
}

.leftarrow {
	left: 0px;
	transform: translateX(-170%) translateY(-50%) scale(0.5) rotate(180deg);
}

.rightarrow {
	right: 0px;
	transform: translateX(170%) translateY(-50%) scale(0.5);
}

#movecright {
	cursor: pointer;
}
#movecleft {
	cursor: pointer;
}

.option, .location {
	border-radius: 2px;
	cursor: pointer;
	display: inline-block;
	position: relative;
	margin: auto;
	height: 200px;
	margin: 0px 20px 40px 20px;
	padding: 5px;
	transition: 100ms transform, 100ms box-shadow;
	filter: opacity(90%);
	text-align: left;
	margin-top: 5px;
	box-shadow: #979797 0px 1px 10px;
	transition: 100ms margin;
	aspect-ratio: 1;
	font-size: 1em;
}

.option:hover, .location:hover {
	box-shadow: #777777 0px 0px 7px;
	transform: scale(0.99);
}

.option[selected], .location[selected] {
	filter: opacity(100%);
	box-shadow: #457a91 0px 3px 13px;
	transform: scale(1.03);
}

.option img, .location img {
	width: 100%;
	height: 100%;
}

.option p, .location p {
	background-color: white;
	margin: 0px;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.7rem;
	padding: 5px 12px;
	box-shadow: #777777 0px 1px 10px;
	color: #569cb9;
	font-family: "Century Gothic Bold";
	white-space: nowrap;
}

.option[selected] p, .location[selected] p {
	box-shadow: #457a91 0px 3px 13px;
}