CSS Slideshow Transitions in Squarespace

I'm new to web design, and am using a Squarespace template. On my homepage I have a slideshow, and I am trying to ease the transitions between slides by inserting some snippet of CSS code. I found this page that shows a couple options. I used this snippet:

.slide {
  -webkit-transition: opacity 2000ms ease-in-out;
     -moz-transition: opacity 2000ms ease-in-out;
       -o-transition: opacity 2000ms ease-in-out;
          transition: opacity 2000ms ease-in-out;
}

It worked, but only in Firefox. In Chrome and Safari the code not only did not work, but made the slideshow disappear all together. Can someone help me figure out why? I also tried this snippet:

<style>
.slide {
    visibility: visible !important;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
    transition: opacity 3s ease-in-out;
}
</style>

It would not work, as it warned me of a "syntax error on line 1" and since I know 0% about any of this, I would love some help with that one as well.

Here's my page at the moment

Thanks!