.products-service-bar{
    min-height: 1.5rem;
    background: #1b1b1b;
    display: block;
    width: 100%;
    position: relative;
    padding: 0;
}
.products-service-bar ul{
    margin: 30px 10px;
}
.products-service-bar li{
    display: inline-block;
    color: #fff;
    font-family: Raleway,sans-serif;
    font-size: 1.3rem;
    margin-right: .8rem;
    padding: 16px;
    transition: all .2s linear;
}
.products-service-bar ul li:not(:first-child), .filter-all{
    cursor: pointer;
}
.products-service-bar ul li:not(:first-child)::before, .filter-all::before{
    content: "X";
    display: inline-block;
    margin-right: .4rem;
    color: red;
}
.products-service-bar ul li:not(:first-child):hover {
    background: hsla(0,0%,100%,.2);
}
.filter-all{
    position: absolute;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    cursor: pointer;
    top: 1.2rem;
    right: 1rem;
    font-size: 1rem;
    transition: all .2s linear;
}
.filter-all:hover{
    color: red;
}

.products-sidebar{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.productsContentFiltros{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

.productsContent{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
    vertical-align: top;
}
.filter-all-products{
    border-bottom: 2px solid #b4b4b4;
    margin-bottom: 4rem;
    padding-bottom: 6rem;
}

.catalog-item{
    overflow: hidden;
    width: calc(50% - 30px);
    display: inline-flex;
    vertical-align: top;
}
.productosHide{
    transform: scale(0);
}
.catalog-item-thumbs{
    transition: all .2s linear;
    background-position: right;
}
.catalog-item-thumbs:hover{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/*Filtros*/
    .filter-label{
        font-family: Raleway,sans-serif;
        text-transform: uppercase;
        font-size: 1rem;
        display: block;
        clear: both;
        cursor: pointer;
        position: relative;
    }
    .filter-family.no-after::after{
        content: " ";
    }
    .filter-label::after{
        content: " ";
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 10px dashed;
        border-top: 10px solid;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        position: absolute;
        right: 1rem;
        bottom: .5rem;
    }
    .filter-label:not(:first-child)::before{
        content: " ";
        display: block;
        margin: 1.4rem 0;
        width: 50px;
        height: 3px;
        background: #1b1b1b;
    }
    .inner-collapse{
        padding: 0 2rem;
        margin: 1rem 0;
        border-left: 2px solid #b4b4b4;
        display: block;
    }
    .filter-link, .filter-family{
        line-height: 1.5;
        font-size: 1em;
        letter-spacing: 1px;
        padding: 0;
        display: block;
        margin-right: .6rem;
        transition: all .2s linear;
        position: relative;
        cursor: pointer;
        font-family: Raleway,sans-serif;
    }

    .filter-link:hover, .filter-family:hover{
        text-indent: .3rem;
        text-decoration: underline;
    }

    .filter-link::after, .filter-family::after{
        content: "\f096";
        font-family: fontawesome;
        font-size: 17px;
        position: absolute;
        right: 0;
        height: .9rem;
        width: .9rem;
        z-index: 0;
        transition: all .2s linear;
    }

    .filter-link.checked::after, .filter-family.checked::after{
        content: "\f14a";
        font-family: fontawesome;
    }

/*Filtros*/

@media only screen and (min-width: 600px) and (max-width: 1080px){
    .products-sidebar{
        width: 100%;
    }
    .productsContentFiltros{
        width: 100%;
    }
    .catalog-item{
        width: calc(33% - 30px);
    }
}

@media only screen and (min-width: 1080px){
    .products-sidebar{
        width: 25%;
    }

    .productsContentFiltros{
        width: calc(75% - 2px);
        border-left: 2px solid #b4b4b4;
    }
    .catalog-item{
        width: calc(33% - 30px);
    }
}
