/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.preload_img
{
	display:none;
}
.mode-360-wrapper
{
	height:450px;
}
body .product-360-wrap img, .preload_img{
	max-width: 100%;
	height: 450px;
	width: auto;	
}
body #notification_marker{
	height: 450px;
	width: 100%;
}

@media screen and (max-width: 767px){
	.product-360-wrap{
		width: 80% !important;
		height: auto !important;
	}
	#view_overlay
	{
		width: 100% !important;
		height: 250px !important;
	}
	body .product-360-wrap img, body .preload_img {
	max-width: 100%;
	height: 250px;
	width: auto;	
	}
	#notification_marker
	{
	transform:translate(0%, -80%) !important;
	}
	#notification_marker .text-center
	{
		text-align: center;
	}
	#notification_marker svg
	{
		max-width: 50px;
		text-align: center;
	}
	.mode-360-wrapper
	{
		height:250px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1023px){
	body .product-360-wrap img, body .preload_img {
	max-width: 100%;
	height: 250px !important;
	width: auto;	
	}
	.mode-360-wrapper, #view_overlay, body #notification_marker
	{
		height:250px !important;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1260px){
	body .product-360-wrap 
	{
		width:350px !important;
	}
	body .product-360-wrap img, body .preload_img {
	max-width: 100%;
	height: 300px !important;
	width: auto;	
	}
	.mode-360-wrapper, #view_overlay, body #notification_marker
	{
		height:300px !important;
	}	
}