Hide on Responsive

Hi guys,

I put your custom CSS and added a specific classes but responsive option is not working?

I have two sliders.

1. First slider should be visible just on mobile version. I copy and paste this classes to section editor:

.bt_bb_hidden_sm, .bt_bb_hidden_md, .bt_bb_hidden_lg

@media (min-width: 769px) and (max-width: 992px) {
  .bt_bb_hidden_sm {
    display: none !important;
  }
}
@media (min-width: 993px) and (max-width: 1200px) {
  .bt_bb_hidden_md {
    display: none !important;
  }
}
@media (min-width: 1201px) {
  .bt_bb_hidden_lg {
    display: none !important;
  }
}

2. Second slider should be visible just on laptop and desktop version. I copy and paste this classes to section editor:

.bt_bb_hidden_xs, .bt_bb_hidden_ms

@media (max-width: 480px) {
  .bt_bb_hidden_xs {
    display: none !important;
  }
}
@media (min-width: 481px) and (max-width: 768px) {
  .bt_bb_hidden_ms {
    display: none !important;
  }
}

Can you please help and check if I am doing everything correct?

Thank you.

The page I need help with: [log in to see the link]