div.site-catalog
{
	position: fixed;
	display: flex;
    align-items: center;
	width: 100%;
	height: 100%;
	padding: 50px 0px;
    box-sizing: border-box;
	background: rgb(0 0 0 / 80%);
	visibility: hidden;
    opacity: 0;
	transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    z-index: 99;
}

div.site-catalog.show
{
	visibility: visible;
    opacity: 1;	
}

	div.catalog-bg
	{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
	}
	
	div.catalog-wrap
	{
		position: relative;
		display: flex;
		flex-direction: column;
		width: 700px;
		max-height: 100%;
		margin: 0px auto;
		padding: 15px 20px 20px;
		box-sizing: border-box;
		background: #fff;
	}

		div.catalog-head
		{
			position: relative;
			display: table;
			width: 100%;
			margin-bottom: 20px;
			padding-bottom: 20px;
			border-bottom: 1px dashed #000;
		}
		
			div.catalog-head-cell
			{
				display: table-cell;
				vertical-align: middle;
			}
			
				div.catalog-head-label
				{
					display: table;
					width: 100%;
				}
				
					div.catalog-head-label-cell
					{
						display: table-cell;
						height: 40px;
						vertical-align: middle;
					}
					
						span.catalog-menu
						{
							display: block;
							width: 150px;
							height: 40px;
							background: url('/img_files/items/menu.svg') no-repeat center;
							background-size: contain;
						}
			
			div.catalog-head-cell.ctrl
			{
				width: 0px;
			}
			
			div.catalog-head-cell.ctrl-close
			{
				width: 0px;
				padding-left: 30px;
			}
			
				i.catalog-close
				{
					display: block;
					font-size: 24px;
					color: #ed2224;
					cursor: pointer;
				}

		div.catalog-body
		{
			position: relative;
			float: left;
			width: 100%;
			height: 100%;
			overflow-y: scroll;
			padding-right: 10px;
			box-sizing: border-box;
		}
		
			ul.catalog-menu
			{
				position: relative;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				width: 100%;
				row-gap: 10px;
				column-gap: 10px;
			}
			
				ul.catalog-menu li
				{
					position: relative;
					list-style-type: none;
				}
				
					ul.catalog-menu li:hover > div.settings_menu
					{
						display: block; 
					}
				
					ul.catalog-menu li > a
					{
						position: relative;
						display: block;
						padding-top: 100%;
					}
					
						ul.catalog-menu li > a span.catalog-img
						{
							position: absolute;
							top: 0px;
							width: 100%;
							height: 100%;
							overflow: hidden;
							background-position: center;
							background-size: cover;
							background-repeat: no-repeat;
							border-radius: 10px;
						}
						
						ul.catalog-menu li > a span.catalog-img:before
						{
							position: absolute;
							content: '';
							top: 0px;
							width: 100%;
							height: 100%;
							background: rgb(0 0 0 / 20%);
							transition: 0.3s;
							-o-transition: 0.3s;
							-webkit-transition: 0.3s;
						}
						
						ul.catalog-menu li > a:hover span.catalog-img:before
						{
							background: rgb(0 0 0 / 0%);
						}
					
						ul.catalog-menu li > a span.catalog-name
						{
							position: absolute;
							bottom: 0px;
							margin: 10px;
							padding: 5px 10px;
							font-size: 12px;
							font-weight: 500;
							line-height: 16px;
							text-transform: uppercase;
							color: #fff;
							background: rgb(0 0 0 / 50%);
							border-radius: 5px;
						}
											
ul.products-sort
{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    row-gap: 1px;
    column-gap: 1px;	
}

	ul.products-sort li
	{
		display: flex;
		align-items: end;
		height: 120px;
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
	}

		div.product-sort-info
		{
			width: 100%;
			padding: 5px;
			font-size: 12px;
			background: rgba(0, 0, 0, 0.4);
		}
		
			span.product-sort-name
			{
				display: block;
				text-align: center;
				color: #fff;
			}