.container:has(#slideshow) {
	padding: 0 8%;
}

.img-wrapper {
	height: auto;
	max-width: unset;
	z-index: 8;
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	width: 100%;
}

#slideshow {
	max-width: 1440px;
	margin: auto;
	display: flex;
	justify-content: center;
	padding: 0px;
}

#slideshow .img-wrapper.active {
	z-index: 10;
}

#slideshow .img-wrapper.last-active {
	z-index: 9;
}


.thumbs-container {
	flex: 0 0 20%;
	/* 15-20% width */
	/* max-width: 18%; */
	display: flex;
	flex-direction: column;
	align-items: center;
}

.prev {
	float: left;
}

.next {
	float: right;
}

.prev:hover,
.next:hover {
	color: #555555;
}

.artwork-banner {
	flex: 0 0 52%;
	/* 35-40% width */
	max-width: 52%;
	display: flex;
	flex-direction: column;
	/* align-items: center; */
}


#profile-tab {
	flex: 0 0 30%;
	/* 35-40% width */
	/* max-width: 30%; */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* Align it to the right */
}



ul.thumbs {

	height: fit-content;
	padding: 0;
	/* margin: 0 5%; */

	text-align: center;
}

.parent-container {
	width: 100%;
	display: flex;
	justify-content: center;
	height: unset !important;
}


.d-flex {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: center;
}

.thumb {
	display: inline-block;
	width: 110px;
	height: 110px;
	margin: 10px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	cursor: pointer;
}

.thumb.active {
	width: 165px;
	height: 165px;
	border: 3px solid #d02229;
	border-radius: 5px;
	margin: 10px 0px;

}


.row-container {
	display: flex;
	justify-content: flex-end;
	/* align-items: flex-start; */
	width: 100%;
	/* gap: 20px; */
}

.upload-file-edit {
	padding-left: 15px;
	margin: 0 0 25px 0;
}

ul.wow.fadeInUp {
	padding: 0 0 0 15px;
}

@media only screen and (max-width:1024px) {
	#slideshow {
		display: block;
	}

	.artwork-banner {
		max-width: unset;
		order: 1;
	}

	.row-container {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}

	#profile-tab {
		align-items: flex-start;
		padding-left: 0px;
		order: 3;
	}

	.upload-file-edit {
		padding-left: 0px;
	}

	.thumbs-container {
		margin-left: 0px !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		height: 10rem !important;
		width: unset !important;
		margin-top: 0rem !important;
		margin-right: 0px !important;
		justify-content: flex-start !important;
		order: 2;
	}

	/* .thumb {
        display: inline-block !important;
        width: 50px !important;
        height: 50px !important;
        margin: 4px !important;
        background-size: cover !important;
        background-position: center !important;
        cursor: pointer !important;
    } */


	ul.thumbs {
		height: 140px !important;
		margin: 0 5% !important;
		width: inherit !important;
		display: flex !important;
		flex-direction: row !important;
		width: 80% !important;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	ul.thumbs::-webkit-scrollbar {
		display: none;
		/* Safari and Chrome */
	}

	.prev {
		transform: rotate(272deg) !important;
	}

	.next {
		transform: rotate(267deg) !important;
	}

	.thumb.active {
		height: 110px !important;
		border: 3px solid #d02229 !important;
		border-radius: 5px !important;
		flex: 0 0 110px;
	}

	.thumb {
		flex: 0 0 110px;
	}

	.row.justify-content-end.back_btn {
		margin: 3rem 0px !important;
	}
}


@media (min-width: 280px) and (max-width: 500px) {


	.img-wrapper {

		height: 200px;
		max-width: 320px !important;
		z-index: 8;
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.row-container {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;

	}

	.thumbs-container {
		margin-left: 2rem;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 10rem;
		width: 95%;
		margin-top: 0rem;
		margin-right: 2rem;

	}

	ul.thumbs {
		height: 140px;
		margin: 0 5%;
		text-align: center;
		width: inherit;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.thumb {
		display: inline-block;
		width: 50px;
		height: 50px;
		margin: 4px;
		background-size: cover;
		background-position: center;
		cursor: pointer;
	}

	.thumb.active {
		width: 100px;
		height: 100px;
		border: 3px solid #d02229;
		border-radius: 5px;
	}

	.next {
		transform: rotate(267deg)
	}

	.prev {
		transform: rotate(272deg);
	}

	.back_btn {
		margin-right: 0px;
	}


}