#801 final cleanups, some test aut stuff too

27 files changed, 87 insertions, 992 deletions

diff --git a/config.xml b/config.xml
index f76248f3..eeeebe33 100644
--- a/config.xml
+++ b/config.xml
@@ -172,9 +172,6 @@
     <plugin name="cordova-plugin-photo-library" spec="https://github.com/terikon/cordova-plugin-photo-library.git">
         <variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="save event images from ZM" />
     </plugin>
-    <plugin name="cordova-plugin-ionic-webview" spec="https://github.com/pliablepixels/cordova-plugin-ionic-webview.git">
-        <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
-    </plugin>
     <plugin name="cordova-plugin-media-pp-fork" spec="^1.0.2-dev" />
     <engine name="android" spec="7.1.4" />
     <engine name="ios" spec="4.5.5" />
diff --git a/www/css/angular-carousel.css b/etc/css/angular-carousel.css
index a11d8523..a11d8523 100755
--- a/www/css/angular-carousel.css
+++ b/etc/css/angular-carousel.css
diff --git a/www/css/angular-circular-navigation.css b/etc/css/angular-circular-navigation.css
index b2143741..b2143741 100644
--- a/www/css/angular-circular-navigation.css
+++ b/etc/css/angular-circular-navigation.css
diff --git a/www/css/custommfb.scss b/etc/css/custommfb.scss
index 20dbeb58..20dbeb58 100644
--- a/www/css/custommfb.scss
+++ b/etc/css/custommfb.scss
diff --git a/www/css/ionic.app.css b/etc/css/ionic.app.css
index c3bf964b..c3bf964b 100644
--- a/www/css/ionic.app.css
+++ b/etc/css/ionic.app.css
diff --git a/package.json b/package.json
index 0cb7c05b..3f2d8036 100644
--- a/package.json
+++ b/package.json
@@ -56,9 +56,6 @@
       "cordova-plugin-photo-library": {
         "PHOTO_LIBRARY_USAGE_DESCRIPTION": "save event images from ZM"
       },
-      "cordova-plugin-ionic-webview": {
-        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
-      },
       "cordova-plugin-media-pp-fork": {}
     }
   },
@@ -84,7 +81,6 @@
     "cordova-plugin-inappbrowser": "^1.7.2",
     "cordova-plugin-insomnia": "^4.3.0",
     "cordova-plugin-ionic-keyboard": "^2.1.3",
-    "cordova-plugin-ionic-webview": "git+https://github.com/pliablepixels/cordova-plugin-ionic-webview.git",
     "cordova-plugin-media-pp-fork": "^1.0.2-dev",
     "cordova-plugin-multi-window": "0.0.3",
     "cordova-plugin-network-information": "^2.0.1",
diff --git a/tests/chromedriver/README.TXT b/tests/chromedriver/README.TXT
index 1c78b3b2..b036365f 100644
--- a/tests/chromedriver/README.TXT
+++ b/tests/chromedriver/README.TXT
@@ -1,2 +1,2 @@
 Download the chrome driver version corresponding to the chrome browser version you are testing with
-from http://chromedriver.chromium.org/downloads and save it here as 'chromedriver'
+from http://appium.io/docs/en/writing-running-appium/web/chromedriver/
diff --git a/tests/startappium.sh b/tests/startappium.sh
index b7d106f6..992b0486 100755
--- a/tests/startappium.sh
+++ b/tests/startappium.sh
@@ -1,2 +1,4 @@
 #!/bin/bash
-appium --chromedriver-executable ./chromedriver/chromedriver55
+appium --chromedriver-executable ./chromedriver/chromedriver234
+#appium --chromedriver-executable ./chromedriver/chromedriver55
+#appium --chromedriver-executable ./chromedriver/chromedriver220
diff --git a/tests/testcases/common.py b/tests/testcases/common.py
index 7216f7ad..05587f2d 100644
--- a/tests/testcases/common.py
+++ b/tests/testcases/common.py
@@ -18,6 +18,7 @@ from selenium.webdriver.support import expected_conditions as EC
 # global pointer to chrome driver
 driver = None
 platform = None
+avd = 'zmNinja_8_0'
 native_context = None
 web_context = None
 
@@ -74,9 +75,12 @@ def _click_with_retry(element, max_retry=3):
 # makes sure we can see the element to avoid out of view issues
 def _goto_element(e):
     driver.execute_script("arguments[0].scrollIntoView();", e)
+    #driver.execute_script("mobile:scroll", {"direction": 'up', 'element': e})
 
 # waits for an element to load
 # allows you to also specify if you want a screenshot after it comes in
+
+
 def _wait_for_id(id=id, dur=30, save_screenshot=False, save_screenshot_file=None):
     log('Waiting for '+id+'...')
     WebDriverWait(driver, dur).until(
@@ -86,6 +90,8 @@ def _wait_for_id(id=id, dur=30, save_screenshot=False, save_screenshot_file=None
     if save_screenshot:
         take_screenshot(id, save_screenshot_file)
 
+
+
 # element properties
 def get_element_attributes(id=id, save_screenshot=False, save_screenshot_file=None):
     _wait_for_id(id=id, save_screenshot=save_screenshot,
diff --git a/tests/testcases/copy_binary.sh b/tests/testcases/copy_binary.sh
index a02e8118..4719ea6b 100755
--- a/tests/testcases/copy_binary.sh
+++ b/tests/testcases/copy_binary.sh
@@ -1,4 +1,5 @@
 #!/bin/bash
 rm -rf binary/*
-cp ../../debug_files/app-debug.apk binary/zmNinja.apk
+#cp ../../debug_files/app-debug.apk binary/zmNinja.apk
+cp ../../release_files/zmNinja.apk binary/zmNinja.apk
 cp -R ~/Library/Developer/Xcode/DerivedData/zmNinja-dgoooijqwytvduflzaereulftmpl/Build/Products/Debug-iphonesimulator/zmNinja.app binary/
diff --git a/tests/testcases/logs.py b/tests/testcases/logs.py
new file mode 100644
index 00000000..a24abb8c
--- /dev/null
+++ b/tests/testcases/logs.py
@@ -0,0 +1,15 @@
+'''
+Validates Logs View
+'''
+
+import common as c  
+from time import sleep
+import app
+
+def run_tests(self):
+    app.tap_menu_js()
+    c.log ('Validating logs')
+    c.click_item('testaut_menu_logs')
+    sleep(2)
+    c.take_screenshot(None, 'logs-app-ver.png')
+
diff --git a/tests/testcases/test.py b/tests/testcases/test.py
index 5c54f40c..c9ee5d35 100644
--- a/tests/testcases/test.py
+++ b/tests/testcases/test.py
@@ -19,6 +19,7 @@ import app
 import montage
 import state
 import events
+import logs
 
  
 class ZmninjaAndroidTests(unittest.TestCase):
@@ -33,10 +34,10 @@ class ZmninjaAndroidTests(unittest.TestCase):
             desired_caps = {
                 'platformName': 'Android',
                 'automationName': 'UiAutomator2',
-                'platformVersion': '7.1.1',
+                'platformVersion': '8.0',
                 'deviceName': 'DoesntMatter',
-                'avd': 'zmNinja_7_1_1',
-               # 'avd': 'zmNinja_6_0',
+                'avd': c.avd,
+                # 'avd': 'zmNinja_6_0',
                 'nativeWebTap': True,
                 'nativeWebScreenshot': True, # important, for screenshots
                 'autoAcceptAlerts': True,
@@ -135,7 +136,7 @@ class ZmninjaAndroidTests(unittest.TestCase):
 
 
             c.testConfig = config
-            run_dir = strftime(c.platform+'-%b-%d-%I_%M_%S%p', localtime())
+            run_dir = strftime(c.avd+'_'+c.platform+'-%b-%d-%I_%M_%S%p', localtime())
             c.testConfig['screenshot_dir'] = './screenshots/'+run_dir
             try:
                 os.makedirs(c.testConfig['screenshot_dir'])
@@ -153,8 +154,9 @@ class ZmninjaAndroidTests(unittest.TestCase):
             sleep(5)
             wizard.run_tests(self, isFirstRun)
             isFirstRun = False
-            montage.run_tests(self)
-            events.run_tests(self)
+            #montage.run_tests(self)
+            #events.run_tests(self)
+            logs.run_tests(self)
             if c.testConfig['restart']:
                 state.run_tests(self)
 
@@ -166,6 +168,7 @@ platform = None
 ap = argparse.ArgumentParser()
 ap.add_argument('-i', '--ios', action='store_true')
 ap.add_argument('-a', '--android', action='store_true')
+ap.add_argument('--avd')
 args, u = ap.parse_known_args()
 args = vars(args)
 
@@ -174,6 +177,9 @@ if args['ios']:
 else:
     c.platform = 'android'
 
+if args['avd']:
+    c.avd = args['avd']
+
 
 
 suite = unittest.TestLoader().loadTestsFromTestCase(ZmninjaAndroidTests)
diff --git a/tests/testcases/timeline.py b/tests/testcases/timeline.py
new file mode 100644
index 00000000..59d94bb2
--- /dev/null
+++ b/tests/testcases/timeline.py
@@ -0,0 +1,15 @@
+'''
+Validates Timeline View
+'''
+
+import common as c  
+from time import sleep
+import app
+
+def run_tests(self):
+    app.tap_menu_js()
+    c.log ('Validating timeline')
+    _wait_for_id('timeline-ctrl')
+     c.take_screenshot(None, 'view-after-timeline-draw.png')
+
+
diff --git a/www/css/_/_fountain.scss b/www/css/_/_fountain.scss
deleted file mode 100644
index cd5a2933..00000000
--- a/www/css/_/_fountain.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-@mixin effects-fountain{
-
-/**
- * FOUNTAIN
- * When hovering the main button the child buttons
- * jump into view from outside the viewport
- */
-
-  .mfb-component--tl.mfb-fountain,
-  .mfb-component--tr.mfb-fountain{
-    .mfb-component__list{
-      li{
-        -webkit-transform: scale(0);
-        transform: scale(0);
-      }
-      @for $i from 1 through $number-of-child-buttons {
-        $distance: -1 * $button-space * $i;
-        li:nth-child( #{$i} ) {
-          -webkit-transform: translateY($distance) scale(0);
-                  transform: translateY($distance) scale(0);
-          transition: all $slide-speed;
-          // this is the delay at which the buttons start disappearing
-          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
-        }
-      }
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: $button-space * $i;
-          li:nth-child( #{$i} ) {
-            -webkit-transform: translateY($distance) scale(1);
-                    transform: translateY($distance) scale(1);
-            // this is the delay at which the buttons appear
-            transition-delay: $i * 0.05s;
-          }
-        }
-      }
-    }
-  }
-
-  .mfb-component--bl.mfb-fountain,
-  .mfb-component--br.mfb-fountain{
-    .mfb-component__list{
-      li{
-        -webkit-transform: scale(0);
-                transform: scale(0);
-      }
-      @for $i from 1 through $number-of-child-buttons {
-        $distance: $button-space * $i;
-        li:nth-child( #{$i} ) {
-          -webkit-transform: translateY($distance) scale(0);
-                  transform: translateY($distance) scale(0);
-          transition: all $slide-speed;
-          // this is the delay at which the buttons start disappearing
-          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
-        }
-      }
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: -1 * $button-space * $i;
-          li:nth-child( #{$i} ) {
-            -webkit-transform: translateY($distance) scale(1);
-                    transform: translateY($distance) scale(1);
-            // this is the delay at which the buttons appear
-            transition-delay: $i * 0.05s;
-          }
-        }
-      }
-    }
-  }
-
-}
diff --git a/www/css/_/_slidein-spring.scss b/www/css/_/_slidein-spring.scss
deleted file mode 100644
index 7a08d72d..00000000
--- a/www/css/_/_slidein-spring.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-@mixin effects-slidein-spring{
-
-/**
- * SLIDE IN SPRING
- * Same as slide-in but with a springy animation.
- *
- */
-
-  .mfb-component--tl.mfb-slidein-spring,
-  .mfb-component--tr.mfb-slidein-spring{
-    .mfb-component__list li{
-      opacity: 0;
-      transition: all $slide-speed;
-      transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-    }
-    @for $i from 1 through $number-of-child-buttons {
-      .mfb-component__list li:nth-child( #{$i} ) {
-        transition-delay: #{$i * 0.05}s;
-      }
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        li{
-          opacity: 1;
-        }
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: $button-space * $i;
-          li:nth-child( #{$i} ) {
-            transition-delay: #{$i * 0.05}s;
-            -webkit-transform: translateY( $distance );
-                    transform: translateY( $distance ); }
-        }
-      }
-    }
-  }
-
-  .mfb-component--bl.mfb-slidein-spring,
-  .mfb-component--br.mfb-slidein-spring{
-    .mfb-component__list li{
-      opacity: 0;
-      transition: all $slide-speed;
-      transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-    }
-    @for $i from 1 through $number-of-child-buttons {
-      .mfb-component__list li:nth-child( #{$i} ) {
-        transition-delay: #{$i * 0.05}s;
-      }
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        li{
-          opacity: 1;
-        }
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: -1 * $button-space * $i;
-          li:nth-child( #{$i} ) {
-            transition-delay: #{$i * 0.05}s;
-            -webkit-transform: translateY( $distance );
-                    transform: translateY( $distance ); }
-        }
-      }
-    }
-  }
-
-}
diff --git a/www/css/_/_slidein.scss b/www/css/_/_slidein.scss
deleted file mode 100644
index f2735124..00000000
--- a/www/css/_/_slidein.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@mixin effects-slidein{
-
-/**
- * SLIDE IN + FADE
- * When hovering the main button, the child buttons slide out from beneath
- * the main button while transitioning from transparent to opaque.
- *
- */
-
-  .mfb-component--tl.mfb-slidein,
-  .mfb-component--tr.mfb-slidein{
-    .mfb-component__list li{
-      opacity: 0;
-      transition: all $slide-speed;
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        li{
-          opacity: 1;
-        }
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: $button-space * $i;
-          li:nth-child( #{$i} ) {
-            -webkit-transform: translateY( $distance );
-                    transform: translateY( $distance ); }
-        }
-      }
-    }
-  }
-
-  .mfb-component--bl.mfb-slidein,
-  .mfb-component--br.mfb-slidein{
-    .mfb-component__list li{
-      opacity: 0;
-      transition: all $slide-speed;
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        li{
-          opacity: 1;
-        }
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: -1 * $button-space * $i;
-          li:nth-child( #{$i} ) { -webkit-transform: translateY( $distance );
-                                         transform: translateY( $distance ); }
-        }
-      }
-    }
-  }
-
-}
diff --git a/www/css/_/_zoomin.scss b/www/css/_/_zoomin.scss
deleted file mode 100644
index df0ee0ff..00000000
--- a/www/css/_/_zoomin.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-@mixin effects-zoomin{
-
-/**
- * ZOOM-IN
- * When hovering the main button, the child buttons grow
- * from zero to normal size.
- *
- */
-
-  .mfb-component--tl.mfb-zoomin,
-  .mfb-component--tr.mfb-zoomin{
-    .mfb-component__list{
-      li{
-        -webkit-transform: scale(0);
-                transform: scale(0);
-      }
-      @for $i from 1 through $number-of-child-buttons {
-        $distance: $button-space * $i;
-        li:nth-child( #{$i} ) {
-          -webkit-transform: translateY($distance) scale(0);
-                  transform: translateY($distance) scale(0);
-          transition: all $slide-speed;
-          // this is the delay at which the buttons *disappear*
-          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
-        }
-      }
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: $button-space * $i;
-          li:nth-child( #{$i} ) {
-            -webkit-transform: translateY($distance) scale(1);
-                    transform: translateY($distance) scale(1);
-            // this is the delay at which the buttons *appear*
-            transition-delay: $i * 0.05s;
-          }
-        }
-      }
-    }
-  }
-
-  .mfb-component--bl.mfb-zoomin,
-  .mfb-component--br.mfb-zoomin{
-    .mfb-component__list{
-      li{
-        -webkit-transform: scale(0);
-                transform: scale(0);
-      }
-      @for $i from 1 through $number-of-child-buttons {
-        $distance: -1 * $button-space * $i;
-        li:nth-child( #{$i} ) {
-          -webkit-transform: translateY($distance) scale(0);
-                  transform: translateY($distance) scale(0);
-          transition: all $slide-speed;
-          // this is the delay at which the buttons start disappearing
-          transition-delay: ( $number-of-child-buttons - $i ) * 0.05s;
-        }
-      }
-    }
-    &[data-mfb-toggle="hover"]:hover,
-    &[data-mfb-state="open"]{
-      .mfb-component__list{
-        @for $i from 1 through $number-of-child-buttons {
-          $distance: -1 * $button-space * $i;
-          li:nth-child( #{$i} ) {
-            -webkit-transform: translateY($distance) scale(1);
-                    transform: translateY($distance) scale(1);
-            // this is the delay at which the buttons appear
-            transition-delay: $i * 0.05s;
-          }
-        }
-      }
-    }
-  }
-
-}
diff --git a/www/css/angular-carousel.min.css b/www/css/angular-carousel.min.css
new file mode 100644
index 00000000..976a3cdb
--- /dev/null
+++ b/www/css/angular-carousel.min.css
@@ -0,0 +1 @@
+input[type=range]{width:300px}ul[rn-carousel]{overflow:hidden;padding:0;white-space:nowrap;position:relative;-webkit-perspective:1000px;-ms-perspective:1000px;perspective:1000px;-ms-touch-action:pan-y;touch-action:pan-y}ul[rn-carousel]>li{color:#000;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;overflow:visible;vertical-align:top;position:absolute;left:0;right:0;white-space:normal;padding:0;margin:0;list-style-type:none;width:100%;height:100%;display:inline-block}ul[rn-carousel-buffered]>li{display:none}ul[rn-carousel-transition=hexagon]{overflow:visible}div.rn-carousel-indicator span{cursor:pointer;color:#666}div.rn-carousel-indicator span.active{color:#fff}.rn-carousel-control{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;font-size:2rem;position:absolute;top:40%;opacity:.75;cursor:pointer}.rn-carousel-control:hover{opacity:1}.rn-carousel-control.rn-carousel-control-prev{left:.5em}.rn-carousel-control.rn-carousel-control-prev:before{content:"<"}.rn-carousel-control.rn-carousel-control-next{right:.5em}.rn-carousel-control.rn-carousel-control-next:before{content:">"}
diff --git a/www/css/angular-circular-navigation.min.css b/www/css/angular-circular-navigation.min.css
new file mode 100644
index 00000000..ec8690d7
--- /dev/null
+++ b/www/css/angular-circular-navigation.min.css
@@ -0,0 +1 @@
+.cn-button{margin-top:-1.5em;margin-left:-1.5em;width:3em;height:3em}.cn-button.small{margin-top:-1em;margin-left:-1em;width:2em;height:2em}.cn-button.big{margin-top:-2em;margin-left:-2em;width:4em;height:4em}.cn-wrapper{margin-top:-7em;margin-left:-7em;width:14em;height:14em}.cn-wrapper.small{margin-top:-5.25em;margin-left:-5.25em;width:10.5em;height:10.5em}.cn-wrapper.big{margin-top:-8.75em;margin-left:-8.75em;width:17.5em;height:17.5em}.cn-wrapper li{margin-top:-2.6em;margin-left:-8em;width:8em;height:8em}.cn-wrapper.small li{margin-top:-1.6em;margin-left:-6em;width:6em;height:6em}.cn-wrapper.big li{margin-top:-3.5em;margin-left:-10em;width:10em;height:10em}.cn-wrapper li a{right:-4em;bottom:-4em;width:8em;height:8em}.cn-wrapper.small li a{right:-3.4em;bottom:-3em;width:7.2em;height:6.2em}.cn-wrapper.big li a{right:-5em;bottom:-5em;width:10em;height:10em}.circular *,circular *{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;position:relative}.circular,circular{position:absolute;top:100%;left:50%}.cn-button{position:absolute;top:100%;left:50%;z-index:11;padding-top:0;border:none;border-radius:50%;background:0 0;background-color:#0a833d;color:#fff;text-align:center;font-weight:700;font-size:1.3em;text-transform:uppercase;cursor:pointer;-webkit-backface-visibility:hidden;outline:0}.cn-wrapper{position:absolute;top:100%;left:50%;z-index:10;border-radius:50%;background:0 0;opacity:0;-webkit-transition:all .3s ease .3s;-moz-transition:all .3s ease .3s;transition:all .3s ease .3s;-webkit-transform:scale(.1);-ms-transform:scale(.1);transform:scale(.1);pointer-events:none;overflow:hidden}.opened-nav{border-radius:50%;opacity:1;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);pointer-events:auto}.cn-wrapper li{position:absolute;top:50%;left:50%;overflow:hidden;font-size:1.3em;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;-webkit-transform-origin:100% 100%;transform-origin:100% 100%;pointer-events:none}.cn-wrapper li a{position:absolute;display:block;border-radius:50%;background:#0a833d;opacity:.7;color:#fff;text-align:center;text-decoration:none;font-size:1.2em;line-height:2.5;-webkit-backface-visibility:hidden;backface-visibility:hidden;pointer-events:auto;cursor:pointer}.cn-wrapper li a.is-active{opacity:1}.cn-wrapper li a:active,.cn-wrapper li a:focus,.cn-wrapper li a:hover{opacity:.9}.cn-wrapper li a.is-active:active,.cn-wrapper li a.is-active:focus,.cn-wrapper li a.is-active:hover{opacity:.9}.cn-wrapper li a span{position:relative;top:1.8em;display:block;font-size:.5em;font-weight:700;text-transform:uppercase}.opened-nav li{-webkit-transition:all .3s ease .3s;-moz-transition:all .3s ease .3s;transition:all .3s ease .3s}.item-odd-left-5,.opened-nav.items-11 li:first-child{-webkit-transform:rotate(-105deg) skew(60deg);-ms-transform:rotate(-105deg) skew(60deg);transform:rotate(-105deg) skew(60deg)}.item-odd-left-4,.opened-nav.items-11 li:nth-child(2),.opened-nav.items-9 li:first-child{-webkit-transform:rotate(-63deg) skew(60deg);-ms-transform:rotate(-63deg) skew(60deg);transform:rotate(-63deg) skew(60deg)}.item-odd-left-3,.opened-nav.items-11 li:nth-child(3),.opened-nav.items-7 li:first-child,.opened-nav.items-9 li:nth-child(2){-webkit-transform:rotate(-21deg) skew(60deg);-ms-transform:rotate(-21deg) skew(60deg);transform:rotate(-21deg) skew(60deg)}.item-odd-left-2,.opened-nav.items-11 li:nth-child(4),.opened-nav.items-5 li:first-child,.opened-nav.items-7 li:nth-child(2),.opened-nav.items-9 li:nth-child(3){-webkit-transform:rotate(11deg) skew(60deg);-ms-transform:rotate(11deg) skew(60deg);transform:rotate(11deg) skew(60deg)}.item-odd-left-1,.opened-nav.items-11 li:nth-child(5),.opened-nav.items-3 li:first-child,.opened-nav.items-5 li:nth-child(2),.opened-nav.items-7 li:nth-child(3),.opened-nav.items-9 li:nth-child(4){-webkit-transform:rotate(23deg) skew(60deg);-ms-transform:rotate(23deg) skew(60deg);transform:rotate(23deg) skew(60deg)}.cn-wrapper li,.item-odd-center,.opened-nav.items-1 li:first-child,.opened-nav.items-11 li:nth-child(6),.opened-nav.items-3 li:nth-child(2),.opened-nav.items-5 li:nth-child(3),.opened-nav.items-7 li:nth-child(4),.opened-nav.items-9 li:nth-child(5){-webkit-transform:rotate(75deg) skew(60deg);-ms-transform:rotate(75deg) skew(60deg);transform:rotate(75deg) skew(60deg)}.item-odd-right-1,.opened-nav.items-11 li:nth-child(7),.opened-nav.items-3 li:nth-child(3),.opened-nav.items-5 li:nth-child(4),.opened-nav.items-7 li:nth-child(5),.opened-nav.items-9 li:nth-child(6){-webkit-transform:rotate(127deg) skew(60deg);-ms-transform:rotate(127deg) skew(60deg);transform:rotate(127deg) skew(60deg)}.item-odd-right-2,.opened-nav.items-11 li:nth-child(8),.opened-nav.items-5 li:nth-child(5),.opened-nav.items-7 li:nth-child(6),.opened-nav.items-9 li:nth-child(7){-webkit-transform:rotate(139deg) skew(60deg);-ms-transform:rotate(139deg) skew(60deg);transform:rotate(139deg) skew(60deg)}.item-odd-right-3,.opened-nav.items-11 li:nth-child(9),.opened-nav.items-7 li:nth-child(7),.opened-nav.items-9 li:nth-child(8){-webkit-transform:rotate(171deg) skew(60deg);-ms-transform:rotate(171deg) skew(60deg);transform:rotate(171deg) skew(60deg)}.item-odd-right-4,.opened-nav.items-11 li:nth-child(10),.opened-nav.items-9 li:nth-child(9){-webkit-transform:rotate(213deg) skew(60deg);-ms-transform:rotate(213deg) skew(60deg);transform:rotate(213deg) skew(60deg)}.item-odd-right-5,.opened-nav.items-11 li:nth-child(11){-webkit-transform:rotate(235deg) skew(60deg);-ms-transform:rotate(235deg) skew(60deg);transform:rotate(235deg) skew(60deg)}.item-even-left-5,.opened-nav.items-10 li:first-child{-webkit-transform:rotate(-69deg) skew(60deg);-ms-transform:rotate(-69deg) skew(60deg);transform:rotate(-69deg) skew(60deg)}.item-even-left-4,.opened-nav.items-10 li:nth-child(2),.opened-nav.items-8 li:first-child{-webkit-transform:rotate(-37deg) skew(60deg);-ms-transform:rotate(-37deg) skew(60deg);transform:rotate(-37deg) skew(60deg)}.item-even-left-3,.opened-nav.items-10 li:nth-child(3),.opened-nav.items-6 li:first-child,.opened-nav.items-8 li:nth-child(2){-webkit-transform:rotate(-5deg) skew(60deg);-ms-transform:rotate(-5deg) skew(60deg);transform:rotate(-5deg) skew(60deg)}.item-even-left-2,.opened-nav.items-10 li:nth-child(4),.opened-nav.items-4 li:first-child,.opened-nav.items-6 li:nth-child(2),.opened-nav.items-8 li:nth-child(3){-webkit-transform:rotate(27deg) skew(60deg);-ms-transform:rotate(27deg) skew(60deg);transform:rotate(27deg) skew(60deg)}.item-even-left-1,.opened-nav.items-10 li:nth-child(5),.opened-nav.items-2 li:first-child,.opened-nav.items-4 li:nth-child(2),.opened-nav.items-6 li:nth-child(3),.opened-nav.items-8 li:nth-child(4){-webkit-transform:rotate(59deg) skew(60deg);-ms-transform:rotate(59deg) skew(60deg);transform:rotate(59deg) skew(60deg)}.item-even-right-1,.opened-nav.items-10 li:nth-child(6),.opened-nav.items-2 li:nth-child(2),.opened-nav.items-4 li:nth-child(3),.opened-nav.items-6 li:nth-child(4),.opened-nav.items-8 li:nth-child(5){-webkit-transform:rotate(91deg) skew(60deg);-ms-transform:rotate(91deg) skew(60deg);transform:rotate(91deg) skew(60deg)}.item-even-right-2,.opened-nav.items-10 li:nth-child(7),.opened-nav.items-4 li:nth-child(4),.opened-nav.items-6 li:nth-child(5),.opened-nav.items-8 li:nth-child(6){-webkit-transform:rotate(123deg) skew(60deg);-ms-transform:rotate(123deg) skew(60deg);transform:rotate(123deg) skew(60deg)}.item-even-right-3,.opened-nav.items-10 li:nth-child(8),.opened-nav.items-6 li:nth-child(6),.opened-nav.items-8 li:nth-child(7){-webkit-transform:rotate(155deg) skew(60deg);-ms-transform:rotate(155deg) skew(60deg);transform:rotate(155deg) skew(60deg)}.item-even-right-4,.opened-nav.items-10 li:nth-child(9),.opened-nav.items-8 li:nth-child(8){-webkit-transform:rotate(187deg) skew(60deg);-ms-transform:rotate(187deg) skew(60deg);transform:rotate(187deg) skew(60deg)}.item-even-right-5,.opened-nav.items-10 li:nth-child(10){-webkit-transform:rotate(219deg) skew(60deg);-ms-transform:rotate(219deg) skew(60deg);transform:rotate(219deg) skew(60deg)}.cn-wrapper li a{-webkit-transform:skew(-60deg) rotate(-75deg) scale(1);-ms-transform:skew(-60deg) rotate(-75deg) scale(1);transform:skew(-60deg) rotate(-75deg) scale(1)}
diff --git a/www/css/custommfb.css b/www/css/custommfb.css
deleted file mode 100644
index 58c3b049..00000000
--- a/www/css/custommfb.css
+++ /dev/null
@@ -1,670 +0,0 @@
-/**
- * CONTENTS
- *
- * #Introduction........Naming conventions used throughout the code.
- *
- * #SETTINGS
- * Variables............Globally-available variables and config.
- *
- * #TOOLS
- * Mixins...............Useful mixins.
- *
- * #GENERIC
- * Demo styles..........Styles for demo only (consider removing these).
- *
- * #BASE
- * Raw styles...........The very basic component wrapper.
- * Modifiers............The basic styles dependant on component placement.
- * Debuggers............The basic styles dependant on component placement.
- *
- * #BUTTONS
- * Base..................Wrapping and constraining every button.
- * Modifiers.............Styles that depends on state and settings.
- * Animations............Main animations of the component.
- * Debuggers.............Styles for development.
- *
- * #LABELS
- * Base..................Wrapping and constraining every label.
- * Modifiers.............Styles that depends on state and settings.
- * Debuggers.............Styles for development.
- *
- * #DEVELOPMENT
- * In development........These styles are in development and not yet finalised
- * Debuggers.............Helper styles and flags for development.
- */
-/*------------------------------------*\
-    #Introduction
-\*------------------------------------*/
-/**
- * The code AND the comments use naming conventions to refer to each part of
- * the UI put in place by this component. If you see that somewhere they are
- * not followed please consider a Pull Request. The naming conventions are:
- *
- * "Component" : the widget itself as a whole. This is the last time it will be
- *               called anything different than "component". So, stay away from
- *               "widget", "button" or anything else when referring to the
- *               Component in general.
- *
- * "Main Button" : the button that is always in view. Hovering or clicking on it
- *                 will reveal the child buttons.
- *
- * "Child buttons" : if you've read the previous point you know what they are.
- *                   Did you read the previous point? :)
- *
- * "Label(s)" : the tooltip that fades in when hovering over a button.
-
-/*------------------------------------*\
-    #SETTINGS | Variables
-\*------------------------------------*/
-/**
- * These variables are the default styles that serve as fallback and can be
- * easily customised at compile time.
- * Consider overriding them in your own style sheets rather than editing them
- * here. Refer to the docs for more info.
- */
-/* COLORS ----------------------------*/
-/* EFFECTS ---------------------------*/
-/* SPEEDS ----------------------------*/
-/* SIZES -----------------------------*/
-/* SPACING ---------------------------*/
-/* OTHER VARIABLES -------------------*/
-/*------------------------------------*\
-    #BASE | Raw styles
-\*------------------------------------*/
-/**
- * The very core styling of the button.
- * These styles are shared by every instance of the button.
- * Styles placed here should NOT care about placement in the screen,
- * options chosen by the user or state of the button.
- */
-.mfb-component--tl, .mfb-component--tr, .mfb-component--bl, .mfb-component--br {
-  box-sizing: border-box;
-  margin: 20px;
-  position: fixed;
-  white-space: nowrap;
-  z-index: 30;
-  padding-left: 0;
-  list-style: none; }
-  .mfb-component--tl *, .mfb-component--tr *, .mfb-component--bl *, .mfb-component--br *, .mfb-component--tl *:before, .mfb-component--tr *:before, .mfb-component--bl *:before, .mfb-component--br *:before, .mfb-component--tl *:after, .mfb-component--tr *:after, .mfb-component--bl *:after, .mfb-component--br *:after {
-    box-sizing: inherit; }
-
-/*------------------------------------*\
-    #BASE | Modifiers
-\*------------------------------------*/
-/**
- * These styles depends on the placement of the button.
- * Styles can be:
- * 1. Top-left:  modified by the " --tl " suffix.
- * 2. Top-right: modified by the " --tr " suffix.
- * 3. Bottom-left:  modified by the " --bl " suffix.
- * 4. Bottom-right: modified by the " --br " suffix.
- */
-.mfb-component--tl {
-  left: 0;
-  top: 0; }
-
-.mfb-component--tr {
-  right: 0;
-  top: 0; }
-
-.mfb-component--bl {
-  left: 0;
-  bottom: 0; }
-
-.mfb-component--br {
-  right: 0;
-  bottom: 0; }
-
-/*------------------------------------*\
-    #BUTTONS | Base
-\*------------------------------------*/
-.mfb-component__button--main, .mfb-component__button--child {
-  background-color: #E40A5D;
-  display: inline-block;
-  position: relative;
-  border: none;
-  border-radius: 50%;
-  /* box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28); - PP */
-  opacity: 0.8;
-  /* PP */
-  cursor: pointer;
-  outline: none;
-  padding: 0;
-  position: relative;
-  -webkit-user-drag: none;
-  font-weight: bold;
-  color: #f1f1f1; }
-
-/**
- * This is the unordered list for the list items that contain
- * the child buttons.
- *
- */
-.mfb-component__list {
-  list-style: none;
-  margin: 0;
-  padding: 0; }
-  .mfb-component__list > li {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 1px;
-    padding: 10px 0;
-    margin: -10px 0; }
-
-/**
- * These are the basic styles for all the icons inside the main button
- */
-.mfb-component__icon, .mfb-component__main-icon--active,
-.mfb-component__main-icon--resting, .mfb-component__child-icon {
-  position: absolute;
-  font-size: 18px;
-  text-align: center;
-  line-height: 45px;
-  width: 100%; }
-
-.mfb-component__wrap {
-  padding: 20px;
-  margin: -20px; }
-
-[data-mfb-toggle="hover"]:hover .mfb-component__icon, [data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
-[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting, [data-mfb-toggle="hover"]:hover .mfb-component__child-icon,
-[data-mfb-state="open"] .mfb-component__icon,
-[data-mfb-state="open"] .mfb-component__main-icon--active,
-[data-mfb-state="open"] .mfb-component__main-icon--resting,
-[data-mfb-state="open"] .mfb-component__child-icon {
-  -webkit-transform: scale(1) rotate(0deg);
-  transform: scale(1) rotate(0deg); }
-
-/*------------------------------------*\
-    #BUTTONS | Modifiers
-\*------------------------------------*/
-.mfb-component__button--main {
-  height: 45px;
-  width: 45px;
-  z-index: 20; }
-
-.mfb-component__button--child {
-  height: 45px;
-  width: 45px; }
-
-.mfb-component__main-icon--active,
-.mfb-component__main-icon--resting {
-  -webkit-transform: scale(1) rotate(360deg);
-  transform: scale(1) rotate(360deg);
-  -webkit-transition: -webkit-transform 150ms cubic-bezier(0.4, 0, 1, 1);
-  transition: transform 150ms cubic-bezier(0.4, 0, 1, 1); }
-
-.mfb-component__child-icon,
-.mfb-component__child-icon {
-  line-height: 45px;
-  font-size: 14.46429px; }
-
-.mfb-component__main-icon--active {
-  opacity: 0; }
-
-[data-mfb-toggle="hover"]:hover .mfb-component__main-icon,
-[data-mfb-state="open"] .mfb-component__main-icon {
-  -webkit-transform: scale(1) rotate(0deg);
-  transform: scale(1) rotate(0deg); }
-[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,
-[data-mfb-state="open"] .mfb-component__main-icon--resting {
-  opacity: 0;
-  position: absolute !important; }
-[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
-[data-mfb-state="open"] .mfb-component__main-icon--active {
-  opacity: 1; }
-
-/*------------------------------------*\
-    #BUTTONS | Animations
-\*------------------------------------*/
-/**
- * SLIDE IN + FADE
- * When hovering the main button, the child buttons slide out from beneath
- * the main button while transitioning from transparent to opaque.
- *
- */
-.mfb-component--tl.mfb-slidein .mfb-component__list li,
-.mfb-component--tr.mfb-slidein .mfb-component__list li {
-  opacity: 0;
-  transition: all 0.5s; }
-.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
-.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
-.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
-  opacity: 1; }
-.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(50px);
-  transform: translateY(50px); }
-.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(100px);
-  transform: translateY(100px); }
-.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(150px);
-  transform: translateY(150px); }
-.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(200px);
-  transform: translateY(200px); }
-
-.mfb-component--bl.mfb-slidein .mfb-component__list li,
-.mfb-component--br.mfb-slidein .mfb-component__list li {
-  opacity: 0;
-  transition: all 0.5s; }
-.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
-.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
-.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
-  opacity: 1; }
-.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-50px);
-  transform: translateY(-50px); }
-.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-100px);
-  transform: translateY(-100px); }
-.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-150px);
-  transform: translateY(-150px); }
-.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-200px);
-  transform: translateY(-200px); }
-
-/**
- * SLIDE IN SPRING
- * Same as slide-in but with a springy animation.
- *
- */
-.mfb-component--tl.mfb-slidein-spring .mfb-component__list li,
-.mfb-component--tr.mfb-slidein-spring .mfb-component__list li {
-  opacity: 0;
-  transition: all 0.5s;
-  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
-.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1) {
-  transition-delay: 0.05s; }
-.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2) {
-  transition-delay: 0.1s; }
-.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3) {
-  transition-delay: 0.15s; }
-.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4) {
-  transition-delay: 0.2s; }
-.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li,
-.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,
-.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li {
-  opacity: 1; }
-.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  transition-delay: 0.05s;
-  -webkit-transform: translateY(50px);
-  transform: translateY(50px); }
-.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  transition-delay: 0.1s;
-  -webkit-transform: translateY(100px);
-  transform: translateY(100px); }
-.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  transition-delay: 0.15s;
-  -webkit-transform: translateY(150px);
-  transform: translateY(150px); }
-.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  transition-delay: 0.2s;
-  -webkit-transform: translateY(200px);
-  transform: translateY(200px); }
-
-.mfb-component--bl.mfb-slidein-spring .mfb-component__list li,
-.mfb-component--br.mfb-slidein-spring .mfb-component__list li {
-  opacity: 0;
-  transition: all 0.5s;
-  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
-.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1) {
-  transition-delay: 0.05s; }
-.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2) {
-  transition-delay: 0.1s; }
-.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3) {
-  transition-delay: 0.15s; }
-.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4) {
-  transition-delay: 0.2s; }
-.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li, .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li,
-.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li,
-.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li {
-  opacity: 1; }
-.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  transition-delay: 0.05s;
-  -webkit-transform: translateY(-50px);
-  transform: translateY(-50px); }
-.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  transition-delay: 0.1s;
-  -webkit-transform: translateY(-100px);
-  transform: translateY(-100px); }
-.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  transition-delay: 0.15s;
-  -webkit-transform: translateY(-150px);
-  transform: translateY(-150px); }
-.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-slidein-spring[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-slidein-spring[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  transition-delay: 0.2s;
-  -webkit-transform: translateY(-200px);
-  transform: translateY(-200px); }
-
-/**
- * ZOOM-IN
- * When hovering the main button, the child buttons grow
- * from zero to normal size.
- *
- */
-.mfb-component--tl.mfb-zoomin .mfb-component__list li,
-.mfb-component--tr.mfb-zoomin .mfb-component__list li {
-  -webkit-transform: scale(0);
-  transform: scale(0); }
-.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(50px) scale(0);
-  transform: translateY(50px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.15s; }
-.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(100px) scale(0);
-  transform: translateY(100px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.1s; }
-.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(150px) scale(0);
-  transform: translateY(150px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.05s; }
-.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(200px) scale(0);
-  transform: translateY(200px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0s; }
-.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(50px) scale(1);
-  transform: translateY(50px) scale(1);
-  transition-delay: 0.05s; }
-.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(100px) scale(1);
-  transform: translateY(100px) scale(1);
-  transition-delay: 0.1s; }
-.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(150px) scale(1);
-  transform: translateY(150px) scale(1);
-  transition-delay: 0.15s; }
-.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(200px) scale(1);
-  transform: translateY(200px) scale(1);
-  transition-delay: 0.2s; }
-
-.mfb-component--bl.mfb-zoomin .mfb-component__list li,
-.mfb-component--br.mfb-zoomin .mfb-component__list li {
-  -webkit-transform: scale(0);
-  transform: scale(0); }
-.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-50px) scale(0);
-  transform: translateY(-50px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.15s; }
-.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-100px) scale(0);
-  transform: translateY(-100px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.1s; }
-.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-150px) scale(0);
-  transform: translateY(-150px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.05s; }
-.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-200px) scale(0);
-  transform: translateY(-200px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0s; }
-.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-50px) scale(1);
-  transform: translateY(-50px) scale(1);
-  transition-delay: 0.05s; }
-.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-100px) scale(1);
-  transform: translateY(-100px) scale(1);
-  transition-delay: 0.1s; }
-.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-150px) scale(1);
-  transform: translateY(-150px) scale(1);
-  transition-delay: 0.15s; }
-.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-200px) scale(1);
-  transform: translateY(-200px) scale(1);
-  transition-delay: 0.2s; }
-
-/**
- * FOUNTAIN
- * When hovering the main button the child buttons
- * jump into view from outside the viewport
- */
-.mfb-component--tl.mfb-fountain .mfb-component__list li,
-.mfb-component--tr.mfb-fountain .mfb-component__list li {
-  -webkit-transform: scale(0);
-  transform: scale(0); }
-.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-50px) scale(0);
-  transform: translateY(-50px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.15s; }
-.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-100px) scale(0);
-  transform: translateY(-100px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.1s; }
-.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-150px) scale(0);
-  transform: translateY(-150px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.05s; }
-.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-200px) scale(0);
-  transform: translateY(-200px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0s; }
-.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(50px) scale(1);
-  transform: translateY(50px) scale(1);
-  transition-delay: 0.05s; }
-.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(100px) scale(1);
-  transform: translateY(100px) scale(1);
-  transition-delay: 0.1s; }
-.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(150px) scale(1);
-  transform: translateY(150px) scale(1);
-  transition-delay: 0.15s; }
-.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(200px) scale(1);
-  transform: translateY(200px) scale(1);
-  transition-delay: 0.2s; }
-
-.mfb-component--bl.mfb-fountain .mfb-component__list li,
-.mfb-component--br.mfb-fountain .mfb-component__list li {
-  -webkit-transform: scale(0);
-  transform: scale(0); }
-.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(50px) scale(0);
-  transform: translateY(50px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.15s; }
-.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(100px) scale(0);
-  transform: translateY(100px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.1s; }
-.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(150px) scale(0);
-  transform: translateY(150px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0.05s; }
-.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(200px) scale(0);
-  transform: translateY(200px) scale(0);
-  transition: all 0.5s;
-  transition-delay: 0s; }
-.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
-.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
-  -webkit-transform: translateY(-50px) scale(1);
-  transform: translateY(-50px) scale(1);
-  transition-delay: 0.05s; }
-.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
-.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
-  -webkit-transform: translateY(-100px) scale(1);
-  transform: translateY(-100px) scale(1);
-  transition-delay: 0.1s; }
-.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
-.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
-  -webkit-transform: translateY(-150px) scale(1);
-  transform: translateY(-150px) scale(1);
-  transition-delay: 0.15s; }
-.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4), .mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
-.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
-  -webkit-transform: translateY(-200px) scale(1);
-  transform: translateY(-200px) scale(1);
-  transition-delay: 0.2s; }
-
-/*------------------------------------*\
-    #LABELS | base
-\*------------------------------------*/
-/**
- * These are the labels associated to each button,
- * exposed only when hovering the related button.
- * They are called labels but are in fact data-attributes of
- * each button (an anchor tag).
- */
-[data-mfb-label]:after {
-  content: attr(data-mfb-label);
-  opacity: 0;
-  transition: all 0.5s;
-  background: rgba(0, 0, 0, 0.4);
-  padding: 4px 10px;
-  border-radius: 3px;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 12px;
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  margin-top: -10px;
-  transition: all 0.5s; }
-
-[data-mfb-toggle="hover"] [data-mfb-label]:hover:after,
-[data-mfb-state="open"] [data-mfb-label]:after {
-  content: attr(data-mfb-label);
-  opacity: 1;
-  transition: all 0.3s; }
-
-/*------------------------------------*\
-    #LABELS | Modifiers
-\*------------------------------------*/
-.mfb-component--br [data-mfb-label]:after, .mfb-component--tr [data-mfb-label]:after {
-  content: attr(data-mfb-label);
-  right: 50px; }
-
-.mfb-component--br .mfb-component__list [data-mfb-label]:after, .mfb-component--tr .mfb-component__list [data-mfb-label]:after {
-  content: attr(data-mfb-label);
-  right: 50px; }
-
-.mfb-component--tl [data-mfb-label]:after, .mfb-component--bl [data-mfb-label]:after {
-  content: attr(data-mfb-label);
-  left: 50px; }
-
-.mfb-component--tl .mfb-component__list [data-mfb-label]:after, .mfb-component--bl .mfb-component__list [data-mfb-label]:after {
-  content: attr(data-mfb-label);
-  left: 50px; }
-
-/*------------------------------------*\
-    #DEVELOPMENT | In development
-\*------------------------------------*/
-/**
- * This part is where unfinished code should stay.
- * When a feature is ready(sh) move these styles to their proper place.
- */
-/*------------------------------------*\
-    #DEVELOPMENT | Debuggers
-\*------------------------------------*/
-/**
- * These are mainly helpers for development. They do not have to end up
- * in production but it's handy to keep them when developing.
- */
-/**
- * Apply this class to the html tag when developing the slide-in button
- */
diff --git a/www/css/custommfb.min.css b/www/css/custommfb.min.css
new file mode 100644
index 00000000..cb67dac6
--- /dev/null
+++ b/www/css/custommfb.min.css
@@ -0,0 +1 @@
+.mfb-component--bl,.mfb-component--br,.mfb-component--tl,.mfb-component--tr{box-sizing:border-box;margin:20px;position:fixed;white-space:nowrap;z-index:30;padding-left:0;list-style:none}.mfb-component--bl *,.mfb-component--bl :after,.mfb-component--bl :before,.mfb-component--br *,.mfb-component--br :after,.mfb-component--br :before,.mfb-component--tl *,.mfb-component--tl :after,.mfb-component--tl :before,.mfb-component--tr *,.mfb-component--tr :after,.mfb-component--tr :before{box-sizing:inherit}.mfb-component--tl{left:0;top:0}.mfb-component--tr{right:0;top:0}.mfb-component--bl{left:0;bottom:0}.mfb-component--br{right:0;bottom:0}.mfb-component__button--child,.mfb-component__button--main{background-color:#e40a5d;display:inline-block;position:relative;border:none;border-radius:50%;opacity:.8;cursor:pointer;outline:0;padding:0;position:relative;-webkit-user-drag:none;font-weight:700;color:#f1f1f1}.mfb-component__list{list-style:none;margin:0;padding:0}.mfb-component__list>li{display:block;position:absolute;top:0;right:1px;padding:10px 0;margin:-10px 0}.mfb-component__child-icon,.mfb-component__icon,.mfb-component__main-icon--active,.mfb-component__main-icon--resting{position:absolute;font-size:18px;text-align:center;line-height:45px;width:100%}.mfb-component__wrap{padding:20px;margin:-20px}[data-mfb-state=open] .mfb-component__child-icon,[data-mfb-state=open] .mfb-component__icon,[data-mfb-state=open] .mfb-component__main-icon--active,[data-mfb-state=open] .mfb-component__main-icon--resting,[data-mfb-toggle=hover]:hover .mfb-component__child-icon,[data-mfb-toggle=hover]:hover .mfb-component__icon,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--active,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--resting{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}.mfb-component__button--main{height:45px;width:45px;z-index:20}.mfb-component__button--child{height:45px;width:45px}.mfb-component__main-icon--active,.mfb-component__main-icon--resting{-webkit-transform:scale(1) rotate(360deg);transform:scale(1) rotate(360deg);-webkit-transition:-webkit-transform 150ms cubic-bezier(.4,0,1,1);transition:transform 150ms cubic-bezier(.4,0,1,1)}.mfb-component__child-icon{line-height:45px;font-size:14.46429px}.mfb-component__main-icon--active{opacity:0}[data-mfb-state=open] .mfb-component__main-icon,[data-mfb-toggle=hover]:hover .mfb-component__main-icon{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}[data-mfb-state=open] .mfb-component__main-icon--resting,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--resting{opacity:0;position:absolute!important}[data-mfb-state=open] .mfb-component__main-icon--active,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--active{opacity:1}.mfb-component--tl.mfb-slidein .mfb-component__list li,.mfb-component--tr.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px);transform:translateY(50px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px);transform:translateY(100px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px);transform:translateY(150px)}.mfb-component--tl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px);transform:translateY(200px)}.mfb-component--bl.mfb-slidein .mfb-component__list li,.mfb-component--br.mfb-slidein .mfb-component__list li{opacity:0;transition:all .5s}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li,.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px);transform:translateY(-50px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px);transform:translateY(-100px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px);transform:translateY(-150px)}.mfb-component--bl.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px);transform:translateY(-200px)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:50ms}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--tl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){transition-delay:50ms;-webkit-transform:translateY(50px);transform:translateY(50px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(100px);transform:translateY(100px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(150px);transform:translateY(150px)}.mfb-component--tl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(200px);transform:translateY(200px)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li,.mfb-component--br.mfb-slidein-spring .mfb-component__list li{opacity:0;transition:all .5s;transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(1){transition-delay:50ms}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(2){transition-delay:.1s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(3){transition-delay:.15s}.mfb-component--bl.mfb-slidein-spring .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring .mfb-component__list li:nth-child(4){transition-delay:.2s}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li,.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li{opacity:1}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){transition-delay:50ms;-webkit-transform:translateY(-50px);transform:translateY(-50px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){transition-delay:.1s;-webkit-transform:translateY(-100px);transform:translateY(-100px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){transition-delay:.15s;-webkit-transform:translateY(-150px);transform:translateY(-150px)}.mfb-component--bl.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-slidein-spring[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){transition-delay:.2s;-webkit-transform:translateY(-200px);transform:translateY(-200px)}.mfb-component--tl.mfb-zoomin .mfb-component__list li,.mfb-component--tr.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(0);transform:translateY(50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(0);transform:translateY(100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(0);transform:translateY(150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(0);transform:translateY(200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(1);transform:translateY(50px) scale(1);transition-delay:50ms}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(1);transform:translateY(100px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(1);transform:translateY(150px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(1);transform:translateY(200px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-zoomin .mfb-component__list li,.mfb-component--br.mfb-zoomin .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(0);transform:translateY(-50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(0);transform:translateY(-100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(0);transform:translateY(-150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(0);transform:translateY(-200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(1);transform:translateY(-50px) scale(1);transition-delay:50ms}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(1);transform:translateY(-100px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(1);transform:translateY(-150px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-zoomin[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(1);transform:translateY(-200px) scale(1);transition-delay:.2s}.mfb-component--tl.mfb-fountain .mfb-component__list li,.mfb-component--tr.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(0);transform:translateY(-50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(0);transform:translateY(-100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(0);transform:translateY(-150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(0);transform:translateY(-200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(1);transform:translateY(50px) scale(1);transition-delay:50ms}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(1);transform:translateY(100px) scale(1);transition-delay:.1s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(1);transform:translateY(150px) scale(1);transition-delay:.15s}.mfb-component--tl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--tr.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(1);transform:translateY(200px) scale(1);transition-delay:.2s}.mfb-component--bl.mfb-fountain .mfb-component__list li,.mfb-component--br.mfb-fountain .mfb-component__list li{-webkit-transform:scale(0);transform:scale(0)}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1){-webkit-transform:translateY(50px) scale(0);transform:translateY(50px) scale(0);transition:all .5s;transition-delay:.15s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2){-webkit-transform:translateY(100px) scale(0);transform:translateY(100px) scale(0);transition:all .5s;transition-delay:.1s}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3){-webkit-transform:translateY(150px) scale(0);transform:translateY(150px) scale(0);transition:all .5s;transition-delay:50ms}.mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4){-webkit-transform:translateY(200px) scale(0);transform:translateY(200px) scale(0);transition:all .5s;transition-delay:0s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(1),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(1){-webkit-transform:translateY(-50px) scale(1);transform:translateY(-50px) scale(1);transition-delay:50ms}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(2),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(2){-webkit-transform:translateY(-100px) scale(1);transform:translateY(-100px) scale(1);transition-delay:.1s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(3),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(3){-webkit-transform:translateY(-150px) scale(1);transform:translateY(-150px) scale(1);transition-delay:.15s}.mfb-component--bl.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--bl.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-state=open] .mfb-component__list li:nth-child(4),.mfb-component--br.mfb-fountain[data-mfb-toggle=hover]:hover .mfb-component__list li:nth-child(4){-webkit-transform:translateY(-200px) scale(1);transform:translateY(-200px) scale(1);transition-delay:.2s}[data-mfb-label]:after{content:attr(data-mfb-label);opacity:0;transition:all .5s;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:3px;color:rgba(255,255,255,.8);font-size:12px;pointer-events:none;position:absolute;top:50%;margin-top:-10px;transition:all .5s}[data-mfb-state=open] [data-mfb-label]:after,[data-mfb-toggle=hover] [data-mfb-label]:hover:after{content:attr(data-mfb-label);opacity:1;transition:all .3s}.mfb-component--br [data-mfb-label]:after,.mfb-component--tr [data-mfb-label]:after{content:attr(data-mfb-label);right:50px}.mfb-component--br .mfb-component__list [data-mfb-label]:after,.mfb-component--tr .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);right:50px}.mfb-component--bl [data-mfb-label]:after,.mfb-component--tl [data-mfb-label]:after{content:attr(data-mfb-label);left:50px}.mfb-component--bl .mfb-component__list [data-mfb-label]:after,.mfb-component--tl .mfb-component__list [data-mfb-label]:after{content:attr(data-mfb-label);left:50px}
diff --git a/www/index.html b/www/index.html
index a81760d1..d7f0e9bf 100644
--- a/www/index.html
+++ b/www/index.html
@@ -19,9 +19,9 @@
 
   <!-- style sheets-->
   <link rel="stylesheet" href="css/animate.min.css">
-  <link rel="stylesheet" href="css/angular-circular-navigation.css">
-  <link rel="stylesheet" href="css/custommfb.css">
-  <link rel="stylesheet" href="css/angular-carousel.css">
+  <link rel="stylesheet" href="css/angular-circular-navigation.min.css">
+  <link rel="stylesheet" href="css/custommfb.min.css">
+  <link rel="stylesheet" href="css/angular-carousel.min.css">
   <link href="css/ionic.app.min.css" rel="stylesheet">
   <link href="css/style.css" rel="stylesheet">
 
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index a7ba3128..15ae11df 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -67,6 +67,9 @@ angular.module('zmApp.controllers')
     var eventsListScrubHeight = eventsListScrubHeight;
     var eventsListDetailsHeight = eventsListDetailsHeight;
 
+    var eHandle;
+    var scrubOngoing = false;
+
 
     //---------------------------------------------------
     // initial code
@@ -149,6 +152,9 @@ angular.module('zmApp.controllers')
       else if ($scope.modal != undefined && $scope.modal.isShown()) {
           NVR.debug ("Not reloading as you have a modal open");
       }
+      else if (scrubOngoing) {
+          NVR.debug ("Not reloading, as video scrub is on");
+      }
       else {
         doRefresh();
       }
@@ -825,11 +831,18 @@ angular.module('zmApp.controllers')
 
     $scope.readyToPlay = function (api) {
 
-      api.mediaElement.attr("playsinline", "");
+      eHandle = api;
+      eHandle.mediaElement.attr("playsinline", "");
 
 
     };
 
+    $scope.eventCanPlay = function() {
+        NVR.debug("This video can be played");
+        eHandle.play();
+
+    };
+
 
     $scope.downloadFileToDevice = function (path, eid) {
 
@@ -2109,6 +2122,11 @@ angular.module('zmApp.controllers')
         scrollbynumber = 0;
       }
 
+      if (scrubOngoing) { 
+          NVR.debug ("making sure scrub is off");
+          scrubOngoing = false;
+      }
+
       if (oldEvent && event != oldEvent) {
 
         NVR.debug("EventCtrl:Old event scrub will hide now");
@@ -2207,6 +2225,7 @@ angular.module('zmApp.controllers')
         {
 
           NVR.debug("EventCtrl: Scrubbing will turn on now");
+          scrubOngoing = true;
           $scope.currentEvent = "";
           $scope.event = event;
           //$ionicScrollDelegate.freezeScroll(true);
@@ -2313,7 +2332,7 @@ angular.module('zmApp.controllers')
 
             ],
 
-            theme: "lib/videogular-themes-default/videogular.css",
+            theme: "external/videogular2.2.1/videogular.min.css",
 
           };
 
diff --git a/www/js/EventModalCtrl.js b/www/js/EventModalCtrl.js
index c025cd3d..f22f6dc0 100644
--- a/www/js/EventModalCtrl.js
+++ b/www/js/EventModalCtrl.js
@@ -208,28 +208,7 @@ angular.module('zmApp.controllers').controller('EventModalCtrl', ['$scope', '$ro
 
     });
 
-    $timeout(function () {
-      //  NVR.debug("Player is ready, invoking play");
-      //  handle.play()
-
-        /*
-        .then (function (succ) {
-            NVR.debug ("Pause completed, doing a play");
-            handle.play();
-        })
-        .catch (function (err) {
-            NVR.log ('Error invoking promised pause ' + JSON.stringify(err), 'error');
-        })*/
-       
-        /*playerPromise
-        .then (function (succ) {NVR.debug ("video should be playing");})
-        .catch ( function (err) {
-                NVR.log ('Error trying to play: '+JSON.stringify(err), 'error');
-            });*/
-
-    }, 300);
-
-    // window.stop();
+   
   };
 
   $scope.onPlaybackUpdate = function (rate) {
diff --git a/www/js/app.js b/www/js/app.js
index af63f450..7c03fbdd 100755
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -701,8 +701,9 @@ angular.module('zmApp', [
       
         if (response.data && typeof(response.data) == 'string' && response.data.startsWith("<pre class=\"cake-error\">")) {
             console.log ("cake error detected, attempting fix...");
+            //console.log ("BAD = "+ JSON.stringify(response.data));
             response.data = JSON.parse(response.data.replace(/<pre class=\"cake-error\">[\s\S]*<\/pre>/,''));
-            //console.log ("FIXED="+response.data);
+           // console.log ("FIXED="+JSON.stringify(response.data));
         }
         //"data":"<pre class=\"cake-error\">
         return response;
diff --git a/www/templates/events.html b/www/templates/events.html
index 394dfa14..62249598 100644
--- a/www/templates/events.html
+++ b/www/templates/events.html
@@ -198,7 +198,7 @@
                 <br />
                 <div class="videogular-container">
                   <videogular  vg-theme="event.Event.video.config.theme" vg-plays-inline="'true'" vg-auto-play="'true'"
-                    vg-responsive="true" vg-player-ready="readyToPlay($API)">
+                    vg-responsive="true" vg-can-play="eventCanPlay()" vg-player-ready="readyToPlay($API)">
                     <vg-overlay-play></vg-overlay-play>
                     <vg-controls>
                       <vg-play-pause-button></vg-play-pause-button>
diff --git a/www/templates/menu.html b/www/templates/menu.html
index 25df3422..9c780310 100644
--- a/www/templates/menu.html
+++ b/www/templates/menu.html
@@ -35,7 +35,7 @@
 
             
           <!--<ion-item ng-click="navigateView('app.timeline')" menu-close>-->
-          <ion-item id="menu-move-2" href="#/app/timeline" ng-click="go('/app/timeline')">
+          <ion-item id="testaut_menu_timeline" href="#/app/timeline" ng-click="go('/app/timeline')">
             <span class=" item-icon-left">
               <i class="icon ion-android-time"></i>
             </span>{{'kMenuTimeline'|translate}}
@@ -136,7 +136,7 @@
           </div>
 
           <!--<ion-item nav-clear menu-close ng-click="navigateView('app.log')" >-->
-          <ion-item id="menu-move-12" nav-clear href="#/app/log" ng-click="go('/app/log')">
+          <ion-item id="testaut_menu_logs" nav-clear href="#/app/log" ng-click="go('/app/log')">
             <span class=" item-icon-left">
               <i class="icon ion-clipboard"></i>
             </span> {{'kMenuLogs'|translate}}