@charset "UTF-8";
/* CSS Document */



.product-wrapper
{
	background-color:#292929;
	height:100%;
	
	position:absolute;
}

#product-inner-wrapper
{
	width:100%;
	height:100%;
	margin:0 auto;
}

.product-category-banner
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:relative;
	width:100%;
	height:auto;
	margin-top:20px;
	margin-bottom:6px;
	padding-top:20px;
	
	border-top:3px dashed #bbb;
	
	text-align:center;
	font-family:Avenir-Medium;
	font-size:20px;
	color:#bbb;
}




/*normal object tile */

.product-object
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:relative;
	display:inline-block;
	background-color:#000;
	width:100px;
	height:100px;
	padding:0;
	overflow:hidden;
	
	border:20px solid #292929;
	border-radius:40px;
}

.product-img-wrapper
{
	position: absolute; width:100%; height:100%; box-sizing:border-box; opacity:0.4;
}

.product-img
{
	position: absolute; width:auto; height:auto; max-width:100%; max-height:100%; margin: auto; top: 0; left: 0; right: 0; bottom: 0;	
}

.product-sub-wrapper
{
	position:absolute; width:100%; height:100%;
}

.product-sub-panel
{
	width:100%;
	height:50%;
	z-index:3;
}

.product-interest-default
{
	background-color:#bb5547;
	animation:flipDown 0.5s;
}

.product-interest-selected
{
	background-color:#2bc39a;
	animation:flipDown 0.5s;
}

.product-detail
{
	background-color:#444;
	animation:flipUp 0.5s;
}





/*custom object tile */

#add-product-button
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:relative;
	display:inline-block;
	background-color:#49b4d7;
	width:100px;
	height:100px;
	padding:0;
	overflow:hidden;
	
	border:20px solid #292929;
	border-radius:40px;
}

#add-product-img
{
	position: absolute; width:auto; height:auto; max-width:40%; max-height:40%; margin: auto; top: 0; left: 0; right: 0; bottom: 0;
}

.custom-object
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	position:relative;
	display:inline-block;
	background-color:#49b4d7;
	width:100px;
	height:100px;
	padding:0;
	overflow:hidden;
	
	border:20px solid #292929;
	border-radius:40px;
	
	color:#FFF;
	font-family:Avenir-Black;
	font-size:20px;
	
	animation:scaleUp 0.5s;
}

.custom-sub-panel
{
	width:100%;
	height:50%;	
}

.custom-inner-object
{
	position:absolute;
	display:table;
	
	width:100%;
	height:100%;
	
	text-align:center;
}

.custom-title
{
	display:table-cell;
	
	vertical-align:middle;
}

#custom-remove-id
{
	background-color:#bb5547;
	animation:flipDown 0.5s;
}

#custom-detail-id
{
	background-color:#444;
	animation:flipUp 0.5s;
}


@keyframes scaleUp 
{
	0% { transform-origin:center; animation-mode:forwards; transform:scale(0,0)}
	100% { transform-origin:center; animation-mode:forwards; transform:scale(1,1)}
}

@keyframes flipUp 
{
	0% { transform-origin:bottom; animation-mode:forwards; transform:scaleY(0) }
	100% { transform-origin:bottom; animation-mode:forwards; transform:scaleY(1) }
}

@keyframes flipDown 
{
	0% { transform-origin:top; animation-mode:forwards; transform:scaleY(0) }
	100% { transform-origin:top; animation-mode:forwards; transform:scaleY(1) }
}