/*
FILTER
*/
.workcontrol_filter{position: fixed; top: 96px; bottom: 0; left: -230px; width: 230px; background-color: #ffffff; z-index: 99;}
.workcontrol_filter.active{left: 0;}

.workcontrol_filter_form{position: absolute; top: 0; bottom: 0; padding: 0 5px 5px 5px; margin-right: 5px; overflow-y: auto; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.workcontrol_filter_form::-webkit-scrollbar{width: 10px; background-color: #ffffff;}
.workcontrol_filter_form::-webkit-scrollbar-thumb{background-color: transparent; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
.workcontrol_filter_form_item{padding: 20px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);}
.workcontrol_filter_form_item p{font-size: 0.8125em; color: #900; font-weight: bold; margin-bottom: 15px;}
.workcontrol_filter_form_item .workcontrol_filter_form_item_options{height: 100px; padding-right: 5px; overflow-y: auto;}
.workcontrol_filter_form_item .workcontrol_filter_form_item_options::-webkit-scrollbar{width: 7px; background-color: #ffffff;}
.workcontrol_filter_form_item .workcontrol_filter_form_item_options::-webkit-scrollbar-thumb{background-color: transparent; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -ms-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -o-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}
.workcontrol_filter_form_item .workcontrol_filter_form_item_options .label_check{display: inline-block; position: relative; cursor: pointer;}
.workcontrol_filter_form_item .workcontrol_filter_form_item_options .label_check input{display: none; width: auto; position: absolute; top: 9px; left: 4px; cursor: pointer;}

/*size*/
.workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check{width: 32%; margin: 1% 2% 1% 0; vertical-align: top; font-size: 0.75em; color: #4d4d4d; font-weight: bold; text-transform: uppercase; text-align: center; padding: 5px 15px; background-color: #ececec;}
.workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check:nth-of-type(3n+0){margin-right: 0;}
.workcontrol_filter_form_item.size .workcontrol_filter_form_item_options .label_check.active{color: #ffffff; background-color: #8c8c8c;}

/*color*/
.workcontrol_filter_form_item.color .workcontrol_filter_form_item_options .label_check{width: 23.5%; margin: 1% 2% 1% 0; vertical-align: top; padding: 15px; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);}
.workcontrol_filter_form_item.color .workcontrol_filter_form_item_options .label_check:nth-of-type(4n+0){margin-right: 0;}
.workcontrol_filter_form_item.color .workcontrol_filter_form_item_options .label_check .icon_check{display: none;}
.workcontrol_filter_form_item.color .workcontrol_filter_form_item_options .label_check.active .icon_check{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -webkit-box-pack: center; -moz-justify-content: center; -moz-flex-pack: center; -ms-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: #ffffff; -webkit-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); -moz-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); -ms-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); -o-text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);}

/*brand*/
.workcontrol_filter_form_item.brand label{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; width: 100%; margin-bottom: 5px;}
.workcontrol_filter_form_item.brand label input{width: auto; margin-right: 7px;}
.workcontrol_filter_form_item.brand label span{font-size: 0.8125em; color: #333333;}
.workcontrol_filter_form_item.brand label span:hover, .workcontrol_filter_form_item.brand label span.active{color: #900; font-weight: bold; cursor: pointer;}

/*department*/
.workcontrol_filter_form_item.department label{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; width: 100%; margin-bottom: 5px;}
.workcontrol_filter_form_item.department label input{width: auto; margin-right: 7px;}
.workcontrol_filter_form_item.department label span{font-size: 0.8125em; color: #333333;}
.workcontrol_filter_form_item.department label span:hover, .workcontrol_filter_form_item.department label span.active{color: #900; font-weight: bold; cursor: pointer;}

/*discount*/
.workcontrol_filter_form_item.discount label{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; width: 100%; margin-bottom: 5px;}
.workcontrol_filter_form_item.discount label input{width: auto; margin-right: 7px;}
.workcontrol_filter_form_item.discount label span{font-size: 0.8125em; color: #333333;}
.workcontrol_filter_form_item.discount label span:hover, .workcontrol_filter_form_item.discount label span.active{color: #900; font-weight: bold; cursor: pointer;}

/*price*/
.workcontrol_filter_form_item.price input{background-color: #ececec; color: #f6931f; font-weight: bold; text-align: center; padding: 5px 10px; margin-bottom: 10px; border: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;}
.workcontrol_filter_form_item.price .range{text-align: center;}
.workcontrol_filter_form_item.price .ui-slider-range{background-color: #f6931f;}
.workcontrol_filter_form_item.price #slider_price{height: 20px;}
.workcontrol_filter_form_item #slider_price span{height: 28px;}
.workcontrol_filter_form_item #slider_price span:focus{background-color: #e9e9e9;}

/*texture*/
.workcontrol_filter_form_item.texture .workcontrol_filter_form_item_options .label_check{width: 23.5%; margin: 1% 2% 1% 0; vertical-align: top; padding: 15px; border: 2px solid #ffffff;}
.workcontrol_filter_form_item.texture .workcontrol_filter_form_item_options .label_check:nth-of-type(4n+0){margin-right: 0;}
.workcontrol_filter_form_item.texture .workcontrol_filter_form_item_options .label_check.active{border-color: #900;}

/*access*/
.workcontrol_filter_access{-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -webkit-box-pack: center; -moz-justify-content: center; -moz-flex-pack: center; -ms-justify-content: center; -ms-flex-pack: center; -o-justify-content: center; justify-content: center; -webkit-align-items: center; -webkit-box-align: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; width: 40px; height: 40px; position: absolute; top: 50%; right: -40px; margin-top: -20px; font-size: 1.5625em; color: #ffffff; background-color: #900; -webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 1); -moz-box-shadow: 0 0 10px rgba(255, 255, 255, 1); -ms-box-shadow: 0 0 10px rgba(255, 255, 255, 1); -o-box-shadow: 0 0 10px rgba(255, 255, 255, 1); box-shadow: 0 0 10px rgba(255, 255, 255, 1); -webkit-border-radius: 0 50% 50% 0; -moz-border-radius: 0 50% 50% 0; -ms-border-radius: 0 50% 50% 0; -o-border-radius: 0 50% 50% 0; border-radius: 0 50% 50% 0;}
.workcontrol_filter_access:hover{cursor: pointer;}
.workcontrol_filter_access span{-webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear;}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

/*filter desktop*/
@media (min-width: 34.375em){
    .workcontrol_filter{top: 51px;}
}

@media (min-width: 62em){
    .workcontrol_filter{position: initial; float: left;}
    .workcontrol_filter_form{position: initial; padding: 0;}
    .workcontrol_filter_access{display: none;}

    /*Hacks CSS*/
    _:-ms-lang(x), .workcontrol_filter{position: absolute; top: 257px; left: 2.5% !important; height: 100%;}
    _:-ms-lang(x), .workcontrol_filter_form{overflow-y: visible;}
}

@media (min-width: 75em){
    /*Hacks CSS*/
    _:-ms-lang(x), .workcontrol_filter{left: 5% !important;}
}