
.catalog {display: flex; align-items: flex-start;}

	.catalogSidebar {min-width: 325px; width: 325px;}
		#wrapper.animationON .catalogSidebar {animation: fadeIn 1.2s ease;}
		
	.catalog-section {margin: 0 0 0 65px; width: 100%;}
		#wrapper.animationON .catalog-section {animation: fadeInUp_30px 1.2s ease;}
	
	
		#catalogFilter {position: relative; margin: 25px 0 46px 0; font-size: 13px;}
			#catalogFilterForm {border: 1px solid #e4e4e4; width: 50px; height: 50px; text-align: center; display: none;
				border-radius: 100%; top: -1px; position: absolute; cursor: pointer; box-sizing: border-box; font-size: 20px; line-height: 49px; background: #fafafa;
			}
			
			.catalogOrder {position: absolute; display: flex; flex-direction: column; border: 2px solid #e4e4e4; border-radius: 100px;
				transition: background .2s ease; min-width: 217px; box-sizing: border-box; cursor: pointer; background: #fbfbfb; z-index: 3;
			}
				.catalogOrder.open {border-color: #fff; background: #fff; top: -9px; left: -8px; border-radius: 10px; padding: 11px 0; box-shadow: 0px 20px 45px rgba(0, 0, 0, .09);}
					.catalogOrder.open a {display: block; padding: 12px 49px 12px 26px;}
					
				.catalogOrder svg {position: absolute; top: 21px; right: 20px; transition: transform .4s ease;}
				.catalogOrder.open svg {transform: rotate(180deg); top: 30px; right: 24px;}
				
					.catalogOrder a {display: none; padding: 14px 23px 14px 18px;}
					.catalogOrder.open a:not(.redcodeColor) {color: #454545;}
						.catalogOrder a i {margin: 0 6px 0 0; font-size:12px;}
					.catalogOrder a.active {display: block; border-radius: 100px; color: #454545;}
					.catalogOrder.open a.active {border-radius: 0;}
				
				
			.catalogType {float: right; display: flex; border: 2px solid #e4e4e4; background: #fbfbfb; padding: 3px; border-radius: 100px;}
				.catalogType a {position: relative; width: 37px; height: 37px; border-radius: 50%;}
				.catalogType a.active {background-color: #fff; box-shadow:0px 20px 20px rgba(0, 0, 0, .05), 0px 10px 10px rgba(0, 0, 0, .05), 0px 5px 5px rgba(0, 0, 0, .05), 0px 1px 1px rgba(0, 0, 0, .05); cursor: default;}
					.catalogType a svg {position: absolute; top: 50%; left: 50%; margin: -5.5px 0 0 -5.5px;}


@media all and (max-width: 1180px) {
	.catalog-section {margin: 0 0 0 55px;}
}

@media all and (max-width: 990px){
	.catalogSidebar {display: none;}

	.catalog-section {margin: 0; width: 100%;}
		#catalogFilterForm {display: block;}
		.catalogOrder {left: 70px;}
		.catalogOrder.open {left: 61px;}
}

@media all and (max-width: 465px){
	#catalogFilter {padding: 65px 0 0 0;}
		#catalogFilterForm {top: 0;}
		.catalogOrder {top: 0;}
		.catalogType {float: none; display: inline-flex;}
}

@media all and (max-width: 370px){
	#catalogFilter {padding: 60px 0 0 0;}
	.catalogOrder {left: 60px;}
	.catalogOrder.open {left: 50px;}
}