.cd-product-viewer-wrapper { text-align: center; }
.cd-product-viewer-wrapper > div { display: inline-block; }

.cd-product-viewer-wrapper .product-viewer { width: 100%; height: auto; display: inline-block; position: relative; z-index: 1; overflow: hidden; }
.cd-product-viewer-wrapper img { display: block; position: relative; z-index: 1; }
.cd-product-viewer-wrapper .product-sprite { height: 100%; left: 0; top: 0; background-size: 100%; display: flex; position: absolute; z-index: 2; opacity: 0; transition: opacity 0.3s; }
.cd-product-viewer-wrapper.loaded .product-sprite { opacity: 1; cursor: ew-resize; }

/* Handle */
.cd-product-viewer-handle { width: 60%; max-width: 300px; height: 4px; margin: 1em auto 3em; background: #444444; position: relative; z-index: 2; border-radius: 2px; }
.cd-product-viewer-handle .fill { width: 100%; height: 100%; left: 0; top: 0; background: var(--color-blue); position: absolute; z-index: 1; border-radius: inherit; transform: scaleX(0); transform-origin: left center; transition: transform 0.5s; }
.no-csstransitions .cd-product-viewer-handle .fill { display: none; }

.loaded .cd-product-viewer-handle .fill { opacity: 0; transition: transform 0.3s, opacity 0.2s 0.3s; }
.cd-product-viewer-handle .handle { width: 44px; height: 44px; left: 0; top: -20px; color: transparent; text-indent: 100%; white-space: nowrap; background: var(--color-blue) url(../images/cd-arrows.svg) no-repeat center center; display: inline-block; position: absolute; z-index: 2; border-radius: 50%; box-shadow: 0 0 0 6px rgba(2 114 178 / 30%), 0 0 20px rgba(0 0 0 / 20%); overflow: hidden; transform: translateX(-50%) scale(0); transition: box-shadow 0.2s; }
.cd-product-viewer-handle .handle:active { box-shadow: 0 0 0 0 rgba(2 114 175 / 0), 0 0 20px rgba(0, 0, 0, 0.2); }
.loaded .cd-product-viewer-handle .handle { transform: translateX(-50%) scale(1); animation: cd-bounce 0.3s 0.3s; animation-fill-mode: both; cursor: ew-resize; }

.cd-product-instruction { font-size: 15px; font-weight: 700; line-height: 20px; }

@keyframes cd-bounce {
	0% {
		transform: translateX(-50%) scale(0);
	} 60% {
		transform: translateX(-50%) scale(1.1);
	} 100% {
		transform: translateX(-50%) scale(1);
	}
}