added Material Design Bootstrap

2017-06-10 18:33:03 -07:00 · 2017-06-10 18:33:03 -07:00 · b561abac63
commit b561abac63
parent 15f7a0d7a7
84 changed files with 56009 additions and 116 deletions
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@ -2,7 +2,7 @@
 	border: 1px dashed lightgrey;
 	padding: 1em;
 	height: 200px;
-	width: 300px;
+	width: 100%;
 }

 .all-claims-img {
@ -11,4 +11,8 @@

 #image-preview {
 	display: none;
+}
+
+.row {
+	margin: 10px 0px 10px 0px;
 }
--- a/public/assets/img/favicon.ico
+++ b/public/assets/img/favicon.ico
--- a/public/vendors/MDB/css/bootstrap.css
+++ b/public/vendors/MDB/css/bootstrap.css
--- a/public/vendors/MDB/css/bootstrap.min.css
+++ b/public/vendors/MDB/css/bootstrap.min.css
--- a/public/vendors/MDB/css/mdb.css
+++ b/public/vendors/MDB/css/mdb.css
--- a/public/vendors/MDB/css/mdb.min.css
+++ b/public/vendors/MDB/css/mdb.min.css
--- a/public/vendors/MDB/css/style.css
+++ b/public/vendors/MDB/css/style.css
@ -0,0 +1 @@
+/* YOUR CUSTOM STYLES */
--- a/public/vendors/MDB/font/roboto/Roboto-Bold.eot
+++ b/public/vendors/MDB/font/roboto/Roboto-Bold.eot
--- a/public/vendors/MDB/font/roboto/Roboto-Bold.ttf
+++ b/public/vendors/MDB/font/roboto/Roboto-Bold.ttf
--- a/public/vendors/MDB/font/roboto/Roboto-Bold.woff
+++ b/public/vendors/MDB/font/roboto/Roboto-Bold.woff
--- a/public/vendors/MDB/font/roboto/Roboto-Bold.woff2
+++ b/public/vendors/MDB/font/roboto/Roboto-Bold.woff2
--- a/public/vendors/MDB/font/roboto/Roboto-Light.eot
+++ b/public/vendors/MDB/font/roboto/Roboto-Light.eot
--- a/public/vendors/MDB/font/roboto/Roboto-Light.ttf
+++ b/public/vendors/MDB/font/roboto/Roboto-Light.ttf
--- a/public/vendors/MDB/font/roboto/Roboto-Light.woff
+++ b/public/vendors/MDB/font/roboto/Roboto-Light.woff
--- a/public/vendors/MDB/font/roboto/Roboto-Light.woff2
+++ b/public/vendors/MDB/font/roboto/Roboto-Light.woff2
--- a/public/vendors/MDB/font/roboto/Roboto-Medium.eot
+++ b/public/vendors/MDB/font/roboto/Roboto-Medium.eot
--- a/public/vendors/MDB/font/roboto/Roboto-Medium.ttf
+++ b/public/vendors/MDB/font/roboto/Roboto-Medium.ttf
--- a/public/vendors/MDB/font/roboto/Roboto-Medium.woff
+++ b/public/vendors/MDB/font/roboto/Roboto-Medium.woff
--- a/public/vendors/MDB/font/roboto/Roboto-Medium.woff2
+++ b/public/vendors/MDB/font/roboto/Roboto-Medium.woff2
--- a/public/vendors/MDB/font/roboto/Roboto-Regular.eot
+++ b/public/vendors/MDB/font/roboto/Roboto-Regular.eot
--- a/public/vendors/MDB/font/roboto/Roboto-Regular.ttf
+++ b/public/vendors/MDB/font/roboto/Roboto-Regular.ttf
--- a/public/vendors/MDB/font/roboto/Roboto-Regular.woff
+++ b/public/vendors/MDB/font/roboto/Roboto-Regular.woff
--- a/public/vendors/MDB/font/roboto/Roboto-Regular.woff2
+++ b/public/vendors/MDB/font/roboto/Roboto-Regular.woff2
--- a/public/vendors/MDB/font/roboto/Roboto-Thin.eot
+++ b/public/vendors/MDB/font/roboto/Roboto-Thin.eot
--- a/public/vendors/MDB/font/roboto/Roboto-Thin.ttf
+++ b/public/vendors/MDB/font/roboto/Roboto-Thin.ttf
--- a/public/vendors/MDB/font/roboto/Roboto-Thin.woff
+++ b/public/vendors/MDB/font/roboto/Roboto-Thin.woff
--- a/public/vendors/MDB/font/roboto/Roboto-Thin.woff2
+++ b/public/vendors/MDB/font/roboto/Roboto-Thin.woff2
--- a/public/vendors/MDB/img/lightbox/default-skin.png
+++ b/public/vendors/MDB/img/lightbox/default-skin.png
--- a/public/vendors/MDB/img/lightbox/default-skin.svg
+++ b/public/vendors/MDB/img/lightbox/default-skin.svg
@ -0,0 +1 @@
+<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
--- a/public/vendors/MDB/img/lightbox/preloader.gif
+++ b/public/vendors/MDB/img/lightbox/preloader.gif
--- a/public/vendors/MDB/img/overlays/01.png
+++ b/public/vendors/MDB/img/overlays/01.png
--- a/public/vendors/MDB/img/overlays/02.png
+++ b/public/vendors/MDB/img/overlays/02.png
--- a/public/vendors/MDB/img/overlays/03.png
+++ b/public/vendors/MDB/img/overlays/03.png
--- a/public/vendors/MDB/img/overlays/04.png
+++ b/public/vendors/MDB/img/overlays/04.png
--- a/public/vendors/MDB/img/overlays/05.png
+++ b/public/vendors/MDB/img/overlays/05.png
--- a/public/vendors/MDB/img/overlays/06.png
+++ b/public/vendors/MDB/img/overlays/06.png
--- a/public/vendors/MDB/img/overlays/07.png
+++ b/public/vendors/MDB/img/overlays/07.png
--- a/public/vendors/MDB/img/overlays/08.png
+++ b/public/vendors/MDB/img/overlays/08.png
--- a/public/vendors/MDB/img/overlays/09.png
+++ b/public/vendors/MDB/img/overlays/09.png
--- a/public/vendors/MDB/img/svg/arrow_left.svg
+++ b/public/vendors/MDB/img/svg/arrow_left.svg
@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/>
+    <path d="M0-.5h24v24H0z" fill="none"/>
+</svg>
--- a/public/vendors/MDB/img/svg/arrow_right.svg
+++ b/public/vendors/MDB/img/svg/arrow_right.svg
@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="36" viewBox="0 0 24 24" width="36" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/>
+    <path d="M0-.25h24v24H0z" fill="none"/>
+</svg>
--- a/public/vendors/MDB/index.html
+++ b/public/vendors/MDB/index.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <title>Material Design Bootstrap</title>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
+    <!-- Bootstrap core CSS -->
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <!-- Material Design Bootstrap -->
+    <link href="css/mdb.min.css" rel="stylesheet">
+    <!-- Your custom styles (optional) -->
+    <link href="css/style.css" rel="stylesheet">
+</head>
+
+<body>
+
+    <!-- Start your project here-->
+    <div style="height: 100vh">
+        <div class="flex-center flex-column">
+            <h1 class="animated fadeIn mb-2">Material Design for Bootstrap</h1>
+
+            <h5 class="animated fadeIn mb-1">Thank you for using our product. We're glad you're with us.</h5>
+
+            <p class="animated fadeIn text-muted">MDB Team</p>
+        </div>
+    </div>
+    <!-- /Start your project here-->
+
+    <!-- SCRIPTS -->
+    <!-- JQuery -->
+    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
+    <!-- Bootstrap tooltips -->
+    <script type="text/javascript" src="js/tether.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script type="text/javascript" src="js/bootstrap.min.js"></script>
+    <!-- MDB core JavaScript -->
+    <script type="text/javascript" src="js/mdb.min.js"></script>
+</body>
+
+</html>
--- a/public/vendors/MDB/js/bootstrap.js
+++ b/public/vendors/MDB/js/bootstrap.js
--- a/public/vendors/MDB/js/bootstrap.min.js
+++ b/public/vendors/MDB/js/bootstrap.min.js
--- a/public/vendors/MDB/js/jquery-2.2.3.js
+++ b/public/vendors/MDB/js/jquery-2.2.3.js
--- a/public/vendors/MDB/js/jquery-2.2.3.min.js
+++ b/public/vendors/MDB/js/jquery-2.2.3.min.js
--- a/public/vendors/MDB/js/jquery-3.1.1.js
+++ b/public/vendors/MDB/js/jquery-3.1.1.js
--- a/public/vendors/MDB/js/jquery-3.1.1.min.js
+++ b/public/vendors/MDB/js/jquery-3.1.1.min.js
--- a/public/vendors/MDB/js/mdb.js
+++ b/public/vendors/MDB/js/mdb.js
--- a/public/vendors/MDB/js/mdb.min.js
+++ b/public/vendors/MDB/js/mdb.min.js
--- a/public/vendors/MDB/js/tether.js
+++ b/public/vendors/MDB/js/tether.js
--- a/public/vendors/MDB/js/tether.min.js
+++ b/public/vendors/MDB/js/tether.min.js
--- a/public/vendors/MDB/sass/README.txt
+++ b/public/vendors/MDB/sass/README.txt
@ -0,0 +1,8 @@
+Warning! 
+
+SASS files are optional! They are not required to start working with MDB.
+
+You don't need to include them in your project.
+
+SASS are inteded for developers who are willing to modify MDB CSS code via SASS files. 
+All other users should include either mdb.css or mdb.min.css and skip SASS files.
--- a/public/vendors/MDB/sass/mdb.scss
+++ b/public/vendors/MDB/sass/mdb.scss
@ -0,0 +1,44 @@
+/*!
+ * Material Design for Bootstrap 4
+ * Version: MDB FREE 4.3.2
+ *
+ *
+ * Copyright: Material Design for Bootstrap
+ * http://mdbootstrap.com/
+ *
+ * Read the license: http://mdbootstrap.com/license/
+ *
+ * Atribution: Animate CSS, Twitter Bootstrap, Materialize CSS, Normalize CSS, Waves JS, WOW JS, Toastr, Chart.js , Hammer.js
+ *
+ */
+  
+@charset "UTF-8";  
+
+// MDB Framework //
+
+// Mixins
+@import "mdb/free/data/prefixer";
+@import "mdb/free/data/mixins";
+
+// Variables
+@import "mdb/free/data/colors"; 
+@import "mdb/free/data/variables-b4";
+@import "mdb/free/data/variables";  
+
+//Global
+@import "mdb/free/global"; 
+  
+// MDB Free  
+@import "mdb/free/roboto";
+@import "mdb/free/typography";
+@import "mdb/free/animations";
+@import "mdb/free/waves";
+@import "mdb/free/helpers";
+@import "mdb/free/buttons";  
+@import "mdb/free/forms-basic";
+@import "mdb/free/cards-basic";  
+@import "mdb/free/navbars";  
+@import "mdb/free/hover-effects";  
+@import "mdb/free/footer";  
+@import "mdb/free/carousels-basic";
+@import "mdb/free/modals";
--- a/public/vendors/MDB/sass/mdb/free/_animations.scss
+++ b/public/vendors/MDB/sass/mdb/free/_animations.scss
--- a/public/vendors/MDB/sass/mdb/free/_buttons.scss
+++ b/public/vendors/MDB/sass/mdb/free/_buttons.scss
@ -0,0 +1,553 @@
+// BUTTONS
+button:focus {
+    outline: none!important;
+}
+
+.btn {
+    font-size: 0.8rem;
+    padding: 0.85rem 2.13rem;
+    &.btn-lg {
+        font-size: 0.9rem;
+        padding: 1rem 2.4rem;
+    }
+    &.btn-md {
+        font-size: 0.7rem;
+        padding: 0.7rem 1.6rem;
+    }
+    &.btn-sm {
+        font-size: 0.6rem;
+        padding:  0.5rem 1.6rem;
+        &.btn-table {
+            padding: 0.5rem 0.9rem;
+        }
+        .fa {
+            font-size:0.8rem;
+        }
+    }
+}
+
+.btn {
+    border-radius: 2px;
+    border: 0;
+    @extend .z-depth-1;
+    transition: .2s ease-out;
+    color: #fff!important;
+    margin: 6px;
+    white-space: normal !important;
+    word-wrap: break-word;
+    text-transform: uppercase;
+    &:hover {
+        @extend .z-depth-1-half;
+        color: #fff;
+    }
+    &:active,
+    &:focus,
+    &.active {
+        outline: 0;
+        color: #fff;
+        @extend .z-depth-1-half;
+    } 
+    .fa {
+        font-size: 1.1rem;
+        position: relative;
+        vertical-align: middle;
+        margin-top: -2px;
+        &.right {
+            margin-left: 3px;
+        }
+        &.left {
+            margin-right: 3px;
+        }
+    }
+}
+
+.btn-group {
+    .btn {
+        margin: 0;
+    }
+}
+
+.btn-block {
+    margin: inherit;
+}
+
+// Alert buttons
+.btn-secondary {
+    background-color: $secondary-color;
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: lighten( $secondary-color, 5%)!important;
+        color: #fff;
+    }
+    &.active {
+        background-color: darken( $secondary-color, 20%)!important;
+        @extend .z-depth-1-half;
+        &:hover {
+            color: #fff;
+        }
+        &:focus {
+            color: #fff;
+        }
+    }
+    &.dropdown-toggle {
+        color: #fff!important;
+        background-color: $secondary-color!important;
+        @extend .z-depth-1-half;
+        &:hover {
+            color: #fff;
+            background-color: lighten( $secondary-color, 5%)!important;
+        }
+        &:focus {
+            color: #fff;
+            background-color: $secondary-color;
+        }
+    }
+}
+
+.btn-secondary:active:hover {
+    background-color: lighten( $secondary-color, 5%)!important;
+}
+
+.btn-primary {
+    background: $primary-color;
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: lighten( $primary-color, 5%)!important;
+    }
+    &.active {
+        background-color: darken( $primary-color, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-default {
+    background: $default-color;
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: lighten( $default-color, 5%)!important;
+    }
+    &.active {
+        background-color: darken( $default-color, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-success {
+    background: $success-color;
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: lighten( $success-color, 2%)!important;
+    }
+    &.active {
+        background-color: darken( $success-color, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-info {
+    background: $info-color;
+    &:hover,
+    &:focus {
+        background-color: lighten( $info-color, 5%)!important;
+    }
+    &.active {
+        background-color: darken( $info-color, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-warning {
+    background: $warning-color-dark;
+    &:hover,
+    &:focus {
+        background-color: lighten( $warning-color-dark, 6%)!important;
+    }
+    &.active {
+        background-color: darken( $warning-color, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-danger {
+    background: $danger-color-dark;
+    &:hover,
+    &:focus {
+        background-color: lighten( $danger-color-dark, 3%)!important;
+    }
+    &.active {
+        background-color: darken( $danger-color-dark, 15%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-link {
+    background-color: transparent;
+    color: #000!important;
+    &:hover,
+    &:focus {
+        background-color: transparent;
+        color: #000;
+    }
+}
+
+// Additional button styles
+.btn-outline-primary {
+    border: 2px solid $primary-color;
+    color: $primary-color-dark!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: $primary-color;
+        border-color: $primary-color;
+        background-color: transparent;
+    }
+}
+
+.btn-outline-secondary {
+    border: 2px solid $secondary-color;
+    color: $secondary-color-dark!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: $secondary-color;
+        border: 2px solid $secondary-color;
+        background-color: transparent;
+    }
+}
+
+.btn-outline-default {
+    background-color: transparent;
+    border: 2px solid $default-color;
+    color: $default-color-dark!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: $default-color;
+        border-color: $default-color;
+        background-color:transparent;
+    }
+}
+
+.btn-outline-success {
+    border: 2px solid $success-color;
+    color: $success-color-dark!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: $success-color;
+        border-color: $success-color;
+        background-color: transparent;
+    }
+}
+
+.btn-outline-info {
+    border: 2px solid $info-color;
+    color: $info-color-dark!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: $info-color;
+        border-color: $info-color;
+        background-color: transparent;
+
+    }
+}
+
+.btn-outline-warning {
+    border: 2px solid $warning-color;
+    color: $warning-color-dark!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        border-color: $warning-color;
+        color: $warning-color;
+        background-color: transparent;
+    }
+}
+
+.btn-outline-danger {
+    border: 2px solid $danger-color;
+    color: $danger-color-dark!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: $danger-color;
+        border-color: $danger-color;
+        background-color: transparent;
+    }
+}
+
+.btn-outline-white {
+    border: 2px solid #fff;
+    color: #fff!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: darken( #fff, 10%);
+        border-color: #fff;
+        background-color:transparent;
+    }
+}
+
+.btn-outline-black {
+    border: 2px solid #000;
+    color: #000!important;
+    background-color: transparent;
+    &:hover,
+    &:focus,
+    &:active,
+    &:active:focus {
+        color: #000;
+        border-color: #000;
+        background-color: transparent;
+    }
+}
+
+// Pagination
+.pager li a {
+    border: 0;
+    @extend .z-depth-1;
+    transition: .2s ease-out;
+    &:hover {
+        @extend .z-depth-1-half;
+    }
+}
+
+// Additional buttons colors
+.btn-elegant {
+    background: $elegant-color;
+    &:hover,
+    &:focus {
+        background-color: lighten( $elegant-color, 5%)!important;
+    }
+    &.active {
+        background-color: darken( $elegant-color, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-unique {
+    background: $unique-color-dark;
+    &:hover,
+    &:focus {
+        background-color: lighten( $unique-color-dark, 5%)!important;
+    }
+    &.active {
+        background-color: darken( $unique-color-dark, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-pink {
+    background: #e91e63;
+    &:hover,
+    &:focus {
+        background-color: lighten(#e91e63, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#e91e63, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-purple {
+    background: #4a148c;
+    &:hover,
+    &:focus {
+        background-color: lighten(#4a148c, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#4a148c, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-deep-purple {
+    background: #311b92;
+    &:hover,
+    &:focus {
+        background-color: lighten(#311b92, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#311b92, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-indigo {
+    background: #1a237e;
+    &:hover,
+    &:focus {
+        background-color: lighten(#1a237e, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#1a237e, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-cyan {
+    background: #00acc1;
+    &:hover,
+    &:focus {
+        background-color: lighten(#00acc1, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#00acc1, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-light-green {
+    background: #7cb342;
+    &:hover,
+    &:focus {
+        background-color: lighten(#7cb342, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#7cb342, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-dark-green {
+    background: #007E33;
+    &:hover,
+    &:focus {
+        background-color: lighten(#007E33, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#007E33, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-lime {
+    background: #afb42b;
+    &:hover,
+    &:focus {
+        background-color: lighten(#afb42b, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#afb42b, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-yellow {
+    background: #fbc02d;
+    &:hover,
+    &:focus {
+        background-color: lighten(#fbc02d, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#fbc02d, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-amber {
+    background: #ff6f00;
+    &:hover,
+    &:focus {
+        background-color: lighten(#ff6f00, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#ff6f00, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-orange {
+    background: #e65100;
+    &:hover,
+    &:focus {
+        background-color: lighten(#e65100, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#e65100, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-deep-orange {
+    background: #bf360c;
+    &:hover,
+    &:focus {
+        background-color: lighten(#bf360c, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#bf360c, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-brown {
+    background: #6d4c41;
+    &:hover,
+    &:focus {
+        background-color: lighten(#6d4c41, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#6d4c41, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-blue-grey {
+    background: #607d8b;
+    &:hover,
+    &:focus {
+        background-color: lighten(#607d8b, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#607d8b, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-mdb {
+    background: #45526E;
+    &:hover,
+    &:focus {
+        background-color: lighten(#45526E, 5%)!important;
+    }
+    &.active {
+        background-color: darken(#45526E, 20%)!important;
+        @extend .z-depth-1-half;
+    }
+}
+
+.btn-secondary {
+    &.disabled,
+    &:disabled {
+        background-color: #aa66cc;
+        cursor: not-allowed;
+        pointer-events: auto !important;
+    }
+}
+
+.btn-split {
+    padding-left: 0.85rem;
+    padding-right: 1.25rem;
+}
--- a/public/vendors/MDB/sass/mdb/free/_cards-basic.scss
+++ b/public/vendors/MDB/sass/mdb/free/_cards-basic.scss
@ -0,0 +1,90 @@
+// CARDS BASIC
+.card {
+    border: 0;
+    .card-title a {
+        color: #424242;
+        @include transition (0.4s);
+        &:hover {
+            color: #616161;
+            @include transition (0.4s);
+        }
+    }
+    img {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        @extend .img-fluid;
+    }
+    .card-block {
+        position:relative;
+    }
+    .card-footer {
+        padding-bottom: 0;
+        font-size:1.2rem;
+        &:after {
+            display:block;
+            content: "";
+            clear:both;
+        }
+        .card-link {
+            color: inherit;
+        }
+    }
+}
+
+// Jumbtotron
+.jumbotron {
+    background-color: #fff;
+    padding: 2rem;
+    &.m-1,
+    &.m-2,
+    &.m-3 {
+        z-index: 50;
+        position: relative;
+        margin-left: 3%;
+        margin-right: 3%;
+    }
+    &.m-1 {
+        margin-top: -20px;
+    }
+    &.m-2 {
+        margin-top: -30px;
+    }
+    &.m-3 {
+        margin-top: -40px;
+    }
+}
+
+// .list-group fix
+.list-group-item {
+    width:100%;
+}
+
+// edge header
+.edge-header {
+    display:block;
+    height:278px;
+    background-color:#ccc;
+}
+
+.free-bird {
+    margin-top:-100px; 
+}
+
+// Form sets
+
+.card .form-header {
+    color: #fff;
+    text-align: center;
+    margin-top: -50px;
+    margin-bottom: 3rem;
+    padding: 1rem;
+    @extend .z-depth-1-half;
+    @include border-radius(2px);
+    h3 {
+        margin: 0;
+        padding: 0.7rem;
+    }
+}
+.call .fa {
+    margin-right: 5px;
+}
--- a/public/vendors/MDB/sass/mdb/free/_carousels-basic.scss
+++ b/public/vendors/MDB/sass/mdb/free/_carousels-basic.scss
@ -0,0 +1,82 @@
+// CAROUSELS BASIC
+.carousel-control:hover {
+    @include transition-duration($duration: 400ms);
+}
+
+.carousel-fade .carousel-inner {
+    .carousel-item {
+        opacity: 0;
+        transition-property: opacity;
+    }
+    .active {
+        opacity: 1;
+    }
+    .active.left,
+    .active.right {
+        left: 0;
+        opacity: 0;
+        z-index: 1;
+    }
+    .next.left,
+    .prev.right {
+        opacity: 1;
+    }
+}
+
+.carousel-fade .carousel-control {
+    z-index: 2;
+}
+
+@media all and (transform-3d),
+(-webkit-transform-3d) {
+    .carousel-fade .carousel-inner > .carousel-item.next,
+    .carousel-fade .carousel-inner > .carousel-item.active.right {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    .carousel-fade .carousel-inner > .carousel-item.prev,
+    .carousel-fade .carousel-inner > .carousel-item.active.left {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+    .carousel-fade .carousel-inner > .carousel-item.next.left,
+    .carousel-fade .carousel-inner > .carousel-item.prev.right,
+    .carousel-fade .carousel-inner > .carousel-item.active {
+        opacity: 1;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.carousel {
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+        width: 36px;
+        height: 36px;
+    }
+    .carousel-control-prev-icon {
+        background-image: url(../img/svg/arrow_left.svg);
+    }
+    .carousel-control-next-icon {
+        background-image: url(../img/svg/arrow_right.svg);
+    }
+    .carousel-indicators {
+        li {
+            max-width: 10px;
+            height: 10px;
+            border-radius: 50%;
+        }
+    }
+    .video-fluid {
+        height: 100%;
+    }
+    &.no-flex {
+        .carousel-item.active,
+        .carousel-item-next,
+        .carousel-item-prev {
+            display: block;
+        }
+    }
+}
--- a/public/vendors/MDB/sass/mdb/free/_footer.scss
+++ b/public/vendors/MDB/sass/mdb/free/_footer.scss
@ -0,0 +1,51 @@
+// FOOTER
+footer.page-footer {
+    margin-top: 20px;
+    padding-top: 20px;
+    background-color: $stylish-color-dark;
+    color: #fff;
+    .footer-copyright {
+        overflow: hidden;
+        height: 50px;
+        line-height: 50px;
+        color: rgba(255, 255, 255, .8);
+        background-color: rgba(0, 0, 0, 0.2);
+        text-align: center;
+    }
+    a {
+        color: #fff;
+    }
+    .title {
+        text-transform: uppercase;
+    }
+    .call-to-action {
+        text-align: center;
+        padding-top: 1.3rem;
+        padding-bottom: 0.5rem;
+        ul li  {
+            display: inline-block;
+            padding-right: 10px;
+        }
+    }
+    .social-section {
+        text-align: center;
+         ul li  {
+            display: inline-block;
+             
+            
+        }
+    }
+}
+
+/* Instagram photos */ 
+ul.instagram-photos {
+    li {
+        display: inline-block;
+        max-width: 100px;
+        margin: 4px;
+        img {
+            margin: 0;
+            @extend .z-depth-1-half;
+        }
+    }
+}
--- a/public/vendors/MDB/sass/mdb/free/_forms-basic.scss
+++ b/public/vendors/MDB/sass/mdb/free/_forms-basic.scss
@ -0,0 +1,298 @@
+// FORMS BASIC
+// Text inputs
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=url],
+input[type=time],
+input[type=date],
+input[type=datetime-local],
+input[type=tel],
+input[type=number],
+input[type=search-md],
+input[type=search],
+textarea.md-textarea {
+    // General Styles
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid $input-border-color;
+    border-radius: 0;
+    outline: none;
+    height: 2.1rem;
+    width: 100%;
+    font-size: 1rem;
+    box-shadow: none;
+    @include box-sizing(content-box);
+    transition: all .3s;
+    // Disabled input style
+    &:disabled,
+    &:disabled,
+    &[readonly="readonly"] {
+        color: $input-disabled-color;
+        border-bottom: 1px dotted $input-disabled-color;
+        background-color: transparent;
+    }
+    // Disabled label style
+    &:disabled+label,
+    &[readonly="readonly"]+label {
+        color: $input-disabled-color;
+        background-color: transparent;
+    }
+    // Focused input style
+    &:focus:not([readonly]) {
+        border-bottom: 1px solid $input-focus-color;
+        box-shadow: 0 1px 0 0 $input-focus-color;
+    }
+    // Focused label style
+    &:focus:not([readonly])+label {
+        color: $input-focus-color;
+    }
+    // Valid Input Style
+    &.valid,
+    &:focus.valid {
+        border-bottom: 1px solid $input-success-color;
+        box-shadow: 0 1px 0 0 $input-success-color;
+    }
+    // Custom Success Message
+    &.valid+label:after,
+    &:focus.valid+label:after {
+        content: attr(data-success);
+        color: $input-success-color;
+        opacity: 1;
+    }
+    // Invalid Input Style
+    &.invalid,
+    &:focus.invalid {
+        border-bottom: 1px solid $input-error-color;
+        box-shadow: 0 1px 0 0 $input-error-color;
+    }
+    // Custom Error message
+    &.invalid+label:after,
+    &:focus.invalid+label:after {
+        content: attr(data-error);
+        color: $input-error-color;
+        opacity: 1;
+    }
+    // Form Message Shared Styles
+    &+label:after {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 65px;
+        opacity: 0;
+        transition: .2s opacity ease-out, .2s color ease-out;
+    }
+    &.input-alternate {
+        padding: 0 15px;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
+        font-size: 0.875rem;
+        border-bottom: 0;
+        transition: none !important;
+        &:hover,
+        &:focus {
+            box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .2), 0 0 0 1px rgba(0, 0, 0, .08) !important;
+            border-bottom: 0;
+        }
+    }
+}
+
+label {
+    font-size: $label-font-size;
+    color: darken ($input-border-color, 90%);
+}
+
+.form-control {
+    padding: 0;
+    padding-bottom: 0.6rem;
+    padding-top: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    background-color: transparent;
+    background-image: none;
+    border-radius: 0;
+    margin-top: 0.2rem;
+    margin-bottom: 1rem;
+    &:focus {
+        background: transparent;
+    }
+}
+
+.form-control:disabled,
+.form-control[readonly] {
+    background-color: transparent;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+// Styling for input field wrapper
+.md-form {
+    position: relative;
+    margin-bottom: 1.5rem;
+    &.form-sm {
+        input {
+            padding-bottom: 0.2rem;
+            padding-top: 0.2rem;
+            font-size: 0.8rem;
+            line-height: 0.5;
+        }
+        label {
+            font-size: 0.9rem;
+        }
+        .prefix {
+            font-size: 1.5rem;
+            top: 0.4rem;
+        }
+        .prefix~input,
+        .prefix~textarea {
+            margin-left: 2.2rem; //Po dodaniu marginesu z lewej powstaje dziwny margines po prawej. Do poprawienia przed updatem
+        }
+        .prefix~label {
+            margin-left: 2.2rem;
+        }
+    }
+    .btn {
+        margin-bottom: 1.5rem;
+    }
+    label {
+        color: #757575;
+        position: absolute;
+        top: 0.8rem;
+        left: 0;
+        font-size: 1rem;
+        cursor: text;
+        @include transition(.2s ease-out);
+    }
+    label.active {
+        font-size: $label-font-size;
+        @include transform(translateY(-140%));
+    }
+    // Prefix Icons
+    .prefix {
+        position: absolute;
+        width: 3rem;
+        font-size: 2rem;
+        @include transition(color .2s);
+        &.active {
+            color: $input-focus-color;
+        }
+    }
+    .prefix~input,
+    .prefix~textarea {
+        margin-left: 3rem;
+        width: 92%;
+        width: calc(100% - 3rem);
+    }
+    .prefix~textarea {
+        padding-top: .8rem;
+    }
+    .prefix~label {
+        margin-left: 3rem;
+    }
+    @media #{$medium-and-down} {
+        .prefix~input {
+            width: 86%;
+            width: calc(100% - 3rem);
+        }
+    }
+    @media #{$small-and-down} {
+        .prefix~input {
+            width: 80%;
+            width: calc(100% - 3rem);
+        }
+    }
+    &.input-group {
+        .form-control {
+            margin: 0;
+            padding-left: 1rem;
+            @include placeholder {
+                color: #999;
+                padding-top: 2px;
+            }
+        }
+    }
+}
+
+.form-inline {
+    fieldset {
+        margin-right: 1.5rem;
+    }
+}
+
+// Default textarea
+textarea {
+    width: 100%;
+    height: 3rem;
+    background-color: transparent;
+    &.md-textarea {
+        overflow-y: hidden;
+        /* prevents scroll bar flash */
+        padding: 1.6rem 0;
+        /* prevents text jump on Enter keypress */
+        resize: none;
+        min-height: 3rem;
+    }
+}
+
+// For textarea autoresize
+.hiddendiv {
+    display: none;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    /* future version of deprecated 'word-wrap' */
+    padding-top: 1.2rem;
+    /* prevents text jump on Enter keypress */
+}
+
+//Input color
+.input-dark-bg {
+    // Style Placeholders
+    @include placeholder {
+        color: #fff!important;
+        font-weight: 300;
+    }
+    input[type=text] {
+        border-bottom: 1px solid #fff;
+    }
+    .form-control {
+        color: #fff;
+    }
+}
+
+.input-light-bg {
+    // Style Placeholders
+    @include placeholder {
+        color: #1C2331!important;
+        font-weight: 300;
+    }
+    input[type=text] {
+        border-bottom: 1px solid #1C2331;
+    }
+    .form-control {
+        color: #1C2331;
+    }
+}
+
+.form-inline .form-group {
+    margin-right: 2rem;
+}
+
+i {
+    &.btn-primary {
+        background: $primary-color!important;
+    }
+    &.btn-default {
+        background: $default-color!important;
+    }
+    &.btn-success {
+        background: $success-color!important;
+    }
+    &.btn-info {
+        background: $info-color!important;
+    }
+    &.btn-warning {
+        background: $warning-color-dark!important;
+    }
+    &.btn-danger {
+        background: $danger-color-dark!important;
+    }
+}
--- a/public/vendors/MDB/sass/mdb/free/_global.scss
+++ b/public/vendors/MDB/sass/mdb/free/_global.scss
@ -0,0 +1,409 @@
+// GLOBAL STYLES
+// Z-levels
+.z-depth-0 {
+    box-shadow: none !important;
+}
+
+.z-depth-1 {
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.z-depth-1-half {
+    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+}
+
+.z-depth-2 {
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+.z-depth-3 {
+    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
+}
+
+.z-depth-4 {
+    box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21);
+}
+
+.z-depth-5 {
+    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
+}
+
+.hoverable {
+    transition: box-shadow .55s;
+    box-shadow: 0;
+}
+
+.hoverable:hover {
+    transition: box-shadow .45s;
+    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+
+// Normalize
+a {
+    color: $link-color;
+    text-decoration: none;
+    cursor: pointer;
+    // Gets rid of tap active state
+    -webkit-tap-highlight-color: transparent;
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+}
+
+.jumbotron,
+.card,
+.badge,
+.alert,
+.nav .nav-link,
+.navbar-toggler,
+.navbar,
+.breadcrumb,
+.page-item:last-child .page-link,
+.page-item:first-child .page-link,
+.pagination-lg .page-item:last-child .page-link,
+.pagination-lg .page-item:first-child .page-link,
+.pagination-sm .page-item:first-child .page-link,
+.pagination-sm .page-item:last-child .page-link,
+.list-group .list-group-item,
+.tooltip-inner,
+.popover,
+.dropdown-menu,
+.input-group-addon,
+.file-custom,
+.card .card-header,
+.nav-tabs,
+img {
+    @include border-radius(2px);
+}
+
+.jumbotron,
+.card,
+.list-group,
+.popover,
+.navbar,
+.dropdown-menu,
+.badge,
+.chip {
+    @extend .z-depth-1;
+}
+
+.popover,
+.input-group-addon,
+.dropdown-menu,
+.pagination .page-item .page-link {
+    border: 0;
+}
+
+// Circle pagination
+.pagination .active .page-link {
+    border-radius: 2px;
+    transition: all 0.2s linear;
+    @extend.z-depth-1;
+}
+
+.pagination .page-link {
+    transition: all 0.3s linear;
+    &:hover {
+        transition: all 0.3s linear;
+    }
+    &:focus {
+        background-color: transparent;
+    }
+}
+
+.pagination {
+    &.pg-blue {
+        .active .page-link {
+            background-color: $primary-color;
+        }
+    }
+    &.pg-red {
+        .active .page-link {
+            background-color: $danger-color;
+        }
+    }
+    &.pg-teal {
+        .active .page-link {
+            background-color: $default-color;
+        }
+    }
+    &.pg-darkgrey {
+        .active .page-link {
+            background-color: $special-color;
+        }
+    }
+    &.pg-dark {
+        .active .page-link {
+            background-color: $elegant-color;
+        }
+    }
+    &.pg-bluegrey {
+        .active .page-link {
+            background-color: #3F729B;
+        }
+    }
+    &.pg-amber {
+        .active .page-link {
+            background-color: #ff6f00;
+        }
+    }
+    &.pg-purple {
+        .active .page-link {
+            background-color: #5e35b1;
+        }
+    }
+}
+
+.pager {
+    a,
+    .disabled>a {
+        color: #fff;
+    }
+    &.pg-blue {
+        li a {
+            background-color: $primary-color;
+            &:focus {
+                background-color: $primary-color;
+                color: #fff;
+            }
+            &:hover {
+                background-color: $primary-color;
+                color: #fff;
+            }
+        }
+    }
+    &.pg-red {
+        li a {
+            background-color: $danger-color;
+            &:focus {
+                background-color: $danger-color;
+                color: #fff;
+            }
+            &:hover {
+                background-color: $danger-color;
+                color: #fff;
+            }
+        }
+    }
+    &.pg-teal {
+        li a {
+            background-color: $default-color;
+            &:focus {
+                background-color: $default-color;
+                color: #fff;
+            }
+            &:hover {
+                background-color: $default-color;
+                color: #fff;
+            }
+        }
+    }
+    &.pg-darkgrey {
+        li a {
+            background-color: $special-color;
+            &:focus {
+                background-color: $special-color;
+                color: #fff;
+            }
+            &:hover {
+                background-color: $special-color;
+                color: #fff;
+            }
+        }
+    }
+    &.pg-dark {
+        li a {
+            background-color: $elegant-color;
+            &:focus {
+                background-color: $elegant-color;
+                color: #fff;
+            }
+            &:hover {
+                background-color: $elegant-color;
+                color: #fff;
+            }
+        }
+    }
+    &.pg-bluegrey {
+        li a {
+            background-color: #3F729B;
+            &:focus {
+                background-color: #3F729B;
+                color: #fff;
+            }
+            &:hover {
+                background-color: #3F729B;
+                color: #fff;
+            }
+        }
+    }
+    &.pg-amber {
+        li a {
+            background-color: #ff6f00;
+            &:focus {
+                background-color: #ff6f00;
+                color: #fff;
+            }
+            &:hover {
+                background-color: #ff6f00;
+                color: #fff;
+            }
+        }
+    }
+    &.pg-purple {
+        li a {
+            background-color: #5e35b1;
+            &:focus {
+                background-color: #5e35b1;
+                color: #fff;
+            }
+            &:hover {
+                background-color: #5e35b1;
+                color: #fff;
+            }
+        }
+    }
+}
+
+.pager .disabled>a,
+.pager .disabled>a:focus,
+.pager .disabled>a:hover {
+    background-color: inerhit!important;
+}
+
+// Modal footer buttons fix
+.modal-footer .btn+ .btn {
+    margin-bottom: 6px;
+}
+
+// Shifting bacground fix
+body.modal-open {
+    overflow: inherit;
+    padding-right: 0 !important;
+}
+
+body {
+    overflow: auto !important;
+}
+
+// Card columns fix - cut edges of the cards
+.card-columns .card {
+    margin: 2px;
+}
+
+// Parallax
+.parallax {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+    position: relative;
+    padding-top: 3em;
+    padding-bottom: 3em;
+}
+
+// Scrollspy free
+.nav-pills {
+    &.horizontal-spy {
+        .nav-item {
+            .active {
+                border-bottom: 2px solid $mdb-color;
+                border-left: none;
+            }
+            &:hover {
+                background-color: transparent;
+                color: $mdb-color;
+                font-weight: 500;
+                border-left: none;
+            }
+        }
+    }
+}
+
+//Nav normalize
+.nav-pills .nav-item.open .nav-link,
+.nav-pills .nav-item.open .nav-link:focus,
+.nav-pills .nav-item.open .nav-link:hover,
+.nav-pills .nav-link.active,
+.nav-pills .nav-link.active:focus,
+.nav-pills .nav-link.active:hover {
+    background-color: transparent;
+    color: #000;
+}
+
+//Disabled cursor
+.disabled {
+    cursor: not-allowed!important;
+}
+
+//Video responsive
+.video-fluid {
+    height: auto;
+    width: 100%;
+}
+
+.video-full {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    min-width: 100%;
+    min-height: 100%;
+    width: auto;
+    height: auto;
+    z-index: -100;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -moz-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%) translateY(-50%);
+    background-size: cover;
+}
+
+//Media improvement
+.media {
+    .media-left {
+        padding:0 10px 10px 0;
+        img {
+            @extend .z-depth-1-half;
+        }
+    }
+}
+
+.card-block {
+    h5 {
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        font-weight: 400;
+    }
+    h3 {
+        margin-bottom: 1rem;
+        font-weight: 400;
+    }
+    p {
+        margin-bottom: 1rem;
+    }
+}
+
+.tooltip {
+    .tooltip-inner {
+        padding: 0.4rem 0.8rem;
+        @extend .z-depth-1-half;
+    }
+}
+
+// Make sections full width
+section {
+    flex: 0 0 100%;
+}
+
+.breadcrumb .breadcrumb-item.active {
+    color: #818a91;
+}
+
+.dropdown-menu .dropdown-item:active {
+    background:#f7f7f9;
+}
+
+.dropdown-menu {
+    transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);
+    
+}
--- a/public/vendors/MDB/sass/mdb/free/_helpers.scss
+++ b/public/vendors/MDB/sass/mdb/free/_helpers.scss
@ -0,0 +1,239 @@
+// HELPERS
+// Center text on mobile
+.center-on-small-only {
+    @media #{$medium-and-down} {
+        text-align: center;
+        .img-fluid {
+            display: inline;
+        }
+    }
+}
+
+.flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    p {
+        margin: 0;
+    }
+    ul {
+        text-align: center;
+        li {
+            margin-bottom: 1rem;
+        }
+    }
+}
+
+.vertical-center {
+    position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -o-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.img-fluid {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.inline-ul>li {
+    display: inline;
+}
+
+.list-inline-div>div {
+    display: inline-block;
+}
+
+// Dividers light and dark variations
+.hr-light {
+    background-color: #fff;
+    height: 0.5px;
+}
+
+.hr-dark {
+    background-color: #666;
+    height: 0.5px;
+}
+
+// Divider with title
+.divider-new {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-weight: 300;
+    margin-top: 45px;
+    margin-bottom: 45px;
+    h2 {
+        margin-top: 5px;
+    }
+    &:before {
+        content: '';
+        height: 1.5px;
+        background: #666;
+        flex: 1;
+        margin: 0 .45em 0 0;
+    }
+    &:after {
+        content: '';
+        height: 1.5px;
+        background: #666;
+        flex: 1;
+        margin: 0 0 0 .45em;
+    }
+}
+
+// Divider for mobile
+@media (min-width: 992px) {
+    .hr-mobile {
+        display: none !important;
+    }
+}
+
+// Section title
+.section-title {
+    text-transform: uppercase;
+    margin-top: 0;
+    margin-bottom: 3rem;
+    padding: 0.7rem;
+    small {
+        text-transform: none;
+        padding-left: 7px;
+        margin-left: 10px;
+    }
+}
+
+.st-indigo {
+    border-left: 4px solid blue;
+    small {
+        border-left: 2px solid blue;
+    }
+}
+
+.st-red {
+    border-left: 4px solid red;
+    small {
+        border-left: 2px solid red;
+    }
+}
+
+.st-teal {
+    border-left: 4px solid #009688;
+    small {
+        border-left: 2px solid #009688;
+    }
+}
+
+.st-orange {
+    border-left: 4px solid #ff6f00;
+    small {
+        border-left: 2px solid #ff6f00;
+    }
+}
+
+.st-blue {
+    border-left: 4px solid #2196f3;
+    small {
+        border-left: 2px solid #2196f3;
+    }
+}
+
+.st-mdb {
+    border-left: 4px solid $mdb-color;
+    small {
+        border-left: 2px solid $mdb-color;
+    }
+}
+
+.divider-short {
+    max-width: 50px;
+    border-color: $primary-color;
+    border-width: 3px;
+}
+
+// Blockquote contextual 
+.blockquote {
+    .bq-title {
+        font-weight: 400;
+        font-size: 1.5rem;
+        margin-bottom: 0;
+    }
+    p {
+        font-size: 1.1rem;
+    }
+}
+
+.bq-primary {
+    border-left: 3px solid $primary-color;
+    .bq-title {
+        color: $primary-color;
+    }
+}
+
+.bq-warning {
+    border-left: 3px solid $warning-color;
+    .bq-title {
+        color: $warning-color;
+    }
+}
+
+.bq-danger {
+    border-left: 3px solid $danger-color;
+    .bq-title {
+        color: $danger-color;
+    }
+}
+
+.bq-success {
+    border-left: 3px solid $success-color;
+    .bq-title {
+        color: $success-color;
+    }
+}
+
+@each $prop,
+$abbrev in (margin: m, padding: p) {
+    @each $size,
+    $lengths in $spacers {
+        $length-x: map-get($lengths, x);
+        $length-y: map-get($lengths, y);
+        .#{$abbrev}t-#{$size} {
+            #{$prop}-top: $length-y !important;
+        }
+        .#{$abbrev}b-#{$size} {
+            #{$prop}-bottom: $length-y !important;
+        }
+        .#{$abbrev}y-#{$size} {
+            #{$prop}-top: $length-y !important;
+            #{$prop}-bottom: $length-y !important;
+        }
+    }
+}
+
+
+.mb-r {
+    @media (max-width: 992px) {
+        margin-bottom: 2rem!important;
+    }
+    @media (min-width: 992px) {
+        margin-bottom: 3rem!important;
+    }
+}
+
+.mb-m {
+    margin-bottom: 1rem;
+    @media (min-width: 62em) {
+        margin-bottom: 0;
+    }
+}
+
+.no-height {
+    height: 0;
+}
+
+.sharp-corners {
+    border-radius: 0;
+}
--- a/public/vendors/MDB/sass/mdb/free/_hover-effects.scss
+++ b/public/vendors/MDB/sass/mdb/free/_hover-effects.scss
@ -0,0 +1,429 @@
+/* MDB HOVER EFFECTS */
+
+// MDB Hover effects
+.view {
+    overflow: hidden;
+    position: relative;
+    cursor: default;
+    .mask,
+    .content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        overflow: hidden;
+        top: 0;
+        left: 0
+    }
+    img, video {
+        display: block;
+        position: relative
+    }
+}
+.view .mask {
+	background-attachment: fixed;
+}
+
+.full-bg-img {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+}
+
+header {
+    .view {
+        position: relative;
+        width: 100%;
+        height: auto;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: cover;
+    }
+}
+
+// Overlays
+.overlay {
+    &:hover .mask {
+        opacity: 1; 
+    }
+    img, video {
+        transition: all 0.2s linear;
+    }
+    .mask {
+        opacity: 0;
+        transition: all 0.4s ease-in-out;
+    }
+}
+
+//Overlay patterns
+.pattern-1 {
+    background: url(../img/overlays/01.png);
+}
+
+.pattern-2 {
+    background: url(../img/overlays/02.png);
+}
+
+.pattern-3 {
+    background: url(../img/overlays/03.png);
+}
+
+.pattern-4 {
+    background: url(../img/overlays/04.png);
+}
+
+.pattern-5 {
+    background: url(../img/overlays/05.png);
+}
+
+.pattern-6 {
+    background: url(../img/overlays/06.png);
+}
+
+.pattern-7 {
+    background: url(../img/overlays/07.png);
+}
+
+.pattern-8 {
+    background: url(../img/overlays/08.png);
+}
+
+.pattern-9 {
+    background: url(../img/overlays/09.png);
+}
+
+// Overlay masks
+// Light overlays
+.hm-blue-light .mask,
+.hm-blue-light .full-bg-img {
+    background-color: rgba(3, 169, 244, 0.3);
+}
+
+.hm-red-light .mask,
+.hm-red-light .full-bg-img {
+    background-color: rgba(244, 67, 54, 0.3);
+}
+
+.hm-pink-light .mask,
+.hm-pink-light .full-bg-img {
+    background-color: rgba(233, 30, 99, 0.3);
+}
+
+.hm-purple-light .mask,
+.hm-purple-light .full-bg-img {
+    background-color: rgba(156, 39, 176, 0.3);
+}
+
+.hm-indigo-light .mask,
+.hm-indigo-light .full-bg-img {
+    background-color: rgba(63, 81, 181, 0.3);
+}
+
+.hm-cyan-light .mask,
+.hm-cyan-light .full-bg-img {
+    background-color: rgba(0, 188, 212, 0.3);
+}
+
+.hm-teal-light .mask,
+.hm-teal-light .full-bg-img {
+    background-color: rgba(0, 150, 136, 0.3);
+}
+
+.hm-green-light .mask,
+.hm-green-light .full-bg-img {
+    background-color: rgba(76, 175, 80, 0.3);
+}
+
+.hm-lime-light .mask,
+.hm-lime-light .full-bg-img {
+    background-color: rgba(205, 220, 57, 0.3);
+}
+
+.hm-yellow-light .mask,
+.hm-yellow-light .full-bg-img {
+    background-color: rgba(255, 235, 59, 0.3);
+}
+
+.hm-orange-light .mask,
+.hm-orange-light .full-bg-img {
+    background-color: rgba(255, 152, 0, 0.3);
+}
+
+.hm-brown-light .mask,
+.hm-brown-light .full-bg-img {
+    background-color: rgba(121, 85, 72, 0.3);
+}
+
+.hm-grey-light .mask,
+.hm-grey-light .full-bg-img {
+    background-color: rgba(158, 158, 158, 0.3);
+}
+
+.hm-bluegrey-light .mask,
+.hm-bluegrey-light .full-bg-img {
+    background-color: rgba(96, 125, 139, 0.3);
+}
+
+.hm-black-light .mask,
+.hm-black-light .full-bg-img {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.hm-stylish-light .mask,
+.hm-stylish-light .full-bg-img {
+    background-color: rgba(62, 69, 81, 0.3);
+}
+
+.hm-white-light .mask,
+.hm-white-light .full-bg-img {
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+// Strong overlays
+.hm-blue-strong .mask,
+.hm-blue-strong .full-bg-img {
+    background-color: rgba(3, 169, 244, 0.7);
+}
+
+.hm-red-strong .mask,
+.hm-red-strong .full-bg-img {
+    background-color: rgba(244, 67, 54, 0.7);
+}
+
+.hm-pink-strong .mask,
+.hm-pink-strong .full-bg-img {
+    background-color: rgba(233, 30, 99, 0.7);
+}
+
+.hm-purple-strong .mask,
+.hm-purple-strong .full-bg-img {
+    background-color: rgba(156, 39, 176, 0.7);
+}
+
+.hm-indigo-strong .mask,
+.hm-indigo-strong .full-bg-img {
+    background-color: rgba(63, 81, 181, 0.7);
+}
+
+.hm-cyan-strong .mask,
+.hm-cyan-strong .full-bg-img {
+    background-color: rgba(0, 188, 212, 0.7);
+}
+
+.hm-teal-strong .mask,
+.hm-teal-strong .full-bg-img {
+    background-color: rgba(0, 150, 136, 0.7);
+}
+
+.hm-green-strong .mask,
+.hm-green-strong .full-bg-img {
+    background-color: rgba(76, 175, 80, 0.7);
+}
+
+.hm-lime-strong .mask,
+.hm-lime-strong .full-bg-img {
+    background-color: rgba(205, 220, 57, 0.7);
+}
+
+.hm-yellow-strong .mask,
+.hm-yellow-strong .full-bg-img {
+    background-color: rgba(255, 235, 59, 0.7);
+}
+
+.hm-orange-strong .mask,
+.hm-orange-strong .full-bg-img {
+    background-color: rgba(255, 152, 0, 0.7);
+}
+
+.hm-brown-strong .mask,
+.hm-brown-strong .full-bg-img {
+    background-color: rgba(121, 85, 72, 0.7);
+}
+
+.hm-grey-strong .mask,
+.hm-grey-strong .full-bg-img {
+    background-color: rgba(158, 158, 158, 0.7);
+}
+
+.hm-bluegrey-strong .mask,
+.hm-bluegrey-strong .full-bg-img {
+    background-color: rgba(96, 125, 139, 0.7);
+}
+
+.hm-black-strong .mask,
+.hm-black-strong .full-bg-img {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.hm-stylish-strong .mask,
+.hm-stylish-strong .full-bg-img {
+    background-color: rgba(62, 69, 81, 0.7);
+}
+
+.hm-white-strong .mask,
+.hm-white-strong .full-bg-img {
+    background-color: rgba(255, 255, 255, 0.7);
+}
+
+// Light overlays
+.hm-blue-slight .mask,
+.hm-blue-slight .full-bg-img {
+    background-color: rgba(3, 169, 244, 0.1);
+}
+
+.hm-red-slight .mask,
+.hm-red-slight .full-bg-img {
+    background-color: rgba(244, 67, 54, 0.1);
+}
+
+.hm-pink-slight .mask,
+.hm-pink-slight .full-bg-img {
+    background-color: rgba(233, 30, 99, 0.1);
+}
+
+.hm-purple-slight .mask,
+.hm-purple-slight .full-bg-img {
+    background-color: rgba(156, 39, 176, 0.1);
+}
+
+.hm-indigo-slight .mask,
+.hm-indigo-slight .full-bg-img {
+    background-color: rgba(63, 81, 181, 0.1);
+}
+
+.hm-cyan-slight .mask,
+.hm-cyan-slight .full-bg-img {
+    background-color: rgba(0, 188, 212, 0.1);
+}
+
+.hm-teal-slight .mask,
+.hm-teal-slight .full-bg-img {
+    background-color: rgba(0, 150, 136, 0.1);
+}
+
+.hm-green-slight .mask,
+.hm-green-slight .full-bg-img {
+    background-color: rgba(76, 175, 80, 0.1);
+}
+
+.hm-lime-slight .mask,
+.hm-lime-slight .full-bg-img {
+    background-color: rgba(205, 220, 57, 0.1);
+}
+
+.hm-yellow-slight .mask,
+.hm-yellow-slight .full-bg-img {
+    background-color: rgba(255, 235, 59, 0.1);
+}
+
+.hm-orange-slight .mask,
+.hm-orange-slight .full-bg-img {
+    background-color: rgba(255, 152, 0, 0.1);
+}
+
+.hm-brown-slight .mask,
+.hm-brown-slight .full-bg-img {
+    background-color: rgba(121, 85, 72, 0.1);
+}
+
+.hm-grey-slight .mask,
+.hm-grey-slight .full-bg-img {
+    background-color: rgba(158, 158, 158, 0.1);
+}
+
+.hm-bluegrey-slight .mask,
+.hm-bluegrey-slight .full-bg-img {
+    background-color: rgba(96, 125, 139, 0.1);
+}
+
+.hm-black-slight .mask,
+.hm-black-slight .full-bg-img {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.hm-stylish-slight .mask,
+.hm-stylish-slight .full-bg-img {
+    background-color: rgba(62, 69, 81, 0.1);
+}
+
+.hm-white-slight .mask,
+.hm-white-slight .full-bg-img {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+// Zoom
+.hm-zoom img {
+    transition: all 0.2s linear;
+}
+
+.hm-zoom:hover img {
+    transform: scale(1.1);
+}
+
+.hm-zoom:hover .mask {
+    opacity: 1;
+}
+
+.img-overlay {
+    position:relative;
+    &:after {
+        content: '';
+        display:block;
+        position:absolute;
+        height:100%;
+        width:100%;
+        top:0;
+        left:0;
+        bottom:0;
+        right:0;
+        background:rgba(0,0,0,.17);
+        transition: background 0.4s;
+    }
+    &:hover {
+        &:after {
+            background:rgba(0,0,0,.35);
+        }
+    }
+    &.light {
+        &:after {
+            background:rgba(255,255,255,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(255,255,255,.35);
+            }
+        }
+    }
+    &.blue {
+        &:after {
+            background:rgba(0,145,234,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(0,145,234,.35);
+            }
+        }
+    }
+    &.green {
+        &:after {
+            background:rgba(76,175,80,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(76,175,80,.35);
+            }
+        }
+    }
+    &.red {
+        &:after {
+            background:rgba(213,0,0,.17);
+        }
+        &:hover {
+            &:after {
+                background:rgba(213,0,0,.35);
+            }
+        }
+    }
+}
--- a/public/vendors/MDB/sass/mdb/free/_modals.scss
+++ b/public/vendors/MDB/sass/mdb/free/_modals.scss
@ -0,0 +1,364 @@
+// Distance
+$modal-distance:10px;
+$modal-info-color: #5394ff;
+$modal-success-color: #01d36b;
+$modal-warning-color: #ff8e38;
+$modal-danger-color: #ff4b4b;
+
+// Styles for body
+body {
+    &.modal-open {
+        padding-right: 0 !important;
+    }
+    &.scrollable {
+        overflow-y: auto;
+    }
+}
+
+// *** ENHANCED BOOTSTRAP MODALS ***///
+// General styles
+.modal-dialog {
+    .modal-content {
+        @include border-radius(2px);
+        @extend .z-depth-1-half;
+        border: 0;
+    }
+}
+
+// Position & Size
+.modal {
+    .modal-dialog {
+        &.modal-top {
+            top: 0;
+        }
+        &.modal-left {
+            left: 0;
+        }
+        &.modal-right {
+            right: 0;
+        }
+        &.modal-bottom {
+            bottom: 0;
+        }
+        &.modal-top-left {
+            top: $modal-distance;
+            left: $modal-distance;
+        }
+        &.modal-top-right {
+            top: $modal-distance;
+            right: $modal-distance;
+        }
+        &.modal-bottom-left {
+            left: $modal-distance;
+            bottom: $modal-distance;
+        }
+        &.modal-bottom-right {
+            right: $modal-distance;
+            bottom: $modal-distance;
+        }
+    }
+    &.fade {
+        &.top:not(.show) .modal-dialog {
+            transform: translate3d(0, -25%, 0);
+        }
+        &.left:not(.show) .modal-dialog {
+            transform: translate3d(-25%, 0, 0);
+        }
+        &.right:not(.show) .modal-dialog {
+            transform: translate3d(25%, 0, 0);
+        }
+        &.bottom:not(.show) .modal-dialog {
+            transform: translate3d(0, 25%, 0);
+        }
+    }
+    &.modal-scrolling {
+        position: relative;
+        .modal-dialog {
+            position: fixed;
+            z-index: 1050;
+        }
+    }
+    &.modal-content-clickable {
+        top:auto;
+        bottom:auto;
+        .modal-dialog {
+            position:fixed;
+        }
+    }
+    .modal-fluid {
+        width: 100%;
+        max-width: 100%;
+        .modal-content {
+            width: 100%;
+        }
+    }
+    .modal-frame {
+        position: absolute;
+        width: 100%;
+        max-width: 100%;
+        margin: 0;
+        &.modal-bottom {
+            bottom: 0;
+        }
+    }
+    .modal-full-height {
+        display: flex;
+        position: absolute;
+        width: 400px;
+        height: 100%;
+        margin: 0;
+        top: 0;
+        // bottom: 0;
+        right: 0;
+        &.modal-top, &.modal-bottom {
+            display:block;
+            width:100%;
+            max-width:100%;
+            height:auto;
+        }
+        &.modal-top {
+            bottom:auto;
+        }
+        &.modal-bottom {
+            top:auto;
+        }
+        .modal-content {
+            width:100%;
+        }
+        &.modal-lg {
+            max-width:90%;
+            width:90%;
+            @media (min-width:992px) {
+                max-width:800px;
+                width:800px;  
+            }
+            @media (min-width:1200px) {
+                max-width:1000px;
+                width:1000px;  
+            }
+        }
+    }
+    .modal-side {
+        position: absolute;
+        right: $modal-distance;
+        bottom: $modal-distance;
+        margin: 0;
+        width: 400px;
+    }
+}
+
+// Styles
+.modal-dialog {
+    .btn .fa {
+        color:#fff !important;
+    }
+    [class*="btn-outline-"] .fa {
+        color: inherit !important;
+    }
+    // Cascading modals
+    &.cascading-modal {
+        margin-top: 10%;
+        // Cascading header
+        .modal-header {
+            text-align: center;
+            margin: -2rem 1rem 1rem 1rem;
+            padding: 1.5rem;
+            border: none;
+            flex-direction: column;
+            @extend .z-depth-1-half;
+            @include border-radius(3px);
+            .close {
+                margin-right: 2.5rem;
+            }
+            &.white-text {
+                .close {
+                    color: #fff;
+                    opacity: 1;
+                }
+            }
+            .title {
+                width: 100%;
+                margin-bottom: 0;
+                font-size: 1.25rem;
+                .fa {
+                    margin-right: 9px;
+                }
+            }
+            .social-buttons {
+                margin-top: 1.5rem;
+                a {
+                    font-size: 1rem;
+                }
+            }
+        }
+        // Cascading tabs nav
+        .modal-c-tabs {
+            .nav-tabs {
+                margin: -1.5rem 1rem 0 1rem;
+                @extend .z-depth-1;
+            }
+            .tab-content {
+                padding: 1.7rem 0 0 0;
+            }
+        }
+        // Footer customization
+        .modal-body,
+        .modal-footer {
+            color: #616161;
+            padding-right: 2rem;
+            padding-left: 2rem;
+            .additional-option {
+                text-align: center;
+                margin-top: 1rem;
+            }
+        }
+        // Cascading avatar
+        &.modal-avatar {
+            margin-top: 6rem;
+            .modal-header {
+                @extend .z-depth-0;
+                @extend .img-fluid;
+                margin: -6rem 2rem -1rem 2rem;
+                img {
+                    width: 130px;
+                    @extend .z-depth-2;
+                }
+            }
+        }
+    }
+    // Modal notify
+    &.modal-notify {
+        .heading {
+            margin: 0;
+            padding: 0.3rem;
+            color: #fff;
+            font-size: 1.15rem;
+        }
+        .modal-header {
+            @extend .z-depth-1;
+            border: 0;
+        }
+        .close {
+            opacity: 1;
+        }
+        .modal-body {
+            padding: 1.5rem;
+            color: #616161;
+        }
+        .btn-outline-secondary-modal {
+            background-color: transparent;
+        }
+        // Modal info
+        &.modal-info {
+            .modal-header {
+                background-color: $modal-info-color;
+            }
+            .fa {
+                color: $modal-info-color;
+            }
+            .badge {
+                background-color: $modal-info-color;
+            }
+            .btn-primary-modal {
+                background: $modal-info-color;
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: lighten( $modal-info-color, 5%)!important;
+                }
+                &.active {
+                    background-color: darken( $modal-info-color, 20%)!important;
+                    @extend .z-depth-1-half;
+                }
+            }
+            .btn-outline-secondary-modal {
+                border: 2px solid $modal-info-color;
+                color: $modal-info-color!important;
+            }
+        }
+        // Modal warning
+        &.modal-warning {
+            .modal-header {
+                background-color: $modal-warning-color;
+            }
+            .fa {
+                color: $modal-warning-color;
+            }
+            .badge {
+                background-color: $modal-warning-color;
+            }
+            .btn-primary-modal {
+                background: $modal-warning-color;
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: lighten( $modal-warning-color, 5%)!important;
+                }
+                &.active {
+                    background-color: darken( $modal-warning-color, 20%)!important;
+                    @extend .z-depth-1-half;
+                }
+            }
+            .btn-outline-secondary-modal {
+                border: 2px solid $modal-warning-color;
+                color: $modal-warning-color!important;
+            }
+        }
+        // Modal success
+        &.modal-success {
+            .modal-header {
+                background-color: $modal-success-color;
+            }
+            .fa {
+                color: $modal-success-color;
+            }
+            .badge {
+                background-color: $modal-success-color;
+            }
+            .btn-primary-modal {
+                background: $modal-success-color;
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: lighten( $modal-success-color, 5%)!important;
+                }
+                &.active {
+                    background-color: darken( $modal-success-color, 20%)!important;
+                    @extend .z-depth-1-half;
+                }
+            }
+            .btn-outline-secondary-modal {
+                border: 2px solid $modal-success-color;
+                color: $modal-success-color!important;
+            }
+        }
+        // Modal danger
+        &.modal-danger {
+            .modal-header {
+                background-color: $modal-danger-color;
+            }
+            .fa {
+                color: $modal-danger-color;
+            }
+            .badge {
+                background-color: $modal-danger-color;
+            }
+            .btn-primary-modal {
+                background: $modal-danger-color;
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: lighten( $modal-danger-color, 5%)!important;
+                }
+                &.active {
+                    background-color: darken( $modal-danger-color, 20%)!important;
+                    @extend .z-depth-1-half;
+                }
+            }
+            .btn-outline-secondary-modal {
+                border: 2px solid $modal-danger-color;
+                color: $modal-danger-color!important;
+            }
+        }
+    }
+}
--- a/public/vendors/MDB/sass/mdb/free/_navbars.scss
+++ b/public/vendors/MDB/sass/mdb/free/_navbars.scss
@ -0,0 +1,141 @@
+.navbar {
+    font-weight: 300;
+    form {
+        input {
+            margin: 0;
+            height: 1rem;
+            margin-right: 5px;
+            margin-left: 8px;
+            margin-bottom: 1px;
+        }
+    }
+    .navbar-brand {
+        align-self: flex-start;
+        overflow: visible;
+    }
+    .breadcrumb {
+        margin: 0;
+        background-color: inherit;
+        font-weight: 300;
+    }
+    &.navbar-dark {
+        .navbar-brand {
+            color: #fff;
+            &:hover {
+                color: #fff;
+            }
+        }
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+            cursor: pointer; 
+        } 
+        .breadcrumb, 
+        .navbar-nav .nav-item {
+            a {
+                color: #fff;
+                transition: .35s;
+                &:hover {
+                    color: rgba(255, 255, 255, .75);
+                }
+            }
+            &.active {
+                background-color: rgba(255, 255, 255, 0.1);
+            }
+            .dropdown-menu a {
+                color: #212121;
+                &:hover,
+                &:focus,
+                &:active {
+                    color: #212121;
+                }
+            }
+        }
+        .nav-link {
+            color: #fff;
+        }
+        .navbar-toggler {
+            color: #fff;
+        }
+    }
+    &.navbar-light {
+        .navbar-toggler-icon {
+            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
+        }
+        .breadcrumb,
+        .nav-item {
+            a {
+                color: #212121;
+                transition: .35s;
+                &:hover {
+                    transition: .35s;
+                    color: #212121;
+                }
+            }
+            &.active {
+                background-color: rgba(158, 158, 158, 0.2);
+            }
+            .dropdown-menu a {
+                color: #000;
+                padding: 1rem;
+            }
+        }
+        .navbar-toggler {
+            color: #000;
+        }
+    }
+    .dropdown-menu {
+        a {
+            font-size: 0.9375rem;
+            font-weight: 300;
+            padding: 10px;
+        }
+    }
+    .navbar-toggler {
+        border-width: 0;
+    }
+    .nav-flex-icons {
+        flex-direction: row;
+    }
+    .container {
+        @media (max-width: 991px) {
+            width: 100%;
+            .navbar-toggler-right {
+                right: 0;
+            }
+        }
+    }
+    .dropdown-menu {
+        position: absolute !important;
+    }
+    &.double-nav {
+        flex-direction: row;
+    }
+}
+
+// Input line color
+.navbar-dark form {
+    input[type=text] {
+        border-bottom: 1px solid #fff;
+    }
+    .form-control {
+        color: #fff;
+        @include placeholder {
+            color: rgba(255, 255, 255, .65) !important;
+            font-weight: 300;
+        }
+    }
+}
+
+.navbar-light form {
+    // Style Placeholders
+    input[type=text] {
+        border-bottom: 1px solid #1C2331;
+    }
+    .form-control {
+        color: #1C2331;
+        @include placeholder {
+            color: #1C2331!important;
+            font-weight: 300;
+        }
+    }
+}
--- a/public/vendors/MDB/sass/mdb/free/_roboto.scss
+++ b/public/vendors/MDB/sass/mdb/free/_roboto.scss
@ -0,0 +1,51 @@
+// ROBOTO FONT
+
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');
+    src: url("#{$roboto-font-path}Roboto-Thin.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Thin.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Thin.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Thin.ttf") format("truetype");
+
+    font-weight: 200;
+} 
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Light), url('#{$roboto-font-path}Roboto-Light.eot');
+    src: url("#{$roboto-font-path}Roboto-Light.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Light.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Light.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Light.ttf") format("truetype");
+    font-weight: 300;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: local(Roboto Regular), url('#{$roboto-font-path}Roboto-Regular.eot');
+    src: url("#{$roboto-font-path}Roboto-Regular.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Regular.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Regular.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Regular.ttf") format("truetype");
+    font-weight: 400;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('#{$roboto-font-path}Roboto-Medium.eot');
+    src: url("#{$roboto-font-path}Roboto-Medium.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Medium.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Medium.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Medium.ttf") format("truetype");
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Roboto";
+    src: url('#{$roboto-font-path}Roboto-Bold.eot');
+    src: url("#{$roboto-font-path}Roboto-Bold.eot?#iefix") format('embedded-opentype'),
+        url("#{$roboto-font-path}Roboto-Bold.woff2") format("woff2"),
+        url("#{$roboto-font-path}Roboto-Bold.woff") format("woff"),
+        url("#{$roboto-font-path}Roboto-Bold.ttf") format("truetype");
+    font-weight: 700;
+}
--- a/public/vendors/MDB/sass/mdb/free/_typography.scss
+++ b/public/vendors/MDB/sass/mdb/free/_typography.scss
@ -0,0 +1,228 @@
+    // TYPOGRAPHY
+    body {
+        font-family: "Roboto", sans-serif;
+    }
+    
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-weight: 300;
+    }
+    
+    html {
+        @media only screen and (min-width: 0) {
+            font-size: 15px;
+        }
+        @media only screen and (min-width: $medium-screen) {
+            font-size: 15.5px;
+        }
+        @media only screen and (min-width: $large-screen) {
+            font-size: 16px;
+        }
+    }
+    
+    .text-fluid {
+        font-weight: 300;
+        $i: 0;
+        @while $i <=$intervals {
+            @media only screen and (min-width: 360+ ($i * $interval-size)) {
+                font-size: 1.2rem * (1+ (.02 * $i));
+            }
+            $i: $i+1;
+        }
+        // Handle below 360px screen
+        @media only screen and (max-width: 360px) {
+            font-size: 1.2rem;
+        }
+    }
+    
+    p {
+        &.lead {
+            font-weight: 400;
+        }
+    }
+    
+    blockquote p {
+        font-size: 0.9rem;
+        padding-left: 2rem;
+        padding-top: 1rem;
+        padding-bottom: 1rem;
+    }
+    /* Responsive Headings */
+    /* Extra Small Devices, Phones */
+    
+    @media only screen and (max-width: 768px) {
+        .h1-responsive {
+            font-size: 150%;
+            font-weight: 500;
+        }
+        .h2-responsive {
+            font-size: 145%;
+        }
+        .h3-responsive {
+            font-size: 135%;
+        }
+        .h4-responsive {
+            font-size: 135%;
+        }
+        .h5-responsive {
+            font-size: 135%;
+        }
+    }
+    /* Small Devices, Tablets */
+    
+    @media only screen and (min-width: 768px) {
+        .h1-responsive {
+            font-size: 170%;
+        }
+        .h2-responsive {
+            font-size: 140%;
+        }
+        .h3-responsive {
+            font-size: 125%;
+        }
+        .h4-responsive {
+            font-size: 125%;
+        }
+        .h5-responsive {
+            font-size: 125%;
+        }
+    }
+    /* Medium Devices, Desktops */
+    
+    @media only screen and (min-width: 992px) {
+        .h1-responsive {
+            font-size: 200%;
+        }
+        .h2-responsive {
+            font-size: 170%;
+        }
+        .h3-responsive {
+            font-size: 140%;
+        }
+        .h4-responsive {
+            font-size: 125%;
+        }
+        .h5-responsive {
+            font-size: 125%;
+        }
+    }
+    /* Large Devices, Wide Screens */
+    
+    @media only screen and (min-width: 1200px) {
+        .h1-responsive {
+            font-size: 250%;
+        }
+        .h2-responsive {
+            font-size: 200%;
+        }
+        .h3-responsive {
+            font-size: 170%;
+        }
+        .h4-responsive {
+            font-size: 140%;
+        }
+        .h5-responsive {
+            font-size: 125%;
+        }
+    }
+    
+    .section {
+        margin-bottom: 2rem;
+        .section-heading {
+            @extend .h1-responsive;
+            margin-top: 2rem;
+            margin-bottom: 4rem;
+        }
+        .section-description {
+            color: #757575;
+            margin-bottom: 4rem;
+            margin-left: 15%;
+            margin-right: 15%;
+            text-align: center;
+            @media (max-width: 992px) {
+                margin-left: 5%;
+                margin-right: 5%;
+            }
+        }
+        img,
+        .view {
+            @extend .img-fluid;
+            @extend .z-depth-1-half;
+        }
+        .jumbotron {
+            @extend .z-depth-2;
+        }
+        h4 {
+            font-weight: 400;
+        }
+        h5 .fa {
+            margin-right: 8px;
+        } 
+        hr { 
+            margin-top: 1rem;
+            margin-bottom: 3rem;
+        }
+        .map-container {
+            img {
+                @extend .z-depth-0;
+            }
+        }
+        .contact-icons {
+            text-align: center;
+            li {
+                margin-bottom: 2.2rem;
+            }
+            .fa {
+                font-size: 2.2rem;
+                margin-bottom: 0.6rem;
+                color: #424242;
+            }
+        }
+    }
+    
+    .between-sections {
+        margin-bottom: 4rem;
+    }
+    
+    // Lists default style
+    ul {
+        padding: 0;
+        list-style-type: none;
+        li {
+            list-style-type: none;
+        }
+    }
+    
+    // List style types
+    .list-disc {
+        li {
+            list-style-type: disc;
+        }
+    }
+    
+    .list-circle {
+        li {
+            list-style-type: circle;
+        }
+    }
+    
+    .list-square {
+        li {
+            list-style-type: square;
+        }
+    }
+    
+    .list-roman {
+        li {
+            list-style-type: upper-roman;
+        }
+    }
+    .list-alpha {
+        li {
+            list-style-type: upper-alpha;
+        }
+    }
--- a/public/vendors/MDB/sass/mdb/free/_waves.scss
+++ b/public/vendors/MDB/sass/mdb/free/_waves.scss
@ -0,0 +1,157 @@
+
+/*!
+ * Waves v0.7.5
+ * http://fian.my.id/Waves 
+ * 
+ * Copyright 2014-2016 Alfiana E. Sibuea and other contributors 
+ * Released under the MIT license 
+ * https://github.com/fians/Waves/blob/master/LICENSE 
+ */
+
+@mixin waves-transition($transition){
+    -webkit-transition: $transition;
+    -moz-transition: $transition; 
+    -o-transition: $transition;
+    transition: $transition;  
+}
+
+@mixin waves-transform($string){
+    -webkit-transform: $string;
+    -moz-transform: $string;
+    -ms-transform: $string;
+    -o-transform: $string;
+    transform: $string;
+}
+
+@mixin waves-box-shadow($shadow){
+    -webkit-box-shadow: $shadow;
+    box-shadow: $shadow;
+}
+
+.waves-effect {
+    position: relative; 
+    cursor: pointer;
+    overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    z-index: 1;
+    
+    .waves-ripple {
+        position: absolute;
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        margin-top:-50px;
+        margin-left:-50px;
+        opacity: 0;
+        background: rgba(0,0,0,0.2);
+        $gradient: rgba(0,0,0,0.2) 0,rgba(0,0,0,.3) 40%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.5) 60%,rgba(255,255,255,0) 70%;
+        background: -webkit-radial-gradient($gradient);
+        background: -o-radial-gradient($gradient);
+        background: -moz-radial-gradient($gradient); 
+        background: radial-gradient($gradient);
+        @include waves-transition(all 0.5s ease-out);
+        -webkit-transition-property: -webkit-transform, opacity;
+        -moz-transition-property: -moz-transform, opacity;
+        -o-transition-property: -o-transform, opacity;
+        transition-property: transform, opacity;
+        @include waves-transform(scale(0) translate(0,0));
+        pointer-events: none;
+    }
+
+    &.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+        $gradient: rgba(255,255,255,0.2) 0,rgba(255,255,255,.3) 40%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 70%;
+        background: -webkit-radial-gradient($gradient);
+        background: -o-radial-gradient($gradient);
+        background: -moz-radial-gradient($gradient);
+        background: radial-gradient($gradient);
+    }
+    
+    &.waves-classic .waves-ripple {
+        background: rgba(0,0,0,0.2);
+    }
+    
+    &.waves-classic.waves-light .waves-ripple {
+        background: rgba(255,255,255,0.4);
+    }
+}
+
+.waves-notransition {
+    @include waves-transition(none #{"!important"});
+}
+
+.waves-button, 
+.waves-circle {
+    @include waves-transform(translateZ(0));
+    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
+}
+
+.waves-button,
+.waves-button:hover,
+.waves-button:visited,
+.waves-button-input {
+    white-space: nowrap;
+    vertical-align: middle;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    color: inherit;
+    background-color: rgba(0, 0, 0, 0);
+    font-size: 1em;
+    line-height:1em;
+    text-align: center;
+    text-decoration: none;
+    z-index: 1;
+}
+
+.waves-button {
+    padding: 0.85em 1.1em;
+    border-radius: 0.2em;
+}
+
+.waves-button-input {
+    margin: 0;
+    padding: 0.85em 1.1em;
+}
+
+.waves-input-wrapper {
+    border-radius: 0.2em;
+    vertical-align: bottom;
+
+    &.waves-button {
+        padding: 0;
+    }
+
+    .waves-button-input {
+        position: relative;
+        top: 0;
+        left: 0;
+        z-index: 1;
+    }
+}
+
+.waves-circle {
+    text-align: center;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    border-radius: 50%;
+}
+
+.waves-float {
+    -webkit-mask-image: none;
+    @include waves-box-shadow(0px 1px 1.5px 1px rgba(0, 0, 0, 0.12));
+    @include waves-transition(all 300ms);
+
+    &:active {
+        @include waves-box-shadow(0px 8px 20px 1px rgba(0, 0, 0, 0.30));
+    }
+}
+
+.waves-block {
+    display: block;
+}
--- a/public/vendors/MDB/sass/mdb/free/data/_colors.scss
+++ b/public/vendors/MDB/sass/mdb/free/data/_colors.scss
@ -0,0 +1,875 @@
+// COLORS
+
+$mdb-color: (
+  "lighten-5":  #D0D6E2,
+  "lighten-4":  #B1BACE,
+  "lighten-3":  #929FBA,
+  "lighten-2":  #7283A7,
+  "lighten-1":  #59698D,
+  "base":       #45526E,
+  "darken-1":   #3B465E, 
+  "darken-2":   #2E3951,
+  "darken-3":   #1C2A48,
+  "darken-4":   #1C2331,
+);
+
+$red: (
+  "lighten-5":  #FFEBEE,
+  "lighten-4":  #FFCDD2,
+  "lighten-3":  #EF9A9A,
+  "lighten-2":  #E57373,
+  "lighten-1":  #EF5350,
+  "base":       #F44336,
+  "darken-1":   #E53935,
+  "darken-2":   #D32F2F,
+  "darken-3":   #C62828,
+  "darken-4":   #B71C1C,
+  "accent-1":    #FF8A80,
+  "accent-2":    #FF5252,
+  "accent-3":    #FF1744,
+  "accent-4":    #D50000
+);
+
+$pink: (
+  "lighten-5":  #fce4ec,
+  "lighten-4":  #f8bbd0,
+  "lighten-3":  #f48fb1,
+  "lighten-2":  #f06292,
+  "lighten-1":  #ec407a,
+  "base":       #e91e63,
+  "darken-1":   #d81b60,
+  "darken-2":   #c2185b,
+  "darken-3":   #ad1457,
+  "darken-4":   #880e4f,
+  "accent-1":    #ff80ab,
+  "accent-2":    #ff4081,
+  "accent-3":    #f50057,
+  "accent-4":    #c51162
+);
+
+$purple: (
+  "lighten-5":  #f3e5f5,
+  "lighten-4":  #e1bee7,
+  "lighten-3":  #ce93d8,
+  "lighten-2":  #ba68c8,
+  "lighten-1":  #ab47bc,
+  "base":       #9c27b0,
+  "darken-1":   #8e24aa,
+  "darken-2":   #7b1fa2,
+  "darken-3":   #6a1b9a,
+  "darken-4":   #4a148c,
+  "accent-1":    #ea80fc,
+  "accent-2":    #e040fb,
+  "accent-3":    #d500f9,
+  "accent-4":    #aa00ff
+);
+
+$deep-purple: (
+  "lighten-5":  #ede7f6,
+  "lighten-4":  #d1c4e9,
+  "lighten-3":  #b39ddb,
+  "lighten-2":  #9575cd,
+  "lighten-1":  #7e57c2,
+  "base":       #673ab7,
+  "darken-1":   #5e35b1,
+  "darken-2":   #512da8,
+  "darken-3":   #4527a0,
+  "darken-4":   #311b92,
+  "accent-1":    #b388ff,
+  "accent-2":    #7c4dff,
+  "accent-3":    #651fff,
+  "accent-4":    #6200ea
+);
+
+$indigo: (
+  "lighten-5":  #e8eaf6,
+  "lighten-4":  #c5cae9,
+  "lighten-3":  #9fa8da,
+  "lighten-2":  #7986cb,
+  "lighten-1":  #5c6bc0,
+  "base":       #3f51b5,
+  "darken-1":   #3949ab,
+  "darken-2":   #303f9f,
+  "darken-3":   #283593,
+  "darken-4":   #1a237e,
+  "accent-1":    #8c9eff,
+  "accent-2":    #536dfe,
+  "accent-3":    #3d5afe,
+  "accent-4":    #304ffe
+);
+
+$blue: (
+  "lighten-5":  #E3F2FD,
+  "lighten-4":  #BBDEFB,
+  "lighten-3":  #90CAF9,
+  "lighten-2":  #64B5F6,
+  "lighten-1":  #42A5F5,
+  "base":       #2196F3,
+  "darken-1":   #1E88E5,
+  "darken-2":   #1976D2,
+  "darken-3":   #1565C0,
+  "darken-4":   #0D47A1,
+  "accent-1":    #82B1FF,
+  "accent-2":    #448AFF,
+  "accent-3":    #2979FF,
+  "accent-4":    #2962FF
+);
+
+$light-blue: (
+  "lighten-5":  #e1f5fe,
+  "lighten-4":  #b3e5fc,
+  "lighten-3":  #81d4fa,
+  "lighten-2":  #4fc3f7,
+  "lighten-1":  #29b6f6,
+  "base":       #03a9f4,
+  "darken-1":   #039be5,
+  "darken-2":   #0288d1,
+  "darken-3":   #0277bd,
+  "darken-4":   #01579b,
+  "accent-1":    #80d8ff,
+  "accent-2":    #40c4ff,
+  "accent-3":    #00b0ff,
+  "accent-4":    #0091ea
+);
+
+$cyan: (
+  "lighten-5":  #e0f7fa,
+  "lighten-4":  #b2ebf2,
+  "lighten-3":  #80deea,
+  "lighten-2":  #4dd0e1,
+  "lighten-1":  #26c6da,
+  "base":       #00bcd4,
+  "darken-1":   #00acc1,
+  "darken-2":   #0097a7,
+  "darken-3":   #00838f,
+  "darken-4":   #006064,
+  "accent-1":    #84ffff,
+  "accent-2":    #18ffff,
+  "accent-3":    #00e5ff,
+  "accent-4":    #00b8d4
+);
+
+$teal: (
+  "lighten-5":  #e0f2f1,
+  "lighten-4":  #b2dfdb,
+  "lighten-3":  #80cbc4,
+  "lighten-2":  #4db6ac,
+  "lighten-1":  #26a69a,
+  "base":       #009688,
+  "darken-1":   #00897b,
+  "darken-2":   #00796b,
+  "darken-3":   #00695c,
+  "darken-4":   #004d40,
+  "accent-1":    #a7ffeb,
+  "accent-2":    #64ffda,
+  "accent-3":    #1de9b6,
+  "accent-4":    #00bfa5
+);
+
+$green: (
+  "lighten-5":  #E8F5E9,
+  "lighten-4":  #C8E6C9,
+  "lighten-3":  #A5D6A7,
+  "lighten-2":  #81C784,
+  "lighten-1":  #66BB6A,
+  "base":       #4CAF50,
+  "darken-1":   #43A047,
+  "darken-2":   #388E3C,
+  "darken-3":   #2E7D32,
+  "darken-4":   #1B5E20,
+  "accent-1":    #B9F6CA,
+  "accent-2":    #69F0AE,
+  "accent-3":    #00E676,
+  "accent-4":    #00C853
+);
+
+$light-green: (
+  "lighten-5":  #f1f8e9,
+  "lighten-4":  #dcedc8,
+  "lighten-3":  #c5e1a5,
+  "lighten-2":  #aed581,
+  "lighten-1":  #9ccc65,
+  "base":       #8bc34a,
+  "darken-1":   #7cb342,
+  "darken-2":   #689f38,
+  "darken-3":   #558b2f,
+  "darken-4":   #33691e,
+  "accent-1":    #ccff90,
+  "accent-2":    #b2ff59,
+  "accent-3":    #76ff03,
+  "accent-4":    #64dd17
+);
+
+$lime: (
+  "lighten-5":  #f9fbe7,
+  "lighten-4":  #f0f4c3,
+  "lighten-3":  #e6ee9c,
+  "lighten-2":  #dce775,
+  "lighten-1":  #d4e157,
+  "base":       #cddc39,
+  "darken-1":   #c0ca33,
+  "darken-2":   #afb42b,
+  "darken-3":   #9e9d24,
+  "darken-4":   #827717,
+  "accent-1":    #f4ff81,
+  "accent-2":    #eeff41,
+  "accent-3":    #c6ff00,
+  "accent-4":    #aeea00
+);
+
+$yellow: (
+  "lighten-5":  #fffde7,
+  "lighten-4":  #fff9c4,
+  "lighten-3":  #fff59d,
+  "lighten-2":  #fff176,
+  "lighten-1":  #ffee58,
+  "base":       #ffeb3b,
+  "darken-1":   #fdd835,
+  "darken-2":   #fbc02d,
+  "darken-3":   #f9a825,
+  "darken-4":   #f57f17,
+  "accent-1":    #ffff8d,
+  "accent-2":    #ffff00,
+  "accent-3":    #ffea00,
+  "accent-4":    #ffd600
+);
+
+$amber: (
+  "lighten-5":  #fff8e1,
+  "lighten-4":  #ffecb3,
+  "lighten-3":  #ffe082,
+  "lighten-2":  #ffd54f,
+  "lighten-1":  #ffca28,
+  "base":       #ffc107,
+  "darken-1":   #ffb300,
+  "darken-2":   #ffa000,
+  "darken-3":   #ff8f00,
+  "darken-4":   #ff6f00,
+  "accent-1":    #ffe57f,
+  "accent-2":    #ffd740,
+  "accent-3":    #ffc400,
+  "accent-4":    #ffab00
+);
+
+$orange: (
+  "lighten-5":  #fff3e0,
+  "lighten-4":  #ffe0b2,
+  "lighten-3":  #ffcc80,
+  "lighten-2":  #ffb74d,
+  "lighten-1":  #ffa726,
+  "base":       #ff9800,
+  "darken-1":   #fb8c00,
+  "darken-2":   #f57c00,
+  "darken-3":   #ef6c00,
+  "darken-4":   #e65100,
+  "accent-1":    #ffd180,
+  "accent-2":    #ffab40,
+  "accent-3":    #ff9100,
+  "accent-4":    #ff6d00
+);
+
+$deep-orange: (
+  "lighten-5":  #fbe9e7,
+  "lighten-4":  #ffccbc,
+  "lighten-3":  #ffab91,
+  "lighten-2":  #ff8a65,
+  "lighten-1":  #ff7043,
+  "base":       #ff5722,
+  "darken-1":   #f4511e,
+  "darken-2":   #e64a19,
+  "darken-3":   #d84315,
+  "darken-4":   #bf360c,
+  "accent-1":    #ff9e80,
+  "accent-2":    #ff6e40,
+  "accent-3":    #ff3d00,
+  "accent-4":    #dd2c00
+);
+
+$brown: (
+  "lighten-5":  #efebe9,
+  "lighten-4":  #d7ccc8,
+  "lighten-3":  #bcaaa4,
+  "lighten-2":  #a1887f,
+  "lighten-1":  #8d6e63,
+  "base":       #795548,
+  "darken-1":   #6d4c41,
+  "darken-2":   #5d4037,
+  "darken-3":   #4e342e,
+  "darken-4":   #3e2723
+);
+
+$blue-grey: (
+  "lighten-5":  #eceff1,
+  "lighten-4":  #cfd8dc,
+  "lighten-3":  #b0bec5,
+  "lighten-2":  #90a4ae,
+  "lighten-1":  #78909c,
+  "base":       #607d8b,
+  "darken-1":   #546e7a,
+  "darken-2":   #455a64,
+  "darken-3":   #37474f,
+  "darken-4":   #263238
+);
+
+$grey: (
+  "lighten-5":  #fafafa,
+  "lighten-4":  #f5f5f5,
+  "lighten-3":  #eeeeee,
+  "lighten-2":  #e0e0e0,
+  "lighten-1":  #bdbdbd,
+  "base":       #9e9e9e,
+  "darken-1":   #757575,
+  "darken-2":   #616161,
+  "darken-3":   #424242,
+  "darken-4":   #212121
+);
+
+$shades: (
+  "black":        #000000,
+  "white":        #FFFFFF,
+  "transparent":  transparent
+);
+
+$colors: (
+  "mdb-color": $mdb-color,
+  "red": $red,
+  "pink": $pink,
+  "purple": $purple,
+  "deep-purple": $deep-purple,
+  "indigo": $indigo,
+  "blue": $blue,
+  "light-blue": $light-blue,
+  "cyan": $cyan,
+  "teal": $teal,
+  "green": $green,
+  "light-green": $light-green,
+  "lime": $lime,
+  "yellow": $yellow,
+  "amber": $amber,
+  "orange": $orange,
+  "deep-orange": $deep-orange,
+  "brown": $brown,
+  "blue-grey": $blue-grey,
+  "grey": $grey,
+  "shades": $shades
+);
+
+// Color Classes
+@each $color_name,
+$color in $colors {
+    @each $color_type,
+    $color_value in $color {
+        @if $color_type=="base" {
+            .#{$color_name} {
+                background-color: $color_value !important;
+            }
+            .#{$color_name}-text {
+                color: $color_value !important;
+            }
+        }
+        @else {
+            .#{$color_name}.#{$color_type} {
+                background-color: $color_value !important;
+            }
+            .#{$color_name}-text.text-#{$color_type} {
+                color: $color_value !important;
+            }
+        }
+    }
+}
+
+// Shade classes
+@each $color,
+$color_value in $shades {
+    .#{$color} {
+        background-color: $color_value !important;
+    }
+    .#{$color}-text {
+        color: $color_value !important;
+    }
+}
+
+// usage: color("name_of_color", "type_of_color")
+// to avoid to repeating map-get($colors, ...)
+@function color($color, $type) {
+    @if map-has-key($colors, $color) {
+        $curr_color: map-get($colors, $color);
+        @if map-has-key($curr_color, $type) {
+            @return map-get($curr_color, $type);
+        }
+    }
+    @warn "Unknown `#{name}` in $colors.";
+    @return null;
+}
+
+// Social colors
+$fb-color: #3B5998;
+$tw-color: #55ACEE;
+$gplus-color: #DD4B39;
+$yt-color: #CD201F;
+$li-color: #0082CA;
+$pin-color: #C61118;
+$ins-color: #3F729B;
+$git-color: #4183C4;
+$comm-color: #30CFC0;
+$vk-color: #4C75A3;
+$drib-color: #C32361;
+$so-color: #f69c55;
+$slack-color: #56b68b;
+
+// Material Design Colors`
+$danger-color: #ff4444;
+.danger-color {
+    background-color: $danger-color!important;
+}
+
+$danger-color-dark: #CC0000;
+.danger-color-dark {
+    background-color: $danger-color-dark!important;
+}
+
+$warning-color: #ffbb33;
+.warning-color {
+    background-color: $warning-color!important;
+}
+
+$warning-color-dark: #FF8800;
+.warning-color-dark {
+    background-color: $warning-color-dark!important;
+}
+
+$success-color: #00C851;
+.success-color {
+    background-color: $success-color!important;
+}
+
+$success-color-dark: #007E33;
+.success-color-dark {
+    background-color: $success-color-dark!important;
+}
+
+$info-color: #33b5e5;
+.info-color {
+    background-color: $info-color!important;
+}
+
+$info-color-dark: #0099CC;
+.info-color-dark {
+    background-color: $info-color-dark!important;
+}
+
+// MDB Colors
+$default-color: #2BBBAD;
+.default-color {
+    background-color: $default-color!important;
+}
+
+$default-color-dark: #00695c;
+.default-color-dark {
+    background-color: $default-color-dark!important;
+}
+
+$primary-color: #4285F4;
+.primary-color {
+    background-color: $primary-color!important;
+}
+
+$primary-color-dark: #0d47a1;
+.primary-color-dark {
+    background-color: $primary-color-dark!important;
+}
+
+$secondary-color: #aa66cc;
+.secondary-color {
+    background-color: $secondary-color!important;
+}
+
+$secondary-color-dark: #9933CC;
+.secondary-color-dark {
+    background-color: $secondary-color-dark!important;
+}
+
+$elegant-color: #2E2E2E;
+.elegant-color {
+    background-color: $elegant-color!important;
+}
+
+$elegant-color-dark: #212121;
+.elegant-color-dark {
+    background-color: $elegant-color-dark!important;
+}
+
+$stylish-color: #4B515D;
+.stylish-color {
+    background-color: $stylish-color!important;
+}
+
+$stylish-color-dark: #3E4551;
+.stylish-color-dark {
+    background-color: $stylish-color-dark!important;
+}
+
+$special-color: #37474F;
+.special-color {
+    background-color: $special-color!important;
+}
+
+$special-color-dark: #263238;
+.special-color-dark {
+    background-color: $special-color-dark!important;
+}
+
+$unique-color: #3F729B;
+.unique-color {
+    background-color: $unique-color!important;
+}
+
+$unique-color-dark: #1C2331;
+.unique-color-dark {
+    background-color: $unique-color-dark!important;
+}
+
+$mdb-color: #45526E;
+.mdb-color {
+    background-color: $mdb-color!important;
+}
+
+$error-color: color("red", "base") !default;
+// RGBA colors
+// Light overlays
+$rgba-blue-light: rgba(3, 169, 244, 0.3);
+.rgba-blue-light {
+    background-color: $rgba-blue-light!important;
+}
+
+$rgba-red-light: rgba(244, 67, 54, 0.3);
+.rgba-red-light {
+    background-color: $rgba-red-light!important;
+}
+
+$rgba-pink-light: rgba(233, 30, 99, 0.3);
+.rgba-pink-light {
+    background-color: $rgba-pink-light!important;
+}
+
+$rgba-purple-light: rgba(156, 39, 176, 0.3);
+.rgba-purple-light {
+    background-color: $rgba-purple-light!important;
+}
+
+$rgba-indigo-light: rgba(63, 81, 181, 0.3);
+.rgba-indigo-light {
+    background-color: $rgba-indigo-light!important;
+}
+
+$rgba-cyan-light: rgba(0, 188, 212, 0.3);
+.rgba-cyan-light {
+    background-color: $rgba-cyan-light!important;
+}
+
+$rgba-teal-light: rgba(0, 150, 136, 0.3);
+.rgba-teal-light {
+    background-color: $rgba-teal-light!important;
+}
+
+$rgba-green-light: rgba(76, 175, 80, 0.3);
+.rgba-green-light {
+    background-color: $rgba-green-light!important;
+}
+
+$rgba-lime-light: rgba(205, 220, 57, 0.3);
+.rgba-lime-light {
+    background-color: $rgba-lime-light!important;
+}
+
+$rgba-yellow-light: rgba(255, 235, 59, 0.3);
+.rgba-yellow-light {
+    background-color: $rgba-yellow-light!important;
+}
+
+$rgba-orange-light: rgba(255, 152, 0, 0.3);
+.rgba-orange-light {
+    background-color: $rgba-orange-light!important;
+}
+
+$rgba-brown-light: rgba(121, 85, 72, 0.3);
+.rgba-brown-light {
+    background-color: $rgba-brown-light!important;
+}
+
+$rgba-grey-light: rgba(158, 158, 158, 0.3);
+.rgba-grey-light {
+    background-color: $rgba-grey-light!important;
+}
+
+$rgba-bluegrey-light: rgba(96, 125, 139, 0.3);
+.rgba-bluegrey-light {
+    background-color: $rgba-bluegrey-light!important;
+}
+
+$rgba-black-light: rgba(0, 0, 0, 0.3);
+.rgba-black-light {
+    background-color: $rgba-black-light!important;
+}
+
+$rgba-stylish-light: rgba(62, 69, 81, 0.3);
+.rgba-stylish-light {
+    background-color: $rgba-stylish-light!important;
+}
+
+$rgba-white-light: rgba(255, 255, 255, 0.3);
+.rgba-white-light {
+    background-color: $rgba-white-light!important;
+}
+
+// Strong overlays
+$rgba-blue-strong: rgba(3, 169, 244, 0.7);
+.rgba-blue-strong {
+    background-color: $rgba-blue-strong!important;
+}
+
+$rgba-red-strong: rgba(244, 67, 54, 0.7);
+.rgba-red-strong {
+    background-color: $rgba-red-strong!important;
+}
+
+$rgba-pink-strong: rgba(233, 30, 99, 0.7);
+.rgba-pink-strong {
+    background-color: $rgba-pink-strong!important;
+}
+
+$rgba-purple-strong: rgba(156, 39, 176, 0.7);
+.rgba-purple-strong {
+    background-color: $rgba-purple-strong!important;
+}
+
+$rgba-indigo-strong: rgba(63, 81, 181, 0.7);
+.rgba-indigo-strong {
+    background-color: $rgba-indigo-strong!important;
+}
+
+$rgba-cyan-strong: rgba(0, 188, 212, 0.7);
+.rgba-cyan-strong {
+    background-color: $rgba-cyan-strong!important;
+}
+
+$rgba-teal-strong: rgba(0, 150, 136, 0.7);
+.rgba-teal-strong {
+    background-color: $rgba-teal-strong!important;
+}
+
+$rgba-green-strong: rgba(76, 175, 80, 0.7);
+.rgba-green-strong {
+    background-color: $rgba-green-strong!important;
+}
+
+$rgba-lime-strong: rgba(205, 220, 57, 0.7);
+.rgba-lime-strong {
+    background-color: $rgba-lime-strong!important;
+}
+
+$rgba-yellow-strong: rgba(255, 235, 59, 0.7);
+.rgba-yellow-strong {
+    background-color: $rgba-yellow-strong!important;
+}
+
+$rgba-orange-strong: rgba(255, 152, 0, 0.7);
+.rgba-orange-strong {
+    background-color: $rgba-orange-strong!important;
+}
+
+$rgba-brown-strong: rgba(121, 85, 72, 0.7);
+.rgba-brown-strong {
+    background-color: $rgba-brown-strong!important;
+}
+
+$rgba-grey-strong: rgba(158, 158, 158, 0.7);
+.rgba-grey-strong {
+    background-color: $rgba-grey-strong!important;
+}
+
+$rgba-bluegrey-strong: rgba(96, 125, 139, 0.7);
+.rgba-bluegrey-strong {
+    background-color: $rgba-bluegrey-strong!important;
+}
+
+$rgba-black-strong: rgba(0, 0, 0, 0.7);
+.rgba-black-strong {
+    background-color: $rgba-black-strong!important;
+}
+
+$rgba-stylish-strong: rgba(62, 69, 81, 0.7);
+.rgba-stylish-strong {
+    background-color: $rgba-stylish-strong!important;
+}
+
+$rgba-white-strong: rgba(255, 255, 255, 0.7);
+.rgba-white-strong {
+    background-color: $rgba-white-strong!important;
+}
+
+// Super light overlays
+$rgba-blue-slight: rgba(3, 169, 244, 0.1);
+.rgba-blue-slight {
+    background-color: $rgba-blue-slight!important;
+}
+
+$rgba-red-slight: rgba(244, 67, 54, 0.1);
+.rgba-red-slight {
+    background-color: $rgba-red-slight!important;
+}
+
+$rgba-pink-slight: rgba(233, 30, 99, 0.1);
+.rgba-pink-slight {
+    background-color: $rgba-pink-slight!important;
+}
+
+$rgba-purple-slight: rgba(156, 39, 176, 0.1);
+.rgba-purple-slight {
+    background-color: $rgba-purple-slight!important;
+}
+
+$rgba-indigo-slight: rgba(63, 81, 181, 0.1);
+.rgba-indigo-slight {
+    background-color: $rgba-indigo-slight!important;
+}
+
+$rgba-cyan-slight: rgba(0, 188, 212, 0.1);
+.rgba-cyan-slight {
+    background-color: $rgba-cyan-slight!important;
+}
+
+$rgba-teal-slight: rgba(0, 150, 136, 0.1);
+.rgba-teal-slight {
+    background-color: $rgba-teal-slight!important;
+}
+
+$rgba-green-slight: rgba(76, 175, 80, 0.1);
+.rgba-green-slight {
+    background-color: $rgba-green-slight!important;
+}
+
+$rgba-lime-slight: rgba(205, 220, 57, 0.1);
+.rgba-lime-slight {
+    background-color: $rgba-lime-slight!important;
+}
+
+$rgba-yellow-slight: rgba(255, 235, 59, 0.1);
+.rgba-yellow-slight {
+    background-color: $rgba-yellow-slight!important;
+}
+
+$rgba-orange-slight: rgba(255, 152, 0, 0.1);
+.rgba-orange-slight {
+    background-color: $rgba-orange-slight!important;
+}
+
+$rgba-brown-slight: rgba(121, 85, 72, 0.1);
+.rgba-brown-slight {
+    background-color: $rgba-brown-slight!important;
+}
+
+$rgba-grey-slight: rgba(158, 158, 158, 0.1);
+.rgba-grey-slight {
+    background-color: $rgba-grey-slight!important;
+}
+
+$rgba-bluegrey-slight: rgba(96, 125, 139, 0.1);
+.rgba-bluegrey-slight {
+    background-color: rgba(96, 125, 139, 0.1)!important;
+}
+
+$rgba-black-slight: rgba(0, 0, 0, 0.1);
+.rgba-black-slight {
+    background-color: $rgba-black-slight!important;
+}
+
+$rgba-stylish-slight: rgba(62, 69, 81, 0.1);
+.rgba-stylish-slight {
+    background-color: $rgba-stylish-slight!important;
+}
+
+$rgba-white-slight: rgba(255, 255, 255, 0.1);
+.rgba-white-slight {
+    background-color: $rgba-white-slight!important;
+}
+
+.blue-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #062a64 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#062a64 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#062a64 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#062a64',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+
+.red-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #7d0000 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#7d0000 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#7d0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#7d0000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+
+.green-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #003830 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#003830 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#003830 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#003830',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+}
+
+.purple-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #650696 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#650696 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#650696 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#650696',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
+}
+
+.dark-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #2e2e2e 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#2e2e2e 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#2e2e2e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#2e2e2e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
+}
+
+.grey-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #4b515d 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#4b515d 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#4b515d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4b515d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
+}
+ 
+.mdb-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #3f729b 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#3f729b 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#3f729b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#3f729b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
+}
+
+.deep-orange-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #8a1a00 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#8a1a00 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#8a1a00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#8a1a00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
+}
+
+.graphite-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #37474f 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#37474f 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#37474f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#37474f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */    
+}
+
+.pink-gradient {
+background: #000000; /* Old browsers */
+background: -moz-linear-gradient(-45deg,  #000000 0%, #880e4f 100%); /* FF3.6-15 */
+background: -webkit-linear-gradient(-45deg,  #000000 0%,#880e4f 100%); /* Chrome10-25,Safari5.1-6 */
+background: linear-gradient(135deg,  #000000 0%,#880e4f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#880e4f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  
+}
--- a/public/vendors/MDB/sass/mdb/free/data/_mixins.scss
+++ b/public/vendors/MDB/sass/mdb/free/data/_mixins.scss
@ -0,0 +1,101 @@
+/*********************
+  Mixins
+**********************/
+
+@mixin hover {
+    @if $enable-hover-media-query {
+        // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover
+        // Currently shimmed by https://github.com/twbs/mq4-hover-shim
+        @media (hover: hover) {
+            &:hover {
+                @content
+            }
+        }
+    }
+    @else {
+        &:hover {
+            @content
+        }
+    }
+}
+
+@mixin hover-focus {
+    @if $enable-hover-media-query {
+        &:focus {
+            @content
+        }
+        @include hover {
+            @content
+        }
+    }
+    @else {
+        &:focus,
+        &:hover {
+            @content
+        }
+    }
+}
+
+@mixin plain-hover-focus {
+    @if $enable-hover-media-query {
+        &,
+        &:focus {
+            @content
+        }
+        @include hover {
+            @content
+        }
+    }
+    @else {
+        &,
+        &:focus,
+        &:hover {
+            @content
+        }
+    }
+}
+
+@mixin hover-focus-active {
+    @if $enable-hover-media-query {
+        &:focus,
+        &:active {
+            @content
+        }
+        @include hover {
+            @content
+        }
+    }
+    @else {
+        &:focus,
+        &:active,
+        &:hover {
+            @content
+        }
+    }
+}
+
+@mixin border-radius($args) {
+    -webkit-border-radius: $args;
+    -moz-border-radius: $args;
+    -ms-border-radius: $args;
+    -o-border-radius: $args;
+    border-radius: $args;
+}
+
+@mixin placeholder {
+    &::-webkit-input-placeholder {
+        @content
+    }
+    &:-moz-placeholder {
+        @content
+    }
+    &::-moz-placeholder {
+        @content
+    }
+    &::-ms-placeholder {
+        @content
+    }
+    &::placeholder {
+        @content
+    }
+}
--- a/public/vendors/MDB/sass/mdb/free/data/_prefixer.scss
+++ b/public/vendors/MDB/sass/mdb/free/data/_prefixer.scss
@ -0,0 +1,376 @@
+//---------------------------------------------------
+//  Sass Prefixer
+//  -------------------------------------------------
+//  TABLE OF CONTENTS
+//  (*) denotes a syntax-sugar helper
+//  -------------------------------------------------
+//
+//      animation($args)
+//          animation-delay($delay)
+//          animation-direction($direction)
+//          animation-duration($duration)
+//          animation-fill-mode($mode)
+//          animation-iteration-count($count)
+//          animation-name($name)
+//          animation-play-state($state)
+//          animation-timing-function($function)
+//      background-size($args)
+//          inner-shadow($args) *
+//      box-sizing($args)
+//          border-box() *
+//          content-box() *
+//      columns($args)
+//          column-count($count)
+//          column-gap($gap)
+//          column-rule($args)
+//          column-width($width)
+//      flexbox()
+//          flex($args)
+//          order($args)
+//          align($args)
+//          justify-content($args)
+//      gradient($default,$start,$stop) *
+//          linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
+//          linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])*
+//      transform($args)
+//          transform-origin($args)
+//          transform-style($style)
+//          rotate($deg)
+//          scale($factor)
+//          translate($x,$y)
+//          translate3d($x,$y,$z)
+//          translateHardware($x,$y) * 
+//      text-shadow($args)
+//      transition($args)
+//          transition-delay($delay)
+//          transition-duration($duration)
+//          transition-property($property)
+//          transition-timing-function($function)
+
+
+// Animation
+
+@mixin animation($args) {
+    -webkit-animation: $args;
+    -moz-animation: $args;
+    -ms-animation: $args;
+    -o-animation: $args;
+    animation: $args;
+}
+@mixin animation-delay($delay) {
+    -webkit-animation-delay: $delay;
+    -moz-animation-delay: $delay;
+    -ms-animation-delay: $delay;
+    -o-animation-delay: $delay;
+    animation-delay: $delay;
+}
+@mixin animation-direction($direction) {
+    -webkit-animation-direction: $direction;
+    -moz-animation-direction: $direction;
+    -ms-animation-direction: $direction;
+    -o-animation-direction: $direction;
+}
+@mixin animation-duration($duration) {
+    -webkit-animation-duration: $duration;
+    -moz-animation-duration: $duration;
+    -ms-animation-duration: $duration;
+    -o-animation-duration: $duration;
+}
+@mixin animation-fill-mode($mode) {
+    -webkit-animation-fill-mode: $mode;
+    -moz-animation-fill-mode: $mode;
+    -ms-animation-fill-mode: $mode;
+    -o-animation-fill-mode: $mode;
+    animation-fill-mode: $mode;
+}
+@mixin animation-iteration-count($count) {
+    -webkit-animation-iteration-count: $count;
+    -moz-animation-iteration-count: $count;
+    -ms-animation-iteration-count: $count;
+    -o-animation-iteration-count: $count;
+    animation-iteration-count: $count;
+}
+@mixin animation-name($name) {
+    -webkit-animation-name: $name;
+    -moz-animation-name: $name;
+    -ms-animation-name: $name;
+    -o-animation-name: $name;
+    animation-name: $name;
+}
+@mixin animation-play-state($state) {
+    -webkit-animation-play-state: $state;
+    -moz-animation-play-state: $state;
+    -ms-animation-play-state: $state;
+    -o-animation-play-state: $state;
+    animation-play-state: $state;
+}
+@mixin animation-timing-function($function) {
+    -webkit-animation-timing-function: $function;
+    -moz-animation-timing-function: $function;
+    -ms-animation-timing-function: $function;
+    -o-animation-timing-function: $function;
+    animation-timing-function: $function;
+}
+
+// Keyframes
+@mixin keyframes($animation-name) {
+  @-webkit-keyframes #{$animation-name} {
+    @content;
+  }
+  @-moz-keyframes #{$animation-name} {
+    @content;
+  }
+  @keyframes #{$animation-name} {
+    @content;
+  }
+}
+
+// Backface-visibility
+
+@mixin backface-visibility($args) {
+    -webkit-backface-visibility: $args;
+    -moz-backface-visibility: $args;
+    -ms-backface-visibility: $args;
+    backface-visibility: $args;
+}
+
+
+// Background Size
+
+@mixin background-size($args) {
+    -webkit-background-size: $args;
+    background-size: $args;
+}
+
+// Box Sizing
+
+@mixin box-sizing($args) {
+    -webkit-box-sizing: $args;
+    -moz-box-sizing: $args;
+    box-sizing: $args;
+}
+@mixin border-box(){
+    @include box-sizing(border-box);
+}
+@mixin content-box(){
+    @include box-sizing(content-box);
+}
+
+
+// Columns
+
+@mixin columns($args) {
+    -webkit-columns: $args;
+    -moz-columns: $args;
+    columns: $args;
+}
+@mixin column-count($count) {
+    -webkit-column-count: $count;
+    -moz-column-count: $count;
+    column-count: $count;
+}
+@mixin column-gap($gap) {
+    -webkit-column-gap: $gap;
+    -moz-column-gap: $gap;
+    column-gap: $gap;
+}
+@mixin column-width($width) {
+    -webkit-column-width: $width;
+    -moz-column-width: $width;
+    column-width: $width;
+}
+@mixin column-rule($args) {
+    -webkit-column-rule: $args;
+    -moz-column-rule: $args;
+    column-rule: $args;
+}
+
+// Filter
+@mixin filter($args) {
+    -webkit-filter: $args;
+    -moz-filter: $args;
+    -o-filter: $args;
+    -ms-filter: $args;
+}
+
+// Flexbox
+@mixin flexbox() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+    @mixin flex($values) {
+      -webkit-box-flex: $values;
+      -moz-box-flex:  $values;
+      -webkit-flex:  $values;
+      -ms-flex:  $values;
+      flex:  $values;
+    }
+    @mixin order($val) {
+      -webkit-box-ordinal-group: $val;
+      -moz-box-ordinal-group: $val;
+      -ms-flex-order: $val;
+      -webkit-order: $val;
+      order: $val;
+    }
+    @mixin align($align) {
+      -webkit-flex-align: $align;
+      -ms-flex-align: $align;
+      -webkit-align-items: $align;
+      align-items: $align;
+    }
+    @mixin justify-content($val) {
+      -webkit-justify-content: $val;
+      justify-content: $val;
+    }
+// Gradients
+
+@mixin gradient($default: #F5F5F5, $start: #EEE, $stop: #FFF) {
+    @include linear-gradient-top($default,$start,0%,$stop,100%);
+}
+@mixin linear-gradient-top($default,$color1,$stop1,$color2,$stop2) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2));
+    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2);
+    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2);
+}
+@mixin linear-gradient-top2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
+    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+}
+@mixin linear-gradient-top3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
+    background-image: -webkit-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -moz-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -ms-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -o-linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: linear-gradient(top, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+}
+@mixin linear-gradient-left($default,$color1,$stop1,$color2,$stop2) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2));
+    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2);
+    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2);
+}
+@mixin linear-gradient-left2($default,$color1,$stop1,$color2,$stop2,$color3,$stop3) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3));
+    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3);
+}
+@mixin linear-gradient-left3($default,$color1,$stop1,$color2,$stop2,$color3,$stop3,$color4,$stop4) {
+    background-color: $default;
+    background-image: -webkit-gradient(linear, left top, left top, color-stop($stop1, $color1), color-stop($stop2 $color2), color-stop($stop3 $color3), color-stop($stop4 $color4));
+    background-image: -webkit-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -moz-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -ms-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: -o-linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+    background-image: linear-gradient(left, $color1 $stop1, $color2 $stop2, $color3 $stop3, $color4 $stop4);
+}
+
+// Text Shadow
+
+@mixin text-shadow($args) {
+    text-shadow: $args;
+}
+
+
+// Transforms
+
+@mixin transform($args) {
+    -webkit-transform: $args;
+    -moz-transform: $args;
+    -ms-transform: $args;
+    -o-transform: $args;
+    transform: $args;
+}
+@mixin transform-origin($args) {
+    -webkit-transform-origin: $args;
+    -moz-transform-origin: $args;
+    -ms-transform-origin: $args;
+    -o-transform-origin: $args;
+    transform-origin: $args;
+}
+@mixin transform-style($style) {
+    -webkit-transform-style: $style;
+    -moz-transform-style: $style;
+    -ms-transform-style: $style;
+    -o-transform-style: $style;
+    transform-style: $style;
+}
+@mixin rotate($deg:45deg){
+    @include transform(rotate($deg));
+}
+@mixin scale($factor:.5){
+    @include transform(scale($factor));
+}
+@mixin translate($x,$y){
+    @include transform(translate($x,$y));
+}
+@mixin translate3d($x,$y,$z) {
+    @include transform(translate3d($x,$y,$z));
+}
+@mixin translateHardware($x,$y) {
+    @include translate($x,$y);
+    -webkit-transform: translate3d($x,$y,0);
+    -moz-transform: translate3d($x,$y,0);
+    -o-transform: translate3d($x,$y,0);
+    -ms-transform: translate3d($x,$y,0);
+    transform: translate3d($x,$y,0);
+}
+
+
+// Transitions
+
+@mixin transition($args:200ms) {
+    -webkit-transition: $args;
+    -moz-transition: $args;
+    -o-transition: $args;
+    -ms-transition: $args;
+    transition: $args;
+}
+@mixin transition-delay($delay:0) {
+    -webkit-transition-delay: $delay;
+    -moz-transition-delay: $delay;
+    -o-transition-delay: $delay;
+    -ms-transition-delay: $delay;
+    transition-delay: $delay;
+}
+@mixin transition-duration($duration:200ms) {
+    -webkit-transition-duration: $duration;
+    -moz-transition-duration: $duration;
+    -o-transition-duration: $duration;
+    -ms-transition-duration: $duration;
+    transition-duration: $duration;
+}
+@mixin transition-property($property:all) {
+    -webkit-transition-property: $property;
+    -moz-transition-property: $property;
+    -o-transition-property: $property;
+    -ms-transition-property: $property;
+    transition-property: $property;
+}
+@mixin transition-timing-function($function:ease) {
+    -webkit-transition-timing-function: $function;
+    -moz-transition-timing-function: $function;
+    -o-transition-timing-function: $function;
+    -ms-transition-timing-function: $function;
+    transition-timing-function: $function;
+}
--- a/public/vendors/MDB/sass/mdb/free/data/_variables-b4.scss
+++ b/public/vendors/MDB/sass/mdb/free/data/_variables-b4.scss
@ -0,0 +1,674 @@
+// Variables
+//
+// Copy settings from this file into the provided `_custom.scss` to override
+// the Bootstrap defaults without modifying key, versioned files.
+
+
+// Table of Contents
+//
+// Colors
+// Options
+// Spacing
+// Body
+// Links
+// Grid breakpoints
+// Grid containers
+// Grid columns
+// Fonts
+// Components
+
+// General variable structure
+//
+// Variable format should follow the `$component-modifier-state-property` order.
+
+
+// Colors
+//
+// Grayscale and brand colors for use across Bootstrap.
+
+$gray-dark:                 #373a3c !default;
+$gray:                      #55595c !default;
+$gray-light:                #818a91 !default;
+$gray-lighter:              #eceeef !default;
+$gray-lightest:             #f7f7f9 !default;
+
+$brand-primary:             #0275d8 !default;
+$brand-success:             #5cb85c !default;
+$brand-info:                #5bc0de !default;
+$brand-warning:             #f0ad4e !default;
+$brand-danger:              #d9534f !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-flex:               false !default;
+$enable-rounded:            true !default;
+$enable-shadows:            false !default;
+$enable-gradients:          false !default;
+$enable-transitions:        false !default;
+$enable-hover-media-query:  false !default;
+$enable-grid-classes:       true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+
+$spacer:                     1rem !default;
+$spacer-x:                   $spacer !default;
+$spacer-y:                   $spacer !default;
+$spacers: (
+  0: (
+    x:   0,
+    y:   0
+  ),
+  1: (
+    x:   $spacer-x,
+    y:   $spacer-y
+  ),
+  2: (
+    x:   ($spacer-x * 1.5),
+    y:   ($spacer-y * 1.5)
+  ),
+  3: (
+    x:   ($spacer-x * 3),
+    y:   ($spacer-y * 3)
+  ),
+  4: (
+    x:   ($spacer-x * 4),
+    y:   ($spacer-y * 4)
+  ),
+  5: (
+    x:   ($spacer-x * 5),
+    y:   ($spacer-y * 5)
+  )
+) !default;
+$border-width:               1px !default;
+
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                    #fff !default;
+$body-color:                 $gray-dark !default;
+
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                 $brand-primary !default;
+$link-decoration:            none !default;
+$link-hover-color:           darken($link-color, 15%) !default;
+$link-hover-decoration:      underline !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum and maximum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  // Extra small screen / phone
+  xs: 0,
+  // Small screen / phone
+  sm: 544px,
+  // Medium screen / tablet
+  md: 768px,
+  // Large screen / desktop
+  lg: 992px,
+  // Extra large screen / wide desktop
+  xl: 1200px
+) !default;
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 576px,
+  md: 720px,
+  lg: 940px,
+  xl: 1140px
+) !default;
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:               12 !default;
+$grid-gutter-width:          1.875rem !default; // 30px
+
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif:     "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif:          Georgia, "Times New Roman", Times, serif !default;
+$font-family-monospace:      Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base:           $font-family-sans-serif !default;
+
+// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
+$font-size-root:             16px !default;
+
+$font-size-base:             1rem !default;
+$font-size-lg:               1.25rem !default;
+$font-size-sm:               .875rem !default;
+$font-size-xs:               .75rem !default;
+
+$font-size-h1:               2.5rem !default;
+$font-size-h2:               2rem !default;
+$font-size-h3:               1.75rem !default;
+$font-size-h4:               1.5rem !default;
+$font-size-h5:               1.25rem !default;
+$font-size-h6:               1rem !default;
+
+$display1-size:               6rem !default;
+$display2-size:               5.5rem !default;
+$display3-size:               4.5rem !default;
+$display4-size:               3.5rem !default;
+
+$display1-weight:             300 !default;
+$display2-weight:             300 !default;
+$display3-weight:             300 !default;
+$display4-weight:             300 !default;
+
+$line-height:                1.5 !default;
+
+$headings-margin-bottom:     ($spacer / 2) !default;
+$headings-font-family:       inherit !default;
+$headings-font-weight:       500 !default;
+$headings-line-height:       1.1 !default;
+$headings-color:             inherit !default;
+
+$lead-font-size:             1.25rem !default;
+$lead-font-weight:           300 !default;
+
+$text-muted:                  $gray-light !default;
+
+$abbr-border-color:           $gray-light !default;
+
+$blockquote-small-color:      $gray-light !default;
+$blockquote-font-size:        ($font-size-base * 1.25) !default;
+$blockquote-border-color:     $gray-lighter !default;
+
+$hr-border-color:             rgba(0,0,0,.1) !default;
+$hr-border-width:             $border-width !default;
+
+$dt-font-weight:              bold !default;
+
+$nested-kbd-font-weight:      bold !default;
+
+$list-inline-padding:         5px !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:         (4 / 3) !default;
+$line-height-sm:         1.5 !default;
+
+$border-radius:          .25rem !default;
+$border-radius-lg:       .3rem !default;
+$border-radius-sm:       .2rem !default;
+
+$component-active-color: #fff !default;
+$component-active-bg:    $brand-primary !default;
+
+$caret-width:            .3em !default;
+$caret-width-lg:         $caret-width !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:            .75rem !default;
+$table-sm-cell-padding:         .3rem !default;
+
+$table-bg:                      transparent !default;
+$table-bg-accent:               #f9f9f9 !default;
+$table-bg-hover:                #f5f5f5 !default;
+$table-bg-active:               $table-bg-hover !default;
+
+$table-border-width:            $border-width !default;
+$table-border-color:            $gray-lighter !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-padding-x:                  1rem !default;
+$btn-padding-y:                  .375rem !default;
+$btn-font-weight:                normal !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             $btn-primary-bg !default;
+
+$btn-secondary-color:            $gray-dark !default;
+$btn-secondary-bg:               #fff !default;
+$btn-secondary-border:           #ccc !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $brand-info !default;
+$btn-info-border:                $btn-info-bg !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $brand-success !default;
+$btn-success-border:             $btn-success-bg !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $brand-warning !default;
+$btn-warning-border:             $btn-warning-bg !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $brand-danger !default;
+$btn-danger-border:              $btn-danger-bg !default;
+
+$btn-link-disabled-color:        $gray-light !default;
+
+$btn-padding-x-sm:               .75rem !default;
+$btn-padding-y-sm:               .25rem !default;
+
+$btn-padding-x-lg:               1.25rem !default;
+$btn-padding-y-lg:               .75rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:              $border-radius !default;
+$btn-border-radius-lg:           $border-radius-lg !default;
+$btn-border-radius-sm:           $border-radius-sm !default;
+
+
+// Forms
+
+$input-padding-x:                .75rem !default;
+$input-padding-y:                .375rem !default;
+
+$input-bg:                       #fff !default;
+$input-bg-disabled:              $gray-lighter !default;
+
+$input-color:                    $gray !default;
+$input-border-color:             #ccc !default;
+$input-btn-border-width:         $border-width !default; // For form controls and buttons
+$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
+
+$input-border-radius:            $border-radius !default;
+$input-border-radius-lg:         $border-radius-lg !default;
+$input-border-radius-sm:         $border-radius-sm !default;
+
+$input-border-focus:             #66afe9 !default;
+$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
+
+$input-color-placeholder:        #999 !default;
+
+$input-padding-x-sm:             .75rem !default;
+$input-padding-y-sm:             .275rem !default;
+
+$input-padding-x-lg:             1.25rem !default;
+$input-padding-y-lg:             .75rem !default;
+
+$input-height:                   (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
+$input-height-lg:                (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
+$input-height-sm:                (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default;
+
+$form-group-margin-bottom:       $spacer-y !default;
+
+$input-group-addon-bg:           $gray-lighter !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$cursor-disabled:                not-allowed !default;
+
+// Form validation icons
+$form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;
+$form-icon-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZjBhZDRlIiBkPSJNNjAzIDY0MC4ybC0yNzguNS01MDljLTMuOC02LjYtMTAuOC0xMC42LTE4LjUtMTAuNnMtMTQuNyA0LTE4LjUgMTAuNkw5IDY0MC4yYy0zLjcgNi41LTMuNiAxNC40LjIgMjAuOCAzLjggNi41IDEwLjggMTAuNCAxOC4zIDEwLjRoNTU3YzcuNiAwIDE0LjYtNCAxOC40LTEwLjQgMy41LTYuNCAzLjYtMTQuNCAwLTIwLjh6bS0yNjYuNC0zMGgtNjEuMlY1NDloNjEuMnY2MS4yem0wLTEwN2gtNjEuMlYzMDRoNjEuMnYxOTl6Ii8+PC9zdmc+" !default;
+$form-icon-danger: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjZDk1MzRmIiBkPSJNNDQ3IDU0NC40Yy0xNC40IDE0LjQtMzcuNiAxNC40LTUyIDBsLTg5LTkyLjctODkgOTIuN2MtMTQuNSAxNC40LTM3LjcgMTQuNC01MiAwLTE0LjQtMTQuNC0xNC40LTM3LjYgMC01Mmw5Mi40LTk2LjMtOTIuNC05Ni4zYy0xNC40LTE0LjQtMTQuNC0zNy42IDAtNTJzMzcuNi0xNC4zIDUyIDBsODkgOTIuOCA4OS4yLTkyLjdjMTQuNC0xNC40IDM3LjYtMTQuNCA1MiAwIDE0LjMgMTQuNCAxNC4zIDM3LjYgMCA1MkwzNTQuNiAzOTZsOTIuNCA5Ni40YzE0LjQgMTQuNCAxNC40IDM3LjYgMCA1MnoiLz48L3N2Zz4=" !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-bg:                    #fff !default;
+$dropdown-border-color:          rgba(0,0,0,.15) !default;
+$dropdown-border-width:          $border-width !default;
+$dropdown-divider-bg:            #e5e5e5 !default;
+
+$dropdown-link-color:            $gray-dark !default;
+$dropdown-link-hover-color:      darken($gray-dark, 5%) !default;
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+$dropdown-link-active-color:     $component-active-color !default;
+$dropdown-link-active-bg:        $component-active-bg !default;
+
+$dropdown-link-disabled-color:   $gray-light !default;
+
+$dropdown-header-color:          $gray-light !default;
+
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-navbar:            1000 !default;
+$zindex-dropdown:          1000 !default;
+$zindex-popover:           1060 !default;
+$zindex-tooltip:           1070 !default;
+$zindex-navbar-fixed:      1030 !default;
+$zindex-navbar-sticky:     1030 !default;
+$zindex-modal-bg:          1040 !default;
+$zindex-modal:             1050 !default;
+
+
+// Navbar
+
+$navbar-border-radius:              $border-radius !default;
+$navbar-padding-horizontal:         $spacer !default;
+$navbar-padding-vertical:           ($spacer / 2) !default;
+
+$navbar-dark-color:                 rgba(255,255,255,.5) !default;
+$navbar-dark-hover-color:           rgba(255,255,255,.75) !default;
+$navbar-dark-active-color:          rgba(255,255,255,1) !default;
+$navbar-dark-disabled-color:        rgba(255,255,255,.25) !default;
+
+$navbar-light-color:                rgba(0,0,0,.3) !default;
+$navbar-light-hover-color:          rgba(0,0,0,.6) !default;
+$navbar-light-active-color:         rgba(0,0,0,.8) !default;
+$navbar-light-disabled-color:       rgba(0,0,0,.15) !default;
+
+
+// Navs
+
+$nav-link-padding:                          .5em 1em !default;
+$nav-link-hover-bg:                         $gray-lighter !default;
+
+$nav-disabled-link-color:                   $gray-light !default;
+$nav-disabled-link-hover-color:             $gray-light !default;
+
+$nav-tabs-border-color:                     #ddd !default;
+
+$nav-tabs-link-border-width:                $border-width !default;
+$nav-tabs-link-hover-border-color:          $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg:             $body-bg !default;
+$nav-tabs-active-link-hover-color:          $gray !default;
+$nav-tabs-active-link-hover-border-color:   #ddd !default;
+
+$nav-tabs-justified-link-border-color:            #ddd !default;
+$nav-tabs-justified-active-link-border-color:     $body-bg !default;
+
+$nav-pills-border-radius:                   $border-radius !default;
+$nav-pills-active-link-hover-bg:            $component-active-bg !default;
+$nav-pills-active-link-hover-color:         $component-active-color !default;
+
+
+// Pagination
+
+$pagination-padding-x:                .75rem !default;
+$pagination-padding-y:                .5rem !default;
+$pagination-padding-x-sm:             .75rem !default;
+$pagination-padding-y-sm:             .275rem !default;
+$pagination-padding-x-lg:             1.5rem !default;
+$pagination-padding-y-lg:             .75rem !default;
+
+
+$pagination-color:                     $link-color !default;
+$pagination-bg:                        #fff !default;
+$pagination-border-width:              $border-width !default;
+$pagination-border-color:              #ddd !default;
+
+$pagination-hover-color:               $link-hover-color !default;
+$pagination-hover-bg:                  $gray-lighter !default;
+$pagination-hover-border:              #ddd !default;
+
+$pagination-active-color:              #fff !default;
+$pagination-active-bg:                 $brand-primary !default;
+$pagination-active-border:             $brand-primary !default;
+
+$pagination-disabled-color:            $gray-light !default;
+$pagination-disabled-bg:               #fff !default;
+$pagination-disabled-border:           #ddd !default;
+
+
+// Pager
+
+$pager-bg:                             $pagination-bg !default;
+$pager-border-width:                   $border-width !default;
+$pager-border-color:                   $pagination-border-color !default;
+$pager-border-radius:                  15px !default;
+
+$pager-hover-bg:                       $pagination-hover-bg !default;
+
+$pager-active-bg:                      $pagination-active-bg !default;
+$pager-active-color:                   $pagination-active-color !default;
+
+$pager-disabled-color:                 $pagination-disabled-color !default;
+
+
+// Jumbotron
+
+$jumbotron-padding:              2rem !default;
+$jumbotron-bg:                   $gray-lighter !default;
+
+
+// Form states and alerts
+//
+// Define colors for form feedback states and, by default, alerts.
+
+$state-success-text:             #3c763d !default;
+$state-success-bg:               #dff0d8 !default;
+$state-success-border:           darken($state-success-bg, 5%) !default;
+
+$state-info-text:                #31708f !default;
+$state-info-bg:                  #d9edf7 !default;
+$state-info-border:              darken($state-info-bg, 7%) !default;
+
+$state-warning-text:             #8a6d3b !default;
+$state-warning-bg:               #fcf8e3 !default;
+$state-warning-border:           darken($state-warning-bg, 5%) !default;
+
+$state-danger-text:              #a94442 !default;
+$state-danger-bg:                #f2dede !default;
+$state-danger-border:            darken($state-danger-bg, 5%) !default;
+
+
+// Cards
+$card-spacer-x:            1.25rem !default;
+$card-spacer-y:            .75rem !default;
+$card-border-width:        1px !default;
+$card-border-radius:       $border-radius !default;
+$card-border-color:        #e5e5e5 !default;
+$card-border-radius-inner: $card-border-radius !default;
+$card-cap-bg:              #f5f5f5 !default;
+$card-bg:                  #fff !default;
+
+$card-link-hover-color:    #fff !default;
+
+
+// Tooltips
+
+$tooltip-max-width:           200px !default;
+$tooltip-color:               #fff !default;
+$tooltip-bg:                  #000 !default;
+$tooltip-opacity:             .9 !default;
+
+$tooltip-arrow-width:         5px !default;
+$tooltip-arrow-color:         $tooltip-bg !default;
+
+
+// Popovers
+
+$popover-bg:                          #fff !default;
+$popover-max-width:                   276px !default;
+$popover-border-width:                $border-width !default;
+$popover-border-color:                rgba(0,0,0,.2) !default;
+
+$popover-title-bg:                    darken($popover-bg, 3%) !default;
+
+$popover-arrow-width:                 10px !default;
+$popover-arrow-color:                 $popover-bg !default;
+
+$popover-arrow-outer-width:           ($popover-arrow-width + 1) !default;
+$popover-arrow-outer-color:           fade-in($popover-border-color, 0.05) !default;
+
+
+// Labels
+
+$label-default-bg:            $gray-light !default;
+$label-primary-bg:            $brand-primary !default;
+$label-success-bg:            $brand-success !default;
+$label-info-bg:               $brand-info !default;
+$label-warning-bg:            $brand-warning !default;
+$label-danger-bg:             $brand-danger !default;
+
+$label-color:                 #fff !default;
+$label-link-hover-color:      #fff !default;
+$label-font-weight:           bold !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding:         15px !default;
+
+$modal-title-padding:         15px !default;
+$modal-title-line-height:     $line-height !default;
+
+$modal-content-bg:                             #fff !default;
+$modal-content-border-color:                   rgba(0,0,0,.2) !default;
+
+$modal-backdrop-bg:           #000 !default;
+$modal-backdrop-opacity:      .5 !default;
+$modal-header-border-color:   #e5e5e5 !default;
+$modal-footer-border-color:   $modal-header-border-color !default;
+
+$modal-lg:                    900px !default;
+$modal-md:                    600px !default;
+$modal-sm:                    300px !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding:               15px !default;
+$alert-border-radius:         $border-radius !default;
+$alert-link-font-weight:      bold !default;
+$alert-border-width:          $border-width !default;
+
+$alert-success-bg:            $state-success-bg !default;
+$alert-success-text:          $state-success-text !default;
+$alert-success-border:        $state-success-border !default;
+
+$alert-info-bg:               $state-info-bg !default;
+$alert-info-text:             $state-info-text !default;
+$alert-info-border:           $state-info-border !default;
+
+$alert-warning-bg:            $state-warning-bg !default;
+$alert-warning-text:          $state-warning-text !default;
+$alert-warning-border:        $state-warning-border !default;
+
+$alert-danger-bg:             $state-danger-bg !default;
+$alert-danger-text:           $state-danger-text !default;
+$alert-danger-border:         $state-danger-border !default;
+
+
+// Progress bars
+
+$progress-bg:                 #f5f5f5 !default;
+$progress-bar-color:          #fff !default;
+$progress-border-radius:      $border-radius !default;
+
+$progress-bar-bg:             $brand-primary !default;
+$progress-bar-success-bg:     $brand-success !default;
+$progress-bar-warning-bg:     $brand-warning !default;
+$progress-bar-danger-bg:      $brand-danger !default;
+$progress-bar-info-bg:        $brand-info !default;
+
+
+// List group
+
+$list-group-bg:                 #fff !default;
+$list-group-border-color:       #ddd !default;
+$list-group-border-width:       $border-width !default;
+$list-group-border-radius:      $border-radius !default;
+
+$list-group-hover-bg:           #f5f5f5 !default;
+$list-group-active-color:       $component-active-color !default;
+$list-group-active-bg:          $component-active-bg !default;
+$list-group-active-border:      $list-group-active-bg !default;
+$list-group-active-text-color:  lighten($list-group-active-bg, 40%) !default;
+
+$list-group-disabled-color:      $gray-light !default;
+$list-group-disabled-bg:         $gray-lighter !default;
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color:         #555 !default;
+$list-group-link-hover-color:   $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding:           .25rem !default;
+$thumbnail-bg:                $body-bg !default;
+$thumbnail-border-width:      $border-width !default;
+$thumbnail-border-color:      #ddd !default;
+$thumbnail-border-radius:     $border-radius !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-vertical:   .75rem !default;
+$breadcrumb-padding-horizontal: 1rem !default;
+
+$breadcrumb-bg:                 $gray-lighter !default;
+$breadcrumb-divider-color:      $gray-light !default;
+$breadcrumb-active-color:       $gray-light !default;
+$breadcrumb-divider:            "/" !default;
+
+
+// Carousel
+
+$carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color:                      #fff !default;
+$carousel-control-width:                      15% !default;
+$carousel-control-opacity:                    .5 !default;
+$carousel-control-font-size:                  20px !default;
+
+$carousel-indicator-active-bg:                #fff !default;
+$carousel-indicator-border-color:             #fff !default;
+
+$carousel-caption-color:                      #fff !default;
+
+
+// Close
+
+$close-font-weight:           bold !default;
+$close-color:                 #000 !default;
+$close-text-shadow:           0 1px 0 #fff !default;
+
+
+// Code
+
+$code-color:                  #bd4147 !default;
+$code-bg:                     #f7f7f9 !default;
+
+$kbd-color:                   #fff !default;
+$kbd-bg:                      #333 !default;
+
+$pre-bg:                      #f7f7f9 !default;
+$pre-color:                   $gray-dark !default;
+$pre-border-color:            #ccc !default;
+$pre-scrollable-max-height:   340px !default;
--- a/public/vendors/MDB/sass/mdb/free/data/_variables.scss
+++ b/public/vendors/MDB/sass/mdb/free/data/_variables.scss
@ -0,0 +1,103 @@
+// VARIABLES
+
+/*** Colors ***/
+$primary-color: color("mdb-color", "lighten-2") !default;
+$primary-color-light: lighten($primary-color, 15%) !default;
+$primary-color-dark: darken($primary-color, 15%) !default;
+
+$secondary-color: color("teal", "lighten-1") !default;
+$success-color: color("green", "base") !default;
+
+$link-color: color("light-blue", "darken-1") !default;
+
+/*** Fonts ***/
+$roboto-font-path: "../font/roboto/" !default;
+
+/*** Typography ***/
+$off-black: rgba(0, 0, 0, 0.87) !default;
+
+/*** Cards ***/
+$card-padding: 20px !default;
+$card-bg-color: #fff !default;
+$card-link-color: color("orange", "accent-2") !default;
+$card-link-color-light: lighten($card-link-color, 20%) !default;
+
+/*** Global ***/
+// Media Query Ranges
+$small-screen-up: 601px !default;
+$medium-screen-up: 993px !default;
+$large-screen-up: 1201px !default;
+$small-screen: 600px !default;
+$medium-screen: 992px !default;
+$large-screen: 1200px !default;
+$sidenav-breakpoint: 1440px !default;
+
+$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
+$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
+$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
+$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})" !default;
+$hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;
+
+// Text fluid
+$range : $large-screen - $small-screen !default;
+$intervals: 20 !default;
+$interval-size: $range / $intervals !default; 
+
+/*** Forms ***/
+// Text Inputs + Textarea
+$input-border-color: color("grey", "darken-4") !default;
+$input-bg-color: #fff !default;
+$input-error-color: $error-color !default;
+$input-success-color: $success-color !default;
+$input-focus-color: $primary-color !default;
+$label-font-size: .8rem !default;
+$input-disabled-color: rgba(0,0,0, .46) !default;
+$input-disabled-solid-color: #BDBDBD !default;
+
+// Radio Buttons
+$radio-fill-color: $primary-color !default;
+$radio-empty-color: #5a5a5a !default; 
+
+// Switches
+$switch-bg-color: $secondary-color !default;
+$switch-checked-lever-bg: desaturate(lighten($secondary-color, 25%), 25%) !default;
+$switch-unchecked-bg: #F1F1F1 !default;
+$switch-unchecked-lever-bg: #818181 !default;
+
+/*** Buttons ***/
+$button-bg-color-disabled: #DFDFDF !default;
+$button-color: $secondary-color !default;
+$button-color-disabled: #9F9F9F !default;
+$button-color-flat: #343434 !default;
+$button-color-raised: #fff !default;
+$button-floating-size: 37px !default;
+$button-height: 36px !default;
+$button-font-size-shared: 1.3rem !default;
+$button-large-icon-font-size: 1.6rem !default; 
+$button-line-height: 36px !default;
+
+// Grid Variables
+$num-cols: 12 !default;
+$gutter-width: 1.5rem !default;
+$element-top-margin: $gutter-width/3 !default;
+$element-bottom-margin: ($gutter-width*2)/3 !default;
+
+/*** Dropdown ***/
+$dropdown-bg-color: #fff !default;
+$dropdown-hover-bg-color: #eee !default;
+$dropdown-color: $primary-color !default;
+$dropdown-item-height: 50px !default;
+
+/*** Tabs ***/
+$tabs-underline-color: $primary-color-light !default;
+$tabs-text-color: $primary-color !default;
+$tabs-bg-color: #fff !default;
+
+// Date Picker
+$datepicker-weekday-bg: darken($primary-color, 7%) !default;
+$datepicker-date-bg: $primary-color !default;
+$datepicker-year: rgba(255, 255, 255, .4) !default;
+$datepicker-focus: rgba(0,0,0, .05) !default;
+$datepicker-selected: $primary-color !default;
+$datepicker-selected-outfocus: desaturate(lighten($primary-color, 35%), 15%) !default;
--- a/routes/html-routes.js
+++ b/routes/html-routes.js
@ -3,11 +3,11 @@ var routeHelpers = require('../helpers/routeHelpers.js');
 var lbryApi = require('../helpers/lbryApi.js');

 module.exports = function(app){
-	// route to fetch one free public claim 
-	app.get("/favicon.ico", function(req, res){
-		console.log(" >> GET request on favicon.ico");
-		res.sendFile(path.join(__dirname, '../public/assets/img', 'favicon.ico'));
-	});
+	// route for favicon
+	// app.get("/favicon.ico", function(req, res){
+	// 	console.log(" >> GET request on favicon.ico");
+	// 	res.sendFile(path.join(__dirname, '../public/assets/img', 'favicon.ico'));
+	// });
 	// route to fetch one free public claim 
 	app.get("/:name/all", function(req, res){
 		console.log(">> GET request on /" + req.params.name + " (all)");
--- a/views/allClaims.handlebars
+++ b/views/allClaims.handlebars
@ -1,12 +1,18 @@
-<h3>All Claims</h3>
-<p>These are all the free, public assets at that claim.  You can publish more at <a href="/">spee.ch</a>.</p>
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-md-6 col-md-offset-3">
+			<h3>All Claims</h3>
+			<p>These are all the free, public assets at that claim.  You can publish more at <a href="/">spee.ch</a>.</p>

-{{#each claims}}
-	<hr>
-	<img class="all-claims-img" src="https://spee.ch/{{this.name}}/{{this.claim_id}}" />
-	<p>claim_id: {{this.claim_id}}</p>
-	<p>direct link <a href="https://spee.ch/{{this.name}}/{{this.claim_id}}">here</a></p>
-	<p>author: {{this.value.stream.metadata.author}}</p>
-	<p>description: {{this.value.stream.metadata.description}}</p>
-	<p>license: {{this.value.stream.metadata.license}}</p>
-{{/each}}
+			{{#each claims}}
+				<hr>
+				<img class="all-claims-img" src="https://spee.ch/{{this.name}}/{{this.claim_id}}" />
+				<p>claim_id: {{this.claim_id}}</p>
+				<p>direct link <a href="https://spee.ch/{{this.name}}/{{this.claim_id}}">here</a></p>
+				<p>author: {{this.value.stream.metadata.author}}</p>
+				<p>description: {{this.value.stream.metadata.description}}</p>
+				<p>license: {{this.value.stream.metadata.license}}</p>
+			{{/each}}
+		</div>
+	</div>
+</div>
--- a/views/index.handlebars
+++ b/views/index.handlebars
@ -1,12 +1,28 @@
-<h1>spee.ch</h1>
-<p>spee.ch is a single-serving site that reads and publishes images to and from the <a href="https://lbry.io">LBRY</a> blockchain.</p>
-
-{{> examples}}
-{{> publish}}
-{{> links}}
-{{> documentation}}
-{{> contribute}}
-{{> bugs}}
+<div class="container">
+	<div class="row">
+		<div class="col-md-12">
+			<div class="card">
+				<div class="card-title card-block default-color-dark white-text">
+					<h1>Spee.ch</h1>
+				</div>
+				<div class="card-block">
+					<p>Spee.ch is a single-serving site that reads and publishes images to and from the <a href="https://lbry.io">LBRY</a> blockchain.</p>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="row">
+		{{> examples}}
+		{{> publish}}
+	</div>
+	<div class="row">
+		{{> documentation}}
+	</div>
+	<div class="row">
+		{{> contribute}}
+		{{> bugs}}
+	</div>
+</div>

 <script src="/socket.io/socket.io.js"></script>
 <script src="/siofu/client.js"></script>
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@ -2,12 +2,27 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<link rel="stylesheet" href="/assets/css/style.css" type="text/css">
 	<title>Spee.ch</title>
+	<!-- Font Awesome -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
+    <!-- Bootstrap core CSS -->
+    <link href="/vendors/MDB/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Material Design Bootstrap -->
+    <link href="/vendors/MDB/css/mdb.min.css" rel="stylesheet">
+	<!-- custom styles -->
+	<link rel="stylesheet" href="/assets/css/style.css" type="text/css">
 </head>
 <body>
 	{{{ body }}}
+	<!-- JQuery -->
+	<script type="text/javascript" src="/vendors/MDB/js/jquery-3.1.1.min.js"></script>
+    <!-- Bootstrap tooltips -->
+    <script type="text/javascript" src="/vendors/MDB/js/tether.min.js"></script>
+    <!-- Bootstrap core JavaScript -->
+    <script type="text/javascript" src="/vendors/MDB/js/bootstrap.min.js"></script>
+    <!-- MDB core JavaScript -->
+    <script type="text/javascript" src="/vendors/MDB/js/mdb.min.js"></script>
 </body>
 </html>
--- a/views/partials/about.handlebars
+++ b/views/partials/about.handlebars
@ -0,0 +1,16 @@
+<div class="col-md-12">
+	<div class="card" id="about">
+		<div class="card-block">
+			<div class="row">
+				<div class="col-md-6">
+					<h4>Retrieving</h4>
+					<p>Spee.ch is a means by which you can retrieve free, public media assets that are on the LBRY blockchain. You can use Spee.ch urls to retrieve an asset directly in other websites. For example, you could use:<code>&ltimg src="https://spee.ch/example" /&gt</code></p>
+				</div>
+				<div class="col-md-6">
+					<h4>Publishing</h4>
+					<p>Spee.ch is an application that allows you to publish free, public media assets -- such as images, videos, and music -- to the LBRY blockchain.</p>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/views/partials/bugs.handlebars
+++ b/views/partials/bugs.handlebars
@ -1,7 +1,8 @@
-<div id="bugs">
-	<h2>Bugs</h2>
-	<p>Spee.ch is young and under continuous development so it will have bugs.  Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
-	<br>&nbsp;.w.
-	<br>(o|o)
-	<br>&nbsp;&nbsp;`'`
+<div class="col-md-6">
+	<div class="card card-block" id="bugs">
+		<div class="card-title">
+			<h2>Bugs</h2>
+		</div>
+		<p>Spee.ch is young and under continuous development so it will have bugs.  Please leave an issue on our <a href="https://github.com/lbryio/spee.ch">github</a> if you experience a problem or have suggestions.</p>
+	</div>
 </div>
--- a/views/partials/contribute.handlebars
+++ b/views/partials/contribute.handlebars
@ -1,4 +1,6 @@
-<div id="contribute">
-	<h2>Contribute</h2>
-	<p>If you would like to help make spee.ch amazing, join our slack channel!</p>
+<div class="col-md-6">
+	<div class="card card-block" id="contribute">
+		<div class="card-title"><h2>Contribute</h2></div>
+		<p>If you would like to help make Spee.ch amazing, join our <a href="https://lbry.slack.com">slack</a> channel!</p>
+	</div>
 </div>
--- a/views/partials/documentation.handlebars
+++ b/views/partials/documentation.handlebars
@ -1,39 +1,49 @@
-<div id="documentation">
-	<h2>Documentation</h2>
-	<h3>Site Navigation</h3>
-	<ul>
-		<li><strong><a href="/">spee.ch</a></strong>
-			<ul>
-				<li>To publish a file, navigate to the homepage.</li>
-			</ul>
-		</li>
-		<li><strong>spee.ch/&ltthe name of the claim&gt</strong>
-			<ul>
-				<li>To view the file with the largest bid at a claim.</li>
-				<li>E.g. <a href="/doitlive">spee.ch/doitlive</a>.</li>
-			</ul>
-		</li>
-		<li><strong>spee.ch/&lt the name of the claim &gt/&lt the claim_id &gt</strong>
-			<ul>
-				<li>To view a specific file at a claim</li>
-				<li>E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
-			</ul>
-		</li>
-		<li><strong>spee.ch/&ltthe name of the claim&gt/all</strong>
-			<ul>
-				<li>To view a batch of files at a claim</li>
-				<li>E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>
-			</ul>
-		</li>
-	</ul>
-	<h3>API</h3>
-	<p>Note: these are being used for testing durring spee.ch development and may not be maintained</p>
-	<ul>
-		<li>A GET request to <strong>spee.ch/claim_list/&ltthe name of the claim&gt</strong> 
-			<ul>
-				<li>Will return the claim_list for the claim in json format. </li> 
-				<li>E.g. <a href="/claim_list/doitlive">spee.ch/claim_list/doitlive</a></li>
-			</ul>
-		</li>
-	</ul>
+<div class="col-md-12">
+	<div class="card" id="documentation">
+		<div class="card-title card-block default-color-dark white-text">
+			<h2>Documentation</h2>
+		</div>
+		<div class="row">
+			<div class="col-md-6">
+				<h3>Site Navigation</h3>
+				<ul>
+					<li><strong><a href="/">spee.ch</a></strong>
+						<ul>
+							<li>To publish a file, navigate to the homepage.</li>
+						</ul>
+					</li>
+					<li><strong>spee.ch/&ltthe name of the claim&gt</strong>
+						<ul>
+							<li>To view the file with the largest bid at a claim.</li>
+							<li>E.g. <a href="/doitlive">spee.ch/doitlive</a>.</li>
+						</ul>
+					</li>
+					<li><strong>spee.ch/&lt the name of the claim &gt/&lt the claim_id &gt</strong>
+						<ul>
+							<li>To view a specific file at a claim</li>
+							<li>E.g. <a href="/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5">spee.ch/doitlive/c496c8c55ed79816fec39e36a78645aa4458edb5</a></li>
+						</ul>
+					</li>
+					<li><strong>spee.ch/&ltthe name of the claim&gt/all</strong>
+						<ul>
+							<li>To view a batch of files at a claim</li>
+							<li>E.g. <a href="/doitlive/all">spee.ch/doitlive/all</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+			<div class="col-md-6">
+				<h3>API</h3>
+				<p>Note: these are being used for testing durring spee.ch development and may not be maintained</p>
+				<ul>
+					<li>A GET request to <strong>spee.ch/claim_list/&ltthe name of the claim&gt</strong> 
+						<ul>
+							<li>Will return the claim_list for the claim in json format. </li> 
+							<li>E.g. <a href="/claim_list/doitlive">spee.ch/claim_list/doitlive</a></li>
+						</ul>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</div>
 </div>
--- a/views/partials/examples.handlebars
+++ b/views/partials/examples.handlebars
@ -1,10 +1,16 @@
-<div id="examples">
-	<h2>Examples:</h2>
-	<ul>
-		<li><a href="/coconuts">spee.ch/coconuts</a></li>
-		<li><a href="/wood">spee.ch/wood</a></li>
-		<li><a href="/doitlive">spee.ch/doitlive</a></li>
-		<li><a href="/doitlive/all">spee.ch/doitlive/all</a></li>
-		<li><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
-	</ul>
+<div class="col-md-6">
+	<div class="card" id="examples">
+		<div class="card-title card-block default-color-dark white-text">
+			<h2>Examples</h2>
+		</div>
+		<div class="card-block">
+			<ul class="list">
+				<li class="list-square"><a href="/coconuts">spee.ch/coconuts</a></li>
+				<li class="list-square"><a href="/wood">spee.ch/wood</a></li>
+				<li class="list-square"><a href="/doitlive">spee.ch/doitlive</a></li>
+				<li class="list-square"><a href="/doitlive/all">spee.ch/doitlive/all</a></li>
+				<li class="list-square"><a href="/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0">spee.ch/doitlive/ca3023187e901df9e9aabd95d6ae09b6cc69b3f0</a></li>
+			</ul>
+		</div>
+	</div>
 </div>
--- a/views/partials/links.handlebars
+++ b/views/partials/links.handlebars
@ -1,6 +0,0 @@
-<div id="links">
-	<h2>Links</h2>
-	<a href="https://github.com/lbryio/spee.ch">github</a>
-	<a href="https://lbry.io/">lbry</a>
-	<a href="https://lbry.slack.com">slack</a>
-</div>
--- a/views/partials/publish.handlebars
+++ b/views/partials/publish.handlebars
@ -1,28 +1,32 @@
-<div id="publish">
-	<h2>Publish Your Own</h2>
-	<div id="publish-active-area">
-		<form id="publish-form" action="" method="" enctype="multipart/form-data">
-			<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
-				<p>Drag and drop your file here, or choose your file below.</p>
-				
-				<input type="file"  id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
-			</div>
-			<img id="image-preview" src="" height="200" alt="Image preview..."/>
-			<br/>
-			Name: <input type="text" id="publish-name" name="name" value="name"/>
-			<br/>
-			License: <select type="text" id="publish-license" name="license" value="license">
-				<option value="Public Domain">Public Domain</option>
-				<option value="Creative Commons">Creative Commons</option>
-			</select>
-			<br/>
-			NSFW: <select type="text" id="publish-nsfw" name="nsfw" value="false">
-				<option value="false">False</option>
-				<option value="true">True</option>
-			</select>
-			<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
-			<button id="publish-submit">Publish</button>
-			<button id="publish-reset">Reset</button>
-		</form>
+<div class="col-md-6">
+	<div class="card" id="publish">
+		<div class="card-title card-block default-color-dark white-text">
+			<h2>Publish Your Own</h2>
+		</div>
+		<div class="card-block" id="publish-active-area">
+			<form id="publish-form" action="" method="" enctype="multipart/form-data">
+				<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
+					<p>Drag and drop your file here, or choose your file below.</p>
+					
+					<input type="file"  id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
+				</div>
+				<img id="image-preview" src="" height="200" alt="Image preview..."/>
+				<br/>
+				Name: <input type="text" id="publish-name" name="name" value="name"/>
+				<br/>
+				License: <select type="text" id="publish-license" name="license" value="license">
+					<option value="Public Domain">Public Domain</option>
+					<option value="Creative Commons">Creative Commons</option>
+				</select>
+				<br/>
+				NSFW: <select type="text" id="publish-nsfw" name="nsfw" value="false">
+					<option value="false">False</option>
+					<option value="true">True</option>
+				</select>
+				<p><i>By clicking 'Publish' I attest that I have read and agree to the <a href="https://lbry.io/termsofservice" target="_blank">LBRY terms of service</a>.</i></p>
+				<button id="publish-submit">Publish</button>
+				<button id="publish-reset">Reset</button>
+			</form>
+		</div>
 	</div>
 </div>
				`@ -0,0 +1 @@`
				<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#fff"/><g fill="#fff"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#fff"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#fff"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#fff"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#fff"/><g><path id="Rectangle-11" fill="#fff" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#fff"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#fff" stroke-width="1.5"/><path fill="#fff" d="M106 21h5v1h-5z"/><path fill="#fff" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>