mega changes, including updates and X

12 files changed, 1691 insertions, 0 deletions

diff --git a/www/lib/ng-mfb/mfb/src/_/_fountain.scss b/www/lib/ng-mfb/mfb/src/_/_fountain.scss
new file mode 100644
index 00000000..cd5a2933
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_fountain.scss
@@ -0,0 +1,77 @@
+@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/lib/ng-mfb/mfb/src/_/_slidein-spring.scss b/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss
new file mode 100644
index 00000000..7a08d72d
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_slidein-spring.scss
@@ -0,0 +1,67 @@
+@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/lib/ng-mfb/mfb/src/_/_slidein.scss b/www/lib/ng-mfb/mfb/src/_/_slidein.scss
new file mode 100644
index 00000000..f2735124
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_slidein.scss
@@ -0,0 +1,53 @@
+@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/lib/ng-mfb/mfb/src/_/_zoomin.scss b/www/lib/ng-mfb/mfb/src/_/_zoomin.scss
new file mode 100644
index 00000000..df0ee0ff
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/_/_zoomin.scss
@@ -0,0 +1,78 @@
+@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/lib/ng-mfb/mfb/src/index.css b/www/lib/ng-mfb/mfb/src/index.css
new file mode 100644
index 00000000..f106807c
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/index.css
@@ -0,0 +1,236 @@
+html, body{
+  height: 100%;
+  min-height: 100%;
+  background: #E9EBEC;
+  -webkit-font-smoothing: initial;
+  text-rendering: initial;
+}
+html{
+  font-family: 'Raleway', sans-serif;
+  font-weight: 200;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+body{
+  display: -webkit-flex;
+  -webkit-align-items: center;
+  -webkit-justify-content: center;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+html p, body p{
+  line-height: inherit;
+}
+h1{
+  margin: 0.2em 0;
+  color: rgba(40, 33, 33, .7);
+  color: rgba(124, 98, 152, 1);
+  font-weight: 400;
+}
+header{
+  background: #00C8BE;
+  padding: 0.3em 1em;
+  position: relative;
+  z-index: 20;
+}
+.viewCode header{
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+.showcode{
+  background: rgb(232, 216, 49);
+  color: rgba(124, 98, 152, 1);
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  position: absolute;
+  right: 1em;
+  bottom: 0;
+  margin-bottom: -15px;
+  border-radius: 100%;
+  font-size: 16px;
+  cursor: pointer;
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
+  transition: all .3s;
+}
+.viewCode .showcode{
+  -webkit-transform: rotateX(-180deg);
+  transform: rotateX(-180deg);
+  box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+.icon-nocode, .icon-yepcode{
+  transition: opacity .3s;
+  position: absolute;
+  left: 0;
+  display: block;
+  width: 100%;
+  line-height: 40px;
+}
+.icon-nocode{
+  opacity: 0;
+}
+.viewCode .icon-nocode{
+  opacity: 1;
+}
+.viewCode .icon-yepcode{
+  opacity: 0;
+}
+.panel{
+  width: 90%;
+  position: relative;
+  max-width: 650px;
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
+  background: #F5F5F5;
+  border-radius: 3px;
+  overflow: hidden;
+}
+article{
+  min-height: 180px;
+  padding: 1em;
+  font-weight: 200;
+  line-height: 1.5em;
+  position: relative;
+}
+footer{
+  padding: 0.3em 1em 1em;
+}
+footer a, footer a:active, footer a:visited{
+  color: inherit;
+}
+.code{
+  position: absolute;
+  top: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  overflow: scroll;
+  background: rgba(124, 98, 152, 0.94);
+  color: rgba(245, 247, 247, 0.92);
+  padding: 0em 1em;
+  transition: all .4s;
+  -webkit-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+.code p:first-child{
+  margin-top: 2em;
+}
+.code a{
+  color: rgba(232, 216, 49, 0.9);
+}
+.viewCode .code{
+  -webkit-transform: translateY(0);
+  transform: translateY(0);
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36);
+}
+.actions{
+  font-weight: 300;
+  text-transform: uppercase;
+  font-size: 0.8em;
+  padding: 1em;
+  border: none;
+  background: none;
+  transition: color .2s;
+  cursor: pointer;
+}
+.actions:hover{
+  color: rgb(30, 30, 171);
+  background: #F5F5F5;
+  box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
+}
+
+code, pre {
+  background: rgba(255,255,255,0.1);
+  color:  rgba(232, 216, 49, 0.9);
+  font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New",monospace;
+  padding: 0.5em;
+  border-radius: 3px;
+  margin: 1em 0;
+}
+code{
+  display: inline;
+  vertical-align: middle;
+  margin: 0;
+}
+pre{
+  display: block;
+}
+.striked{
+ text-decoration: line-through;
+}
+.mfb-component--tl{
+  animation: fromTop 1s 1;
+  -webkit-animation: fromTop 1s 1;
+}
+.mfb-component--tr{
+  animation: fromTop 1.3s 1;
+  -webkit-animation: fromTop 1.3s 1;
+}
+.mfb-component--br{
+  animation: fromBottom 1.6s 1;
+  -webkit-animation: fromBottom 1.6s 1;
+}
+.mfb-component--bl{
+  animation: fromBottom 1.9s 1;
+  -webkit-animation: fromBottom 1.9s 1;
+}
+@keyframes fromBottom {
+  0% {
+    transform: translateY(250px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes fromTop {
+  0% {
+    transform: translateY(-250px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes fromBottom {
+  0% {
+    transform: translateY(250px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes fromTop {
+  0% {
+    transform: translateY(-250px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/www/lib/ng-mfb/mfb/src/lib/modernizr.touch.js b/www/lib/ng-mfb/mfb/src/lib/modernizr.touch.js
new file mode 100644
index 00000000..d259ef04
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/lib/modernizr.touch.js
@@ -0,0 +1,4 @@
+/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
+ * Build: http://modernizr.com/download/#-touch-teststyles-prefixes
+ */
+;window.Modernizr=function(a,b,c){function v(a){i.cssText=a}function w(a,b){return v(l.join(a+";")+(b||""))}function x(a,b){return typeof a===b}function y(a,b){return!!~(""+a).indexOf(b)}function z(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:x(f,"function")?f.bind(d||b):f}return!1}var d="2.8.3",e={},f=b.documentElement,g="modernizr",h=b.createElement(g),i=h.style,j,k={}.toString,l=" -webkit- -moz- -o- -ms- ".split(" "),m={},n={},o={},p=[],q=p.slice,r,s=function(a,c,d,e){var h,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:g+(d+1),l.appendChild(j);return h=["&#173;",'<style id="s',g,'">',a,"</style>"].join(""),l.id=g,(m?l:n).innerHTML+=h,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=f.style.overflow,f.style.overflow="hidden",f.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),f.style.overflow=k),!!i},t={}.hasOwnProperty,u;!x(t,"undefined")&&!x(t.call,"undefined")?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=q.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(q.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(q.call(arguments)))};return e}),m.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:s(["@media (",l.join("touch-enabled),("),g,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c};for(var A in m)u(m,A)&&(r=A.toLowerCase(),e[r]=m[A](),p.push((e[r]?"":"no-")+r));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)u(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof enableClasses!="undefined"&&enableClasses&&(f.className+=" "+(b?"":"no-")+a),e[a]=b}return e},v(""),h=j=null,e._version=d,e._prefixes=l,e.testStyles=s,e}(this,this.document);
diff --git a/www/lib/ng-mfb/mfb/src/mfb.css b/www/lib/ng-mfb/mfb/src/mfb.css
new file mode 100644
index 00000000..49c07001
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/mfb.css
@@ -0,0 +1,670 @@
+/**
+ * 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: 25px;
+  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, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
+  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: 56px;
+  width: 100%; }
+
+.mfb-component__wrap {
+  padding: 25px;
+  margin: -25px; }
+
+[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: 56px;
+  width: 56px;
+  z-index: 20; }
+
+.mfb-component__button--child {
+  height: 56px;
+  width: 56px; }
+
+.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: 56px;
+  font-size: 18px; }
+
+.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(70px);
+  transform: translateY(70px); }
+.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(140px);
+  transform: translateY(140px); }
+.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(210px);
+  transform: translateY(210px); }
+.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(280px);
+  transform: translateY(280px); }
+
+.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(-70px);
+  transform: translateY(-70px); }
+.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(-140px);
+  transform: translateY(-140px); }
+.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(-210px);
+  transform: translateY(-210px); }
+.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(-280px);
+  transform: translateY(-280px); }
+
+/**
+ * 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(70px);
+  transform: translateY(70px); }
+.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(140px);
+  transform: translateY(140px); }
+.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(210px);
+  transform: translateY(210px); }
+.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(280px);
+  transform: translateY(280px); }
+
+.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(-70px);
+  transform: translateY(-70px); }
+.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(-140px);
+  transform: translateY(-140px); }
+.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(-210px);
+  transform: translateY(-210px); }
+.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(-280px);
+  transform: translateY(-280px); }
+
+/**
+ * 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(70px) scale(0);
+  transform: translateY(70px) 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(140px) scale(0);
+  transform: translateY(140px) 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(210px) scale(0);
+  transform: translateY(210px) 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(280px) scale(0);
+  transform: translateY(280px) 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(70px) scale(1);
+  transform: translateY(70px) 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(140px) scale(1);
+  transform: translateY(140px) 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(210px) scale(1);
+  transform: translateY(210px) 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(280px) scale(1);
+  transform: translateY(280px) 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(-70px) scale(0);
+  transform: translateY(-70px) 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(-140px) scale(0);
+  transform: translateY(-140px) 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(-210px) scale(0);
+  transform: translateY(-210px) 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(-280px) scale(0);
+  transform: translateY(-280px) 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(-70px) scale(1);
+  transform: translateY(-70px) 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(-140px) scale(1);
+  transform: translateY(-140px) 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(-210px) scale(1);
+  transform: translateY(-210px) 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(-280px) scale(1);
+  transform: translateY(-280px) 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(-70px) scale(0);
+  transform: translateY(-70px) 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(-140px) scale(0);
+  transform: translateY(-140px) 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(-210px) scale(0);
+  transform: translateY(-210px) 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(-280px) scale(0);
+  transform: translateY(-280px) 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(70px) scale(1);
+  transform: translateY(70px) 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(140px) scale(1);
+  transform: translateY(140px) 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(210px) scale(1);
+  transform: translateY(210px) 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(280px) scale(1);
+  transform: translateY(280px) 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(70px) scale(0);
+  transform: translateY(70px) 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(140px) scale(0);
+  transform: translateY(140px) 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(210px) scale(0);
+  transform: translateY(210px) 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(280px) scale(0);
+  transform: translateY(280px) 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(-70px) scale(1);
+  transform: translateY(-70px) 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(-140px) scale(1);
+  transform: translateY(-140px) 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(-210px) scale(1);
+  transform: translateY(-210px) 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(-280px) scale(1);
+  transform: translateY(-280px) 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: 13px;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  margin-top: -10.5px;
+  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: 70px; }
+
+.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: 70px; }
+
+.mfb-component--tl [data-mfb-label]:after, .mfb-component--bl [data-mfb-label]:after {
+  content: attr(data-mfb-label);
+  left: 70px; }
+
+.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: 70px; }
+
+/*------------------------------------*\
+    #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
+ */
+
+/*# sourceMappingURL=mfb.css.map */
diff --git a/www/lib/ng-mfb/mfb/src/mfb.css.map b/www/lib/ng-mfb/mfb/src/mfb.css.map
new file mode 100644
index 00000000..2e20298a
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/mfb.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "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",
+"sources": ["mfb.scss","_/_slidein.scss","_/_slidein-spring.scss","_/_zoomin.scss","_/_fountain.scss"],
+"names": [],
+"file": "mfb.css"
+}
diff --git a/www/lib/ng-mfb/mfb/src/mfb.js b/www/lib/ng-mfb/mfb/src/mfb.js
new file mode 100644
index 00000000..286b63ab
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/mfb.js
@@ -0,0 +1,94 @@
+/**
+ * Material floating button
+ * By: Nobita
+ * Repo and docs: https://github.com/nobitagit/material-floating-button
+ *
+ * License: MIT
+ */
+
+;(function ( window, document, undefined ) {
+
+  'use strict';
+
+  /**
+   * Some defaults
+   */
+  var clickOpt = 'click',
+      hoverOpt = 'hover',
+      toggleMethod = 'data-mfb-toggle',
+      menuState = 'data-mfb-state',
+      isOpen = 'open',
+      isClosed = 'closed',
+      mainButtonClass = 'mfb-component__button--main';
+
+  /**
+   * Internal references
+   */
+  var elemsToClick,
+      elemsToHover,
+      mainButton,
+      target,
+      currentState;
+
+  /**
+   * For every menu we need to get the main button and attach the appropriate evt.
+   */
+  function attachEvt( elems, evt ){
+    for( var i = 0, len = elems.length; i < len; i++ ){
+      mainButton = elems[i].querySelector('.' + mainButtonClass);
+      mainButton.addEventListener( evt , toggleButton, false);
+    }
+  }
+
+  /**
+   * Remove the hover option, set a click toggle and a default,
+   * initial state of 'closed' to menu that's been targeted.
+   */
+  function replaceAttrs( elems ){
+    for( var i = 0, len = elems.length; i < len; i++ ){
+      elems[i].setAttribute( toggleMethod, clickOpt );
+      elems[i].setAttribute( menuState, isClosed );
+    }
+  }
+
+  function getElemsByToggleMethod( selector ){
+    return document.querySelectorAll('[' + toggleMethod + '="' + selector + '"]');
+  }
+
+  /**
+   * The open/close action is performed by toggling an attribute
+   * on the menu main element.
+   *
+   * First, check if the target is the menu itself. If it's a child
+   * keep walking up the tree until we found the main element
+   * where we can toggle the state.
+   */
+  function toggleButton( evt ){
+
+    target = evt.target;
+    while ( target && !target.getAttribute( toggleMethod ) ){
+      target = target.parentNode;
+      if(!target) { return; }
+    }
+
+    currentState = target.getAttribute( menuState ) === isOpen ? isClosed : isOpen;
+
+    target.setAttribute(menuState, currentState);
+
+  }
+
+  /**
+   * On touch enabled devices we assume that no hover state is possible.
+   * So, we get the menu with hover action configured and we set it up
+   * in order to make it usable with tap/click.
+   **/
+  if ( window.Modernizr && Modernizr.touch ){
+    elemsToHover = getElemsByToggleMethod( hoverOpt );
+    replaceAttrs( elemsToHover );
+  }
+
+  elemsToClick = getElemsByToggleMethod( clickOpt );
+
+  attachEvt( elemsToClick, 'click' );
+
+})( window, document );
diff --git a/www/lib/ng-mfb/mfb/src/mfb.min.css b/www/lib/ng-mfb/mfb/src/mfb.min.css
new file mode 100644
index 00000000..16907537
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/mfb.min.css
@@ -0,0 +1 @@
+.mfb-component--bl,.mfb-component--br,.mfb-component--tl,.mfb-component--tr{box-sizing:border-box;margin:25px;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;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);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:56px;width:100%}.mfb-component__wrap{padding:25px;margin:-25px}[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(0deg);transform:scale(1) rotate(0deg)}.mfb-component__button--main{height:56px;width:56px;z-index:20}.mfb-component__button--child{height:56px;width:56px}.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:56px;font-size:18px}.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(0deg);transform:scale(1) rotate(0deg)}[data-mfb-state=open] .mfb-component__main-icon--resting,[data-mfb-toggle=hover]:hover .mfb-component__main-icon--resting{opacity:0}[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(70px);transform:translateY(70px)}.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(140px);transform:translateY(140px)}.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(210px);transform:translateY(210px)}.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(280px);transform:translateY(280px)}.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(-70px);transform:translateY(-70px)}.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(-140px);transform:translateY(-140px)}.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(-210px);transform:translateY(-210px)}.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(-280px);transform:translateY(-280px)}.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:.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:.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:.05s;-webkit-transform:translateY(70px);transform:translateY(70px)}.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(140px);transform:translateY(140px)}.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(210px);transform:translateY(210px)}.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(280px);transform:translateY(280px)}.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:.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:.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:.05s;-webkit-transform:translateY(-70px);transform:translateY(-70px)}.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(-140px);transform:translateY(-140px)}.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(-210px);transform:translateY(-210px)}.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(-280px);transform:translateY(-280px)}.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(70px) scale(0);transform:translateY(70px) 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(140px) scale(0);transform:translateY(140px) 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(210px) scale(0);transform:translateY(210px) scale(0);transition:all .5s;transition-delay:.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(280px) scale(0);transform:translateY(280px) 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(70px) scale(1);transform:translateY(70px) scale(1);transition-delay:.05s}.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(140px) scale(1);transform:translateY(140px) 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(210px) scale(1);transform:translateY(210px) 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(280px) scale(1);transform:translateY(280px) 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(-70px) scale(0);transform:translateY(-70px) 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(-140px) scale(0);transform:translateY(-140px) 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(-210px) scale(0);transform:translateY(-210px) scale(0);transition:all .5s;transition-delay:.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(-280px) scale(0);transform:translateY(-280px) 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(-70px) scale(1);transform:translateY(-70px) scale(1);transition-delay:.05s}.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(-140px) scale(1);transform:translateY(-140px) 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(-210px) scale(1);transform:translateY(-210px) 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(-280px) scale(1);transform:translateY(-280px) 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(-70px) scale(0);transform:translateY(-70px) 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(-140px) scale(0);transform:translateY(-140px) 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(-210px) scale(0);transform:translateY(-210px) scale(0);transition:all .5s;transition-delay:.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(-280px) scale(0);transform:translateY(-280px) 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(70px) scale(1);transform:translateY(70px) scale(1);transition-delay:.05s}.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(140px) scale(1);transform:translateY(140px) 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(210px) scale(1);transform:translateY(210px) 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(280px) scale(1);transform:translateY(280px) 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(70px) scale(0);transform:translateY(70px) 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(140px) scale(0);transform:translateY(140px) 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(210px) scale(0);transform:translateY(210px) scale(0);transition:all .5s;transition-delay:.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(280px) scale(0);transform:translateY(280px) 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(-70px) scale(1);transform:translateY(-70px) scale(1);transition-delay:.05s}.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(-140px) scale(1);transform:translateY(-140px) 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(-210px) scale(1);transform:translateY(-210px) 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(-280px) scale(1);transform:translateY(-280px) scale(1);transition-delay:.2s}[data-mfb-label]:after{content:attr(data-mfb-label);opacity:0;background:rgba(0,0,0,.4);padding:4px 10px;border-radius:3px;color:rgba(255,255,255,.8);font-size:13px;pointer-events:none;position:absolute;top:50%;margin-top:-10.5px;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 .mfb-component__list [data-mfb-label]:after,.mfb-component--br [data-mfb-label]:after,.mfb-component--tr .mfb-component__list [data-mfb-label]:after,.mfb-component--tr [data-mfb-label]:after{content:attr(data-mfb-label);right:70px}.mfb-component--bl .mfb-component__list [data-mfb-label]:after,.mfb-component--bl [data-mfb-label]:after,.mfb-component--tl .mfb-component__list [data-mfb-label]:after,.mfb-component--tl [data-mfb-label]:after{content:attr(data-mfb-label);left:70px}
diff --git a/www/lib/ng-mfb/mfb/src/mfb.min.js b/www/lib/ng-mfb/mfb/src/mfb.min.js
new file mode 100644
index 00000000..3ca53b80
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/mfb.min.js
@@ -0,0 +1 @@
+!function(a,b){"use strict";function c(a,b){for(var c=0,d=a.length;d>c;c++)i=a[c].querySelector("."+r),i.addEventListener(b,f,!1)}function d(a){for(var b=0,c=a.length;c>b;b++)a[b].setAttribute(n,l),a[b].setAttribute(o,q)}function e(a){return b.querySelectorAll("["+n+'="'+a+'"]')}function f(a){for(j=a.target;j&&!j.getAttribute(n);)if(j=j.parentNode,!j)return;k=j.getAttribute(o)===p?q:p,j.setAttribute(o,k)}var g,h,i,j,k,l="click",m="hover",n="data-mfb-toggle",o="data-mfb-state",p="open",q="closed",r="mfb-component__button--main";a.Modernizr&&Modernizr.touch&&(h=e(m),d(h)),g=e(l),c(g,"click")}(window,document);
diff --git a/www/lib/ng-mfb/mfb/src/mfb.scss b/www/lib/ng-mfb/mfb/src/mfb.scss
new file mode 100644
index 00000000..cef5a14e
--- /dev/null
+++ b/www/lib/ng-mfb/mfb/src/mfb.scss
@@ -0,0 +1,403 @@
+/**
+ * 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 ----------------------------*/
+
+// the main/primary color
+$main-color: #E40A5D !default;
+// aka the white text
+$bright-text: rgba(255, 255, 255, 0.8) !default;
+
+/* EFFECTS ---------------------------*/
+
+// which effects must be made available in the css
+$effects-zoomin: true !default;
+$effects-slidein: true !default;
+$effects-fountain: true !default;
+
+/* SPEEDS ----------------------------*/
+
+// the speed of the inflation of each button after hovering on the main button
+$delay-staggering-inflate: 0.1s !default;
+// when hovering on the main button the child buttons slide into view
+$slide-speed: .5s !default;
+// the labels disappear at this speed on mouse out
+$label-hover-off: .5s !default;
+// the labels appear at this speed on mouse over
+$label-hover-on: .3s !default;
+
+/* SIZES -----------------------------*/
+
+// main button diameter
+$main_button_size: 56px !default;
+// main button diameter
+$child_button_size: 56px !default;
+// the distance of the main button from the closest corners of the screen
+$border-distance: 25px !default;
+// font-size for labels
+$labels-font-size: 13px !default;
+// top & bottom padding for the labels
+$labels-padding-vertical: 4px !default;
+// left & right padding for the labels
+$labels-padding-horizontal: 10px !default;
+
+/* SPACING ---------------------------*/
+
+// space between buttons
+$button-space: 70px !default;
+
+// space between button and label
+$button-label-space: 70px !default;
+
+/* OTHER VARIABLES -------------------*/
+
+// how many child buttons does the component have
+$number-of-child-buttons: 4 !default;
+
+/*------------------------------------*\
+    #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{
+  box-sizing: border-box; // A better box-sizing
+  margin: $border-distance;
+  position: fixed;
+  white-space: nowrap;
+  z-index: 30;
+  // this padding is really needed  only if the element is an <ul>
+  // otherwise it can probably be ditched.
+  padding-left: 0;
+  list-style: none;
+
+  // make sure that everything inside this component
+  // inherits the same box-sizing
+  *, *:before, *: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{
+  @extend %mfb-component;
+  left: 0; top: 0;
+}
+.mfb-component--tr{
+  @extend %mfb-component;
+  right: 0; top: 0;
+}
+.mfb-component--bl{
+  @extend %mfb-component;
+  left: 0; bottom: 0;
+}
+.mfb-component--br{
+  @extend %mfb-component;
+  right: 0; bottom: 0;
+}
+
+
+/*------------------------------------*\
+    #BUTTONS | Base
+\*------------------------------------*/
+
+%mfb-component__button{
+  background-color: $main-color;
+  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);
+  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;
+  &>li{
+    display: block;
+    position: absolute;
+    top: 0;
+    right: ($main_button_size - $child_button_size + 2) / 2;
+    padding: 10px + ($main_button_size - $child_button_size) / 2 0;
+    margin: -(10px + ($main_button_size - $child_button_size) / 2) 0;
+  }
+}
+
+/**
+ * These are the basic styles for all the icons inside the main button
+ */
+.mfb-component__icon{
+  position: absolute;
+  font-size: 18px;
+  text-align: center;
+  line-height: 56px;
+  width: 100%;
+}
+
+.mfb-component__wrap{
+  // this double declaration adds some padding to the main button
+  // to expand the area that triggers the hover state. The equal, negative
+  // margin evens out the distance form the borders so that the button
+  // does not shift out of position.
+  padding: $border-distance;
+  margin: -$border-distance;
+}
+
+[data-mfb-toggle="hover"]:hover,
+[data-mfb-state="open"]{
+  .mfb-component__icon {
+    -webkit-transform: scale(1) rotate(0deg);
+    transform: scale(1) rotate(0deg);
+  }
+}
+
+
+/*------------------------------------*\
+    #BUTTONS | Modifiers
+\*------------------------------------*/
+
+.mfb-component__button--main{
+  @extend %mfb-component__button;
+  height: $main_button_size;
+  width: $main_button_size;
+  z-index: 20;
+}
+.mfb-component__button--child{
+  @extend %mfb-component__button;
+  height: $child_button_size;
+  width: $child_button_size;
+}
+// the icons for the main button
+.mfb-component__main-icon--active,
+.mfb-component__main-icon--resting{
+  @extend .mfb-component__icon;
+  -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);
+}
+// the icons for the main button
+.mfb-component__child-icon,
+.mfb-component__child-icon{
+  @extend .mfb-component__icon;
+  line-height: $child_button_size;
+  font-size: 18 / 56 * $child_button_size;
+}
+.mfb-component__main-icon--active{
+  opacity: 0;
+}
+[data-mfb-toggle="hover"]:hover,
+[data-mfb-state="open"]{
+  .mfb-component__main-icon{
+    -webkit-transform: scale(1) rotate(0deg);
+    transform: scale(1) rotate(0deg);
+  }
+  .mfb-component__main-icon--resting{
+    opacity: 0;
+    // don't remove this, needed for ng-mfb downstream repo!
+    position: absolute !important;
+  }
+  .mfb-component__main-icon--active{
+    opacity: 1;
+  }
+}
+
+/*------------------------------------*\
+    #BUTTONS | Animations
+\*------------------------------------*/
+
+@import "_/_slidein";
+@import "_/_slidein-spring";
+@import "_/_zoomin";
+@import "_/_fountain";
+
+// Ugly work-around for this https://github.com/sass/sass/issues/451
+@if $effects-slidein == true {
+  @include effects-slidein;
+}
+@if $effects-slidein == true {
+  @include effects-slidein-spring;
+}
+@if $effects-zoomin == true {
+  @include effects-zoomin;
+}
+@if $effects-fountain == true {
+  @include effects-fountain;
+}
+
+/*------------------------------------*\
+    #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 $label-hover-off;
+  background: rgba(0,0,0, .4);
+  padding: $labels-padding-vertical $labels-padding-horizontal;
+  border-radius: 3px;
+  color: $bright-text;
+  font-size: $labels-font-size;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  margin-top: - ($labels-padding-vertical + $labels-font-size / 2);
+  transition: all $label-hover-off; // the label disappears at this speed
+}
+[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 $label-hover-on; // the label appears at this speed
+}
+/*------------------------------------*\
+    #LABELS | Modifiers
+\*------------------------------------*/
+.mfb-component--br, .mfb-component--tr{
+  [data-mfb-label]:after {
+    content: attr(data-mfb-label);
+    right: $button-label-space;
+  }
+}
+.mfb-component--br .mfb-component__list, .mfb-component--tr .mfb-component__list {
+  [data-mfb-label]:after {
+    content: attr(data-mfb-label);
+    right: $button-label-space - ($main_button_size - $child_button_size) / 2;
+  }
+}
+.mfb-component--tl, .mfb-component--bl{
+  [data-mfb-label]:after {
+    content: attr(data-mfb-label);
+    left: $button-label-space;
+  }
+}
+.mfb-component--tl .mfb-component__list, .mfb-component--bl .mfb-component__list{
+  [data-mfb-label]:after {
+    content: attr(data-mfb-label);
+    left: $button-label-space - ($main_button_size - $child_button_size) / 2;
+  }
+}
+/*------------------------------------*\
+    #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
+ */