TRI-283: add benefits animate about

static/css/moover/chatterbox.css

@@ -1,4 +1,6 @@
-.chatterbox {}
+.chatterbox {
+  margin-bottom: 160px;
+}
 
 .chatterbox .title {
   margin-bottom: 60px;
@@ -52,6 +54,11 @@
   z-index: 1;
 }
 
+.slick-center .chatterbox__vbox video {
+  pointer-events: initial;
+  cursor: pointer;
+}
+
 .chatterbox__vbtn {
   position: absolute;
   left: 0;
@@ -63,10 +70,6 @@
   pointer-events: none;
 }
 
-.loaded .chatterbox__vbtn {
- display: none;
-}
-
 .chatterbox__vbtn::before {
   width: 20px;
   height: 20px;
@@ -113,5 +116,17 @@
 
 .chatterbox video {
   max-width: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  
+}
+
+.loaded .chatterbox__vbtn {
+ display: none;
+}
+
+.loaded video {
+  opacity: 1;
 }