html
{
    width: 100%;
    height: 100%;
}

body
{
	width: 100%;
    height: 100%;
	font: normal 12px Gilroy;
}

	div.scroll-wrap
	{
		width: 100%;
		height: 100%;
	}
	
	div.main-scroll
	{
		float: left;
		width: 100%;
	}
	
		img
		{
			border: none;
		}
		
		p
		{
			margin: 20px 0px;
			font-size: 16px;
			line-height: 24px;
		}

		
		i.up-arrow
		{
			position: fixed;
			right: 40px;
			margin: 0px;
			padding: 20px;
			bottom: 40px;
			font-size: 20px;
			color: var(--color-main);
			background: conic-gradient(var(--color-main) 0%, var(--color-main-light) 0%);
			border-radius: 30px;
			z-index: 1;
			visibility: hidden;
			opacity: 0;
			cursor: pointer;
			transition: 0.3s;
			-o-transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		
			i.up-arrow:before
			{
				position: relative;
				z-index: 2;
			}
			
			i.up-arrow:after
			{
				position: absolute;
				content: '';
				width: 56px;
				height: 56px;
				top: 50%;
				left: 50%;
				margin-left: -28px;
				margin-top: -28px;
				background: #fff;
				border-radius: 46px;
				z-index: 1;
			}
			
			i.up-arrow.active
			{
				visibility: visible;
				opacity: 1;
			}
			
		ul.navigation
		{
			float: left;
		}
			
			ul.navigation li
			{
				position: relative;
				float: left;
				list-style-type: none;
			}
			
				a.dropdown
				{
					position: relative;
					display: block;
					line-height: 20px;
					padding: 10px 5px;
					color: #222;
				}
				
					a.dropdown i
					{
						font-size: 16px;
						float: right;
						margin: 2px 0px;
					}
				
					a.dropdown:before,
					a.dropdown:after
					{
						position: absolute;
						content: '';
						background: var(--color-main);
						bottom: 0px;
						width: 0%;
						height: 2px;
						transition: 0.2s;
						-o-transition: 0.2s;
						-webkit-transition: 0.2s;
					}
					
					a.dropdown:before
					{
						right: 50%;
					}
					
					a.dropdown:after
					{
						left: 50%;
					}
				
					a.dropdown:hover:before,
					a.dropdown:hover:after,
					a.dropdown.active:before,
					a.dropdown.active:after
					{
						width: 50%;
					}
				
				ul.dropdown
				{
					position: absolute;
					background: #fff;
					box-shadow: 0 6px 12px rgba(0,0,0,.175);
					top: 40px;
					width: 100%;
					visibility: hidden;
					opacity: 0;
					transition: 0.1s;
					-o-transition: 0.1s;
					-webkit-transition: 0.1s;
					z-index: 13;
				}
				
				ul.dropdown.right
				{
					right: 0px;
				}
				
				ul.navigation li a.active + ul.dropdown
				{
					visibility: visible;
					opacity: 1;
				}
				
					ul.dropdown li
					{
						width: 100%;
					}
					
						ul.dropdown li a
						{
							display: block;
							padding: 10px;
							margin: 0px;
							color: #222;
							border: none;
						}
						
						ul.dropdown li a:hover,
						ul.dropdown li a.active
						{
							background: #f3f3f3;
						}		
				
	div.main-wrap
	{
		float: left;
		width: 100%;
	}

		div.basic-container
		{
			position: relative;
			width: 1200px;
			margin: 0px auto;
		}
		
			div.flex-container
			{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

	div.main-wrap.top
	{
		position: relative;
		height: 40px;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
	}
	
	div.main-wrap.search
	{
		margin-top: 20px;
	}
				
	div.main-wrap.head
	{
		padding: 15px 0px;
		background: #f8f8f8;
		border-bottom: 1px solid #eee;
	}

		a.logo
		{
			float: left;
			width: 180px;
			height: 60px;
			background: url('/img_files/items/logo.svg') no-repeat center;
			background-size: contain;
		}
		
	div.main-wrap.middle
	{
		padding: 20px 0px;
		overflow: hidden;
	}

		div.middle-bar
		{
			display: flex;
			float: left;
			width: 100%;
		}
		
			div.left-side-bar
			{
				width: 280px;
				float: left;
				margin-right: 20px;
			}
			
				div.bar-wrap
				{
					position: relative;
					z-index: 2;
				}
				
					div.bar-head
					{
						float: left;
						width: 100%;
					}
					
						.bar-title
						{
							display: block;
						}
						
							.bar-title i
							{
								font-size: 20px;
								float: left;
								margin-right: 10px;
								padding: 10px;
								background: var(--color-main);
								border-radius: 0px 30px 30px;
								color: #fff;
							}
							
							.bar-title span
							{
								display: block;
								text-transform: uppercase;
								font-size: 24px;
								font-weight: 100;
								line-height: 30px;
								padding: 5px 0px;
								color: #000;
							}
			
			div.center-side-bar
			{
				float: left;
				width: 900px;
				flex-grow: 1;
			}
			
				div.page-content
				{
					position: relative;
					float: left;
					width: 100%;
				}
				
					div.page-title
					{
						position: relative;
						display: flex;
						align-items: start;
						justify-content: space-between;
						float: left;
						width: 100%;
					}
					
					div.page-title.home
					{
						justify-content: end;
					}
					
						h1,
						span.title
						{
							display: inline-block;
							font-size: 24px;
							font-weight: 500;
							line-height: 30px;
							color: #555;
						}
						
				
					ul.breadcrumbs
					{
						width: 100%;
						list-style-type: none;
						float: left;
						margin-bottom: 25px;
					}

						ul.breadcrumbs li
						{
							float: left;
						}
						
						ul.breadcrumbs li.last-breadcrumb span
						{
							display: block;
							line-height: 16px;
							color: #000;
						}
						
						ul.breadcrumbs li a
						{
							float: left;
						}
						
							ul.breadcrumbs li a i
							{
								float: left;
								color: var(--color-main-text);
								font-size: 16px;
							}
							
							ul.breadcrumbs li a span
							{
								display: block;
								line-height: 16px;
								color: var(--color-main-text);
							}
							
							ul.breadcrumbs li a span.catalog
							{
								padding: 0px 5px;
								font-weight: 700;
								color: #fff;
								background: #c52c2c;
								border-radius: 3px;
								animation: tilt-shaking 0.3s linear infinite;
							}
							
							ul.breadcrumbs li:first-child a span
							{
								display: none;
							}
							
						ul.breadcrumbs li i.arrow
						{
							float: left;
							font-size: 12px;
							margin: 2px 5px;
							color: var(--color-main-text);
						}

					div.page-desc
					{
						float: left;
						width: 100%;
					}
					
						div.page-desc ul, 
						div.page-desc ol
						{
							font-size: 16px;
							margin-left: 40px;
						}