@charset "UTF-8";

article div.catalog,
article div.catalog > ul {
	position : relative;
	display : flex;
	}
	
article  div.catalog > ul {
	align-content : flex-start;
    flex-wrap : wrap;
    flex : 1;
    margin : 0;
    list-style : none;	
	}
	
article  div.catalog > ul > li > a,
article  div.catalog > ul > li > a > img,
article  div.catalog > ul > li > a > div > strong,
article  div.catalog > ul > li > a > div > span { display : block; }

article  div.catalog > ul > li > a > img {
	width : 100%;
	height : auto;
	}
	
article  div.catalog > ul > li > a {
	position : relative;
	top : 0;
	left : 0;
	z-index : 10;
	width : 100%;
	height : 100%;
	min-height : 300px;
	background : rgba(255, 255, 255, 1);
	color : rgba(55, 55, 55, 1);
	font : 500 14px/20px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
	box-shadow : 0 0 2px rgba(0, 0, 0, 0.25);
	transition : all 0.15s ease;
	}
	
article  div.catalog > ul > li > a:hover {
	top : -2px;
	box-shadow : 0 0 20px rgba(0, 0, 0, 0.25);
	}
	
article  div.catalog > ul > li > a > div { padding : 25px; }

article  div.catalog > ul > li > a > div > span { 
	font-weight : 400 !important; 
	color : rgba(153, 153, 153, 1) !important;
	}

article  div.catalog > div {
	top : -40px;
	z-index : 20;
	width : 0;
	min-height : 100%;
	background : rgba(255, 255, 255, 1);
	box-shadow : 0 0 20px rgba(0, 0, 0, 0.25);
	overflow : hidden;
	transition : all 0.25s ease;
	}
	
article  div.catalog > div > span > button {
	position : absolute;
	top : 0;
	right : 0;
	z-index : 10;
	width : 40px;
	height : 40px;
	margin : 0;
	padding : 0;
	border : 0;
	border-radius : 0 !important;
	cursor : pointer;
	background-color : rgba(196, 53, 75, 1);
	transition : all 0.25s ease;
	}
	
article div.catalog > div > span > button::before,
article div.catalog > div > span > button::after {
	display : block;
	position : absolute;
	top : 18px;
	left : 8px;
	z-index : inherit;
	width : 25px;
	height : 4px;
	border-radius : 2px;
	background-color : rgba(255, 255, 255, 1);
	content : '';
	}

article div.catalog > div > span > button::before { transform : rotate(45deg); }	
article div.catalog > div > span > button::after { transform : rotate(-45deg); }

article>div.funnel {
	position : relative;
	height : 40px;
	border-top : solid 1px rgba(227, 227, 227, 1);
	}

article div.catalog > div > span,
article>div.funnel > span {
	height : 40px;
	padding : 0 20px;
	cursor : pointer;
	}
	
article div.catalog > div > span {
	display : block;
	width : 100%;
	background-color : rgba(136, 34, 37, 1);
	color : rgba(255, 255, 255, 1);
	}
	
article>div.funnel > div {
	position : absolute;
	left : calc(50% - 100px);
	z-index : 10;
	width : 200px;
	color : rgba(155, 155, 155, 1);
	font : 400 14px/40px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
	text-align : center;
	}
		
article>div.funnel > span {
	background-color : rgba(255, 255, 255, 1);
	color : rgba(55, 55, 55, 1);
	transition : all 0.25s ease;
	}

article>div.funnel > span::before,
article div.catalog > div > span::before {
	padding : 0 10px 0 0;
	font : normal 16px/40px 'moscowhome', Arial, Tahoma, Verdana, sans-serif;
	content : '\e92c';
	}
	
article>div.funnel > span::after,
article div.catalog > div > span::after {
	font : 500 16px/40px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
	content : 'Уточнить';
	}

article>div.funnel > span::before { color : rgba(136, 34, 37, 1); }
article>div.funnel > span:hover {	color : rgba(136, 34, 37, 1); }
article div.catalog > div > span:hover > button { background-color : rgba(174, 47, 66, 1); }
article div.catalog > div.open { width : 280px; }

article div.catalog > div > form > ul {
	width : 100%;
	margin : 0;
	padding : 20px 10px;
	list-style : none;
	}
.bx-pagination {
	margin: 10px auto!important;
}
.bx-pagination .bx-pagination-container ul li.bx-active span {
	background: rgba(55, 55, 55, 1)!important;
	color: #fff;
}
article div.catalog > div > form > ul > li { margin : 0 0 10px 0; }
	
article div.catalog > div > form > ul > li > span {
	display : block;
	position : relative;
	padding : 0 0 0 30px;
	color : rgba(155, 155, 155, 1);
	font : 400 16px/30px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
	cursor : pointer;
	transition : all 0.25s ease;
	}

article div.catalog > div > form > ul > li > span::before {
	position : absolute;
	top : 0;
	bottom : 0;
	left : 0;
	right : 0;
	z-index : 10;
	width : 30px;
	height : 30px;
	color : rgba(55, 55, 55, 1);
	font : normal 16px/30px 'moscowhome', Arial, Tahoma, Verdana, sans-serif;
	text-align : center;
	content : '\e918';
	transition : all 0.25s ease;
	}

article div.catalog > div > form > ul > li.rotate > span::before { transform : rotate(90deg); }
article div.catalog > div > form > ul > li > span:hover { color : rgba(136, 34, 37, 1); }

article div.catalog > div > form > ul > li > ul {
	width : 100%;
	max-height : 0;
	padding : 0 0 0 30px;
	margin : 0;
	list-style : none;
	overflow : hidden;
	transition : all 0.25s ease;
	}
	
article div.catalog > div > form > ul > li > ul > li {
	padding : 10px 0;
	color : rgba(55, 55, 55, 1);
	font : 500 14px/20px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
	cursor : pointer;
	}

article div.catalog > div > form > ul > li.rotate > ul { max-height : 10000px; }
article div.catalog > div > form > ul > li > ul > li:hover { color : rgba(136, 34, 37, 1); }
article div.catalog > div > form > ul > li > ul > li > input[type='checkbox'] { display : none; }

article div.catalog > div > form > ul > li > ul > li > span {
	display : block;
	position : relative;
	padding : 0 0 0 30px;
	}

article div.catalog > div > form > ul > li > ul > li > span::before {
	position : absolute;
	top : 0;
	left : 0;
	z-index : 10;
	width : 16px;
	height : 16px;
	border : solid 2px rgba(155, 155, 155, 1);
	content : '';
	}
	
article div.catalog > div > form > ul > li > ul > li > span::before,
article div.catalog > div > form > ul > li > ul > li > span::after { transition : all 0.25s ease; }
	
article div.catalog > div > form > ul > li > ul > li.checked > span::before {
	background-color : rgba(136, 34, 37, 1);
	border : solid 2px rgba(136, 34, 37, 1);
	}
	
article div.catalog > div > form > ul > li > ul > li.checked > span::after {
	position : absolute;
	top : 5px;
	left : 5px;
	z-index : 20;
	width : 8px;
	height : 4px;
	border-left : solid 2px rgba(255, 255, 255, 1);
	border-bottom : solid 2px rgba(255, 255, 255, 1);
	content : '';
	transform : rotate(-45deg);
	}

article div.catalog > ul > li.pagination {
	width : 100% !important;
	padding : 20px;
	}
	
article div.catalog > ul > li.pagination > ol {
	width : 100%;
	height : 40px;
	margin : 0;
	padding : 0;
	list-style : none;
	display : flex;
	justify-content : center;
	counter-reset : num;
	}
	
article div.catalog > ul > li.pagination > ol > li {
	position : relative;
	width : 40px;
	height : 40px;
	margin : 0 5px;
	border-radius : 50%;
	cursor : pointer;
	}
	
article div.catalog > ul > li.pagination > ol > li::before,
article div.catalog > ul > li.pagination > ol > li::after {
	display : block;
	position : absolute;
	top : 0;
	left : 0;
	z-index : 10;	
	width : 100%;
	height : 100%;
	border-radius : inherit;
    text-align : center;
    transition : all 0.25s ease;
   	}

article div.catalog > ul > li.pagination > ol > li::before { 
	content : ''; 
	background-color : rgba(55, 55, 55, 0.3);
	transform : scale(0, 0);
	}

article div.catalog > ul > li.pagination > ol > li:hover::before { transform : scale(1, 1); }
article div.catalog > ul > li.pagination > ol > li::after { color : rgba(55, 55, 55, 1); }

article div.catalog > ul > li.pagination > ol > li.selected::before,
article div.catalog > ul > li.pagination > ol > li.selected:hover::before { 
	background-color : rgba(55, 55, 55, 1); 
	transform : scale(1, 1);
	}

article div.catalog > ul > li.pagination > ol > li:hover::after,
article div.catalog > ul > li.pagination > ol > li.selected::after,
article div.catalog > ul > li.pagination > ol > li.selected:hover::after,
article div.catalog > ul > li.pagination > ol > li.prev:hover::after,
article div.catalog > ul > li.pagination > ol > li.next:hover::after { color : rgba(255, 255, 255, 1); }

article div.catalog > ul > li.pagination > ol > li.page::after {  	
    content : counter(num);
    counter-increment : num;
    font: 500 16px/40px 'GothamPro', Arial, Tahoma, Verdana, sans-serif;
    }
    
article div.catalog > ul > li.pagination > ol > li.prev::after,
article div.catalog > ul > li.pagination > ol > li.next::after {
	color : rgba(136, 34, 37, 1);
	font : normal 18px/40px 'moscowhome', Arial, Tahoma, Verdana, sans-serif;
	text-align : center;
	content : '\e918';	
	}

article div.catalog > ul > li.pagination > ol > li.prev::after { transform : rotate(-180deg); }

.smartfilter .btn {
	color: #fff;
	font-size: 0.8em;
}

.smartfilter .btn-link {
	color: #882225;
	font-size: 0.8em;
	background-color: #fff;
}

.preview_photo {
	padding: 0px !important;
	margin: 0px;
	width: 100%;
	overflow: hidden;
	/*max-height: 195px;*/
	height: 195px;
}

.preview_photo img {
	width: 100%;

	height: 100%;
	object-fit: cover;
}

@media only screen and (min-width : 1441px) {
	article div.catalog > ul { padding : 10px 0 30px 0; }
	
	article div.catalog > ul > li {
		width : 25%;
		padding : 10px;
		}
		
	article div.catalog > div { 
		position : relative; 
		margin-right : 10px;
		}
		
	article div.funnel > div { top : 0; }
	}
	
@media only screen and (min-width : 961px) and (max-width : 1440px) {
	article div.catalog > ul { padding : 10px 0 30px 0; }
	
	article div.catalog > ul > li {
		width : 33%;
		padding : 10px;
		}
		
	article div.catalog > div { 
		position : relative; 
		margin-right : 10px;
		}
		
	article div.funnel > div { top : 0; }
	}
	
@media only screen and (min-width : 481px) and (max-width : 960px) {
	article { margin : 0 auto !important; }
	article div.brief,
	article div.content { margin : 0 40px; }
	article div.funnel { margin : 20px 40px 0 40px; }
	article div.catalog { padding : 0 30px; }
	article div.catalog > ul { padding : 10px 0 30px 0; }
	
	article div.catalog > ul > li {
		width : 50%;
		padding : 10px;
		}
		
	article div.catalog > div { position : absolute; }
	article div.funnel > div { top : -40px; }
	}
	
@media only screen and (max-width : 480px) {
	article { margin : 0 auto !important; }
	article div.brief,
	article div.content { margin : 0 20px; }
	article div.funnel { margin : 20px 20px 0 20px; }
	article div.catalog { padding : 0 20px; }
	article div.catalog > ul { padding : 10px 0 30px 0; }
	
	article div.catalog > ul > li { 
		width : 100%; 
		padding : 10px 0;
		}
		
	article div.catalog > div { position : absolute; }
	article div.funnel > div { top : -40px; }	
	}