MetaSlider Not Working After CSS

So This is a weird one. The CSS I added to the metaslider was this

@media only screen and (max-width: 800px)
{
.flex-control-nav.flex-control-paging
{
display:none !important;
}
}

It appeared to work correctly (disabling the dots on the bottom of the Slider for any device smaller than 800px) However when I looked at my page after getting out of the customizer I noticed that the dots and arrows were gone on all screen sizes!

So I went back into the customizer and removed the CSS code I created. To my surprise the arrows and page dots were still missing from this metaslider.

After trying a lot to fix this, I decided to just create a brand new one. This new one obviously had a different shortcode number and to my even greater suprise it still didn’t work. In fact, any new metaslider I create now is has no sliding ability. No arrows, no dots, no auto rotate.

The Meta sliders I have created on the other pages are fine still but not this one, or any new one I create.

I even uploaded the sliders that did work onto this page, to make sure it wasn’t just a problem with this particular page’s PHP code, and they worked just fine.

Why would a line of CSS code mess up this entire plugin permanently? Even after the CSS code has been removed.

I have cleared my cache multiple times with my caching plugin. I have disabled my caching plugin entirely and I have disable metaslider plugin and tried to reactivate it. I have tested on multiple browsers and still no Luck. I have never made a topic on here before but I need help with this one. Can anyone Help? Any Ideas?

Thanks in advance

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