.framesmechanisms .framesmechanisms-title, .framesmechanisms .framesmechanisms-title-block { 
    padding: 10px 0; 
    border: 1px solid #ebebeb; 
    background-color: #f5f5f5; 
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}
.framesmechanisms .framesmechanisms-title-block { margin: 18px 0 1px 0 }
.framesmechanisms .framesmechanisms-title span { padding: 0 18px; display: block }
.framesmechanisms .framesmechanisms-title-block h2 { margin-bottom: 0; font-size: 24px; line-height: 24px; font-weight: 400; padding: 0 18px }
.framesmechanisms .framesmechanisms-title-block h2#mechanisms { display: inline-block }
.framesmechanisms .framesmechanisms-title-block .product_types { padding-top: 4px; padding-left: 18px; padding-right: 18px }

.framesmechanisms .framesmechanisms-title-block .product_type {
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 7px;
    font-size: 13px;
    position: relative;
    cursor: pointer;
}
.framesmechanisms .framesmechanisms-title-block .product_type .jq-checkbox { margin-right: 5px }
.framesmechanisms .framesmechanisms-title-block .product_type .count,
.framesmechanisms .sidebars-outer .product_type .count {
    position: relative;
    top: -3px;
    font-size: 10px;
}
.framesmechanisms .framesmechanisms-title-block .colors { margin-top: 10px; padding: 0 18px }
.framesmechanisms .framesmechanisms-title-block.mechanisms .colors { clear: right }
.framesmechanisms .framesmechanisms-title-block.mechanisms > div { border-bottom: 1px solid #d8d4d4 }
.framesmechanisms .framesmechanisms-title-block.mechanisms > div:last-child { border-bottom: none }
.framesmechanisms .framesmechanisms-title-block.mechanisms .category-sort { float: right; border-bottom: none; margin-right: 0; margin-bottom: 10px; margin-right: 18px }
.framesmechanisms .framesmechanisms-title-block .colors > span,
.framesmechanisms .framesmechanisms-title-block .product_types > span { margin-right: 10px }
.framesmechanisms .framesmechanisms-title-block .colors .item { display: inline-block; margin-right: 10px; margin-bottom: 5px }
.framesmechanisms .framesmechanisms-title-block .colors .item .jq-checkbox { margin-right: 10px }
.framesmechanisms .framesmechanisms-title-block .colors .item labek { cursor: pointer }

.framesmechanisms .js-product-list-ajax.with-left-sidebar .framesmechanisms-title-block .colors,
.framesmechanisms .js-product-list-ajax.with-left-sidebar .framesmechanisms-title-block .product_types,
.framesmechanisms .js-product-list-ajax.with-left-sidebar .framesmechanisms-title-block .product_types.visible { display: none }

.framesmechanisms .framesmechanisms-block { display: inline-block !important; width: 100%; position: relative }
.framesmechanisms .framesmechanisms-block.full-screen {
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 1000;
    height: 100%;
    overflow-y: auto;
}
.framesmechanisms .framesmechanisms-block .loading, .framesmechanisms .framesmechanisms-block.full-screen .loading { display: none }

.framesmechanisms .framesmechanisms-block.disabled > *, .framesmechanisms .framesmechanisms-block.full-screen.disabled > *,
.products-block.disabled { opacity: 0.2; pointer-events: none }
.framesmechanisms .framesmechanisms-block.disabled .loading, .framesmechanisms .framesmechanisms-block.full-screen.disabled .loading { 
    opacity: 1; 
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.framesmechanisms .framesmechanisms-block a.go-to-products { display: block; clear: both; max-width: 170px; margin-left: auto; margin-right: auto }
.framesmechanisms .framesmechanisms-block a.go-to-products:hover { color: #fff }
.framesmechanisms .framesmechanisms-block .min-price-info,
.framesmechanisms .framesmechanisms-block .background-options { display: block; float: left; width: 40%; margin-top: 10px }
.framesmechanisms .framesmechanisms-block .min-price-info a { display: block; text-decoration: none; color: #8c8c8c; padding: 5px 30px 5px 15px }
.framesmechanisms .framesmechanisms-block .min-price-info a > span { display: block; float: right }
.framesmechanisms .framesmechanisms-block .min-price-info a span { font-size: 18px; font-weight: 500; line-height: 1 }
.framesmechanisms .framesmechanisms-block.full-screen a.go-to-products,
.framesmechanisms .framesmechanisms-block.full-screen .min-price-info { display: none }

.framesmechanisms .framesmechanisms-block .background-options .background-options-reset {
    padding: 5px 30px 5px 15px;
    margin-top: 10px;
    display: block;
    float: right;
    color: #8c8c8c
}
.framesmechanisms .framesmechanisms-block .background-options .title { padding: 5px 30px 5px 15px; color: #8c8c8c }
.framesmechanisms .framesmechanisms-block .background-options .items {
    padding: 0 30px 0 15px;
    margin: 0;
    height: 30px;
}
.framesmechanisms .framesmechanisms-block .background-options .items .item {
    background: #fff;
    display: inline-block;
    padding: 0;
    margin: 0;
    margin-right: 3px;
    margin-bottom: 3px;
    border: 1px solid #d2d2d2;
    border-radius: 2px;
    cursor: pointer;
    height: 100%;
}
.framesmechanisms .framesmechanisms-block .background-options .items .item.active { border-color: #36a7ad }
.framesmechanisms .framesmechanisms-block .background-options .items .item img { height: 30px; width: 30px }
.framesmechanisms .framesmechanisms-block .background-options .color-selector { padding: 0 30px 0 15px; margin: 0 }

.framesmechanisms .framesmechanisms-block .preview { display: block; float: left; width: 40%; height: 364px; position: relative }
.framesmechanisms .framesmechanisms-block.full-screen .preview { float: none; float: unset; width: 100%; margin-bottom: 20px; height: 50% }
.framesmechanisms .framesmechanisms-block .preview .full-screen {
	width: 32px;
    height: 32px;
    position: absolute;
    top: 5px;
    left: 5px;
    background-image: url(../img/icon-fullscreen.png);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.25);
    background-position: center;
    background-repeat: no-repeat;
}
.framesmechanisms .framesmechanisms-block.full-screen .preview .full-screen { background-image: url(../img/icon-fullscreen-off.png) }
.framesmechanisms .framesmechanisms-block .preview .full-screen:hover { opacity: 0.5 }
.framesmechanisms .framesmechanisms-block .preview .background-image {
    margin: 0 15px 0 0;
    height: 100%;
    background-color: #f5f5f5;
}
.framesmechanisms .framesmechanisms-block .preview .image {
    height: 100%;
	background-position: center;
    background-repeat: no-repeat;
    background-size: 200px;
}
.framesmechanisms .framesmechanisms-block.full-screen .preview .background-image { margin-right: 0 }

.framesmechanisms .framesmechanisms-block .blocks { display: block;  float: right; width: 60% }
.framesmechanisms .framesmechanisms-block.full-screen .blocks { float: none; float: unset; width: 100% }
.framesmechanisms .framesmechanisms-block .blocks > div { margin-bottom: 10px }
.framesmechanisms .framesmechanisms-block .blocks > div:last-child { margin-bottom: 0 }
.framesmechanisms .framesmechanisms-block .blocks .frames-block { display: inline-block; width: 100% }
.framesmechanisms .framesmechanisms-block.full-screen .blocks .frames-block {  }
.framesmechanisms .framesmechanisms-block .blocks .mechanisms-block { display: inline-block; width: 100% }
.framesmechanisms .framesmechanisms-block.full-screen .blocks .mechanisms-block {  }

.framesmechanisms .framesmechanisms-block .blocks .title { font-size: 17px; padding: 0 5px }
.framesmechanisms .framesmechanisms-block .blocks .title span { margin-bottom: 15px; display: inline-block }
.framesmechanisms .framesmechanisms-block.full-screen .blocks .title { margin-left: 2%; margin-right: 2% }
.framesmechanisms .framesmechanisms-block .blocks .title .name {  }
.framesmechanisms .framesmechanisms-block .blocks .title .color-name { font-size: 15px; margin-left: 10px; color: #d6833c}
.framesmechanisms .framesmechanisms-block .blocks .title .color-count { font-size: 13px; float: right; display: block; position: relative; top: 4px; margin-left: 10px }
.framesmechanisms .framesmechanisms-block .blocks .title .color-count a {
	background: #d6833c;
    color: #fff;
    text-decoration: none;
    padding: 5px 8px;
    border-radius: 5px;
}

.framesmechanisms .framesmechanisms-block .blocks .colors { display: inline-block; width: 100% }
.framesmechanisms .framesmechanisms-block.full-screen .blocks .colors { margin-left: 2%; margin-right: 2%; width: 96% }
.framesmechanisms .framesmechanisms-block .blocks .colors .item { display: block; float: left; width: 70px; height: 130px; padding: 5px; cursor: pointer }
.framesmechanisms .framesmechanisms-block .blocks .colors .item img { width: 100% }
.framesmechanisms .framesmechanisms-block .blocks .colors .item .name {
	display: block;
    width: 100%;
    font-size: 11px;
    /*word-break: break-all;*/
    /*word-break: break-word;*/
    text-align: center;
    line-height: 1;
}
.framesmechanisms .framesmechanisms-block .blocks .colors .item.selected .name, 
.framesmechanisms .framesmechanisms-block .blocks .colors .item:hover .name { color: #3a7734 }
.framesmechanisms .framesmechanisms-block .blocks .colors .item.selected { position: relative }
.framesmechanisms .framesmechanisms-block .blocks .colors .item.selected:before {
    font-family: FontAwesome;
    content: "\f14a";
    position: absolute;
    left: 3px;
    top: 5px;
    font-size: 20px;
    color: #36a7ad;
    background: #ffffff;
    height: 17px;
    width: 17px;
    border-radius: 4px;
    line-height: 18px;
}

.js-product-list-ajax.with-left-sidebar { margin-left: -284px }
.js-product-list-ajax.with-left-sidebar .products { margin-left: 284px }

.products-block { display: inline-block; width: 100% }
.products-block .sidebars-outer { display: block; overflow: hidden; position: sticky; width: auto; float: left; margin-top: 18px; top: 0 }
.products-block .aside-wrap { padding: 15px }
.products-block .aside-wrap .product_types { margin-top: 15px }
.products-block .aside-wrap .product_types > span, 
.products-block .aside-wrap .colors > span { font-weight: bold; margin-bottom: 5px; display: inline-block; width: 100% }
.products-block .sidebars-outer .product_type, .products-block .sidebars-outer .item {  } 
.products-block .sidebars-outer .jq-checkbox {  }
.products-block .sidebars-outer labek { width: 203px; display: inline-block; vertical-align: top; cursor: pointer }

.products-list_item-img img { width: 170px; height: auto }
.sp-replacer { border-color: #d2d2d2; border-radius: 2px }
.sp-replacer:hover, .sp-replacer.sp-active { border-color: #36a7ad }
.sp-container {
    border-color: #d2d2d2;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
    border-radius: 2px;
}

@media (max-width: 1000px) {
    .framesmechanisms .js-product-list-ajax.with-left-sidebar .framesmechanisms-title-block .colors,
    .framesmechanisms .js-product-list-ajax.with-left-sidebar .framesmechanisms-title-block .product_types.visible { display: block }
}

@media (max-width: 700px) {
    .products-list_item-img img { width: 150px; height: auto }
}

@media (max-width: 641px) {
    .framesmechanisms .framesmechanisms-block .preview { float: none; float: unset; width: 100%; margin-bottom: 20px; height: 240px }
    .framesmechanisms .framesmechanisms-block .preview .image { margin-right: 0 }
    .framesmechanisms .framesmechanisms-block .blocks, .framesmechanisms .framesmechanisms-block .min-price-info,
    .framesmechanisms .framesmechanisms-block .background-options { float: none; float: unset; width: 100% }
    .framesmechanisms .framesmechanisms-block a.go-to-products { margin-top: 10px }
    .framesmechanisms .framesmechanisms-block .background-options { overflow: hidden; margin-bottom: 20px }
}

@media (max-width: 450px) {
    .products-list_item-img img { width: 120px; height: auto }
}