Can an Enfold support person please quickly check my CSS

Hi.

I have managed to get the result i wanted, but am quite confident the way i have hacked it together is not the best way.

I have also tried to take out parts of the code i don’t think i need but then it does not work.

I am wanting to style the portfolio spring menu and have used the info from the support forum, i have tried my best!

Using this code:

/* create portfolio sort items to look like a button menu */

I am not sure i need this first bit of code but when i remove it the boarder round the buttons disappears?? I know something is wrong with the code as I don’t need the font-size: 24px as it has no effect, but if i delete it then the boarder disappears as said.

#js_sort_items {
font-size: 24px;
}

/* create each none active item as a button */
#js_sort_items a {
background-color: #ffffff;
padding: 12px 16px 10px;
border: 1px #00aa67 solid;
}

/* create each active item as a highlighted button */
#js_sort_items .active_sort {
background-color: #4ba956
;
color: #ffffff!important;
padding: 12px 16px 10px;
text-decoration: none;
}

/* add some space between the new button */
#js_sort_items a {
margin-right: 10px!important;
}

/* remove the seperator */
.text-sep {
display: none!important;
}

/* optional centre the buttons */

.avia-fullwidth-portfolio #js_sort_items {
text-align: center;
}

/* Portfolio sort menu font size and weight*/

.av-masonry-sort a { font-size: 12px; }

#js_sort_items .inner_sort_button span, #js_sort_items .text-sep {
font-size: 18px; font-weight: 500;
}

All the code is in the Quick.css

Finally I would also prefer to be able to use a class to style just one of the portfolio sort menus, rather than effect the whole site.

Doing it the way I have obviously effects the whole site, can you please advise on how to make it work by using a class, an example would be brilliant.