div.catalog-grid
{
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 20px;
	padding-bottom: 25px;
	overflow: hidden;
}

	a.catalog-cell
	{
		position: relative;
		float: left;
		width: 100%;
		overflow: hidden;
	}
	
		span.catalog-cell-img-wrap
		{
			position: relative;
			float: left;
			width: 100%;
			overflow: hidden;
		}
	
			span.catalog-cell-img
			{
				position: relative;
				float: left;
				width: 100%;
				padding-top: 100%;
				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				transform: scale(1);
				transition: 0.3s;
				-o-transition: 0.3s;
				-webkit-transition: 0.3s;
			}
			
				span.catalog-cell-img:after
				{
					position: absolute;
					content: '';
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					transition: 0.3s;
					-o-transition: 0.3s;
					-webkit-transition: 0.3s;
				}
			
		a.catalog-cell:hover span.catalog-cell-img
		{
			transform: scale(1.1);
		}
		
		span.catalog-cell-name
		{
			float: left;
			width: 100%;
			padding: 5px 10px;
			box-sizing: border-box;
			color: #000;
			font-size: 12px;
			font-weight: 600;
			text-align: center;
		}

div.product-sort-container
{
	float: left;
    width: 100%;
    margin-bottom: 25px;
    padding: 5px;
    background: #f8f8f8;
	border: 1px solid #eee;
    border-radius: 5px;
    box-sizing: border-box;
}

	ul.product-sort-list
	{
		float: left;
		width: 100%;
		list-style-type: none;
	}
	
		ul.product-sort-list li
		{
			float: right;
			margin-left: 5px;
		}
		
			span.sort-element
			{
				font-size: 10px;
				line-height: 20px;
				text-transform: uppercase;
				color: #fff;
				cursor: pointer;
			}
			
			span.sort-element.active
			{
				text-decoration: underline;
			}

				span.sort-element span
				{
					margin: 0px 5px;
				}
			
				span.sort-element i
				{
					font-size: 18px;
					float: left;
					margin: 1px 0px;
				}
				
				span.sort-element i.sort
				{
					float: right;
				}

			span.view-element
			{
				cursor: pointer;
			}
			
				span.view-element i
				{
					font-size: 18px;
					float: left;
					margin: 1px;
				}
				
			span.stock-element
			{
				cursor: pointer;
			}
			
				span.stock-element i
				{
					font-size: 18px;
					float: left;
					margin: 1px;
				}
				
	div.loading-wrap
	{
		float: left;
		width: 100%;
		text-align: center;
	}
	
		button.loading-btn
		{
			display: inline-block;
			border: none;
			background: var(--color-main);
			padding: 10px 15px;
			color: #fff;
			cursor: pointer;
			transition: 0.3s;
			-o-transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		
		button.loading-btn:hover
		{
			background: var(--color-main-dark);
		}
		
		button.loading-btn:active
		{
			background: var(--color-main);
		}
		
			button.loading-btn i
			{
				float: left;
				font-size: 20px;
			}
			
			button.loading-btn.active i
			{
				-webkit-animation: rotation 1s infinite linear;
			}
			
			button.loading-btn span
			{
				float: left;
				margin-left: 5px;
				font-size: 14px;
				line-height: 20px;
				text-transform: uppercase;
			}


@-webkit-keyframes rotation
{
    from
	{
		-webkit-transform: rotate(0deg);
	}
	
    to 
	{
		-webkit-transform: rotate(359deg);
	}
}