/* AWS 360 Product Viewer - frontend styles */

.aws-360-viewer-outer {
	width: 100%;
}

.aws-360-viewer-wrapper {
	position: relative;
	width: 500px;
	height: 375px;
	max-width: 100%;
	text-align: center;
}

.aws-360-viewer-frame {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	background-color: #efefef;
	border-radius: 4px;
}

.aws-360-viewer-sprite {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	opacity: 0;
	transition: opacity 0.3s;
}

.aws-360-viewer-wrapper.aws-360-loaded .aws-360-viewer-sprite {
	opacity: 1;
	cursor: ew-resize;
}

.aws-360-viewer-handle-track {
	position: relative;
	z-index: 2;
	width: 60%;
	max-width: 300px;
	border-radius: 50em;
	margin: 14px auto 0;
	height: 4px;
	background: #d8d8d8;
}

.aws-360-viewer-handle-fill {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: #b54240;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s;
}

.aws-360-viewer-wrapper.aws-360-loaded .aws-360-viewer-handle-fill {
	opacity: 0;
	transition: transform 0.3s, opacity 0.2s 0.3s;
}

.aws-360-viewer-handle {
	position: absolute;
	z-index: 2;
	display: inline-block;
	height: 34px;
	width: 34px;
	left: 0;
	top: -15px;
	background: #b54240 url(../img/cd-arrows.svg) no-repeat center center;
	background-size: 18px;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(181, 66, 64, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);
	cursor: ew-resize;
	transform: translateX(-50%) scale(0);
	transition: box-shadow 0.2s;
}

.aws-360-viewer-handle:active {
	box-shadow: 0 0 0 0 rgba(181, 66, 64, 0), 0 0 20px rgba(0, 0, 0, 0.2);
}

.aws-360-viewer-wrapper.aws-360-loaded .aws-360-viewer-handle {
	transform: translateX(-50%) scale(1);
	animation: aws-360-bounce 0.3s 0.3s;
	animation-fill-mode: both;
}

.aws-360-viewer-handle.aws-360-draggable {
	cursor: ew-resize;
}

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

.aws-360-viewer-placeholder {
	padding: 40px 20px;
	text-align: center;
	background: #f5f5f5;
	border: 1px dashed #ccc;
	color: #888;
	font-size: 14px;
}