initial commit.

routes/root.js

+"use strict";
+
+const config = require('config');
+require('../models/schema');
+
+const redis = require('../helpers/redis');
+const express = require('express');
+const crypto = require('crypto');
+const router = express.Router();
+const mailer = require('../helpers/mailer');
+const _ = require('underscore');
+const qr = require('qr-image');
+
+router.get('/', (req, res) => {
+  res.render('index', { title: 'Spaces' });
+});
+
+router.get('/ping', (req, res) => {
+  res.status(200).json({"status": "ok"})
+});
+
+router.get('/spaces', (req, res) => {
+  res.render('spacedeck', { title: 'Spaces' });
+});
+
+router.get('/not_found', (req, res) => {
+  res.render('not_found', { title: 'Spaces' });
+});
+
+router.get('/confirm/:token', (req, res) => {
+  res.render('spacedeck', { title: 'Space' });
+});
+
+router.get('/folders/:id', (req, res) => {
+  res.render('spacedeck', {});
+});
+
+router.get('/signup', (req, res) => {
+  res.render('spacedeck', {});
+});
+
+router.get('/accept/:id', (req, res) => {
+  res.render('spacedeck', {});
+});
+
+router.get('/password-reset', (req, res) => {
+  res.render('spacedeck', { title: 'Signup' });
+});
+
+router.get('/password-confirm/:token', (req, res) => {
+  res.render('spacedeck', { title: 'Signup' });
+});
+
+router.get('/team', (req, res) => {
+  res.render('spacedeck');
+});
+
+router.get('/de/*', (req, res) => {
+  res.redirect("/t/de");
+});
+
+router.get('/de', (req, res) => {
+  res.redirect("/t/de");
+});
+
+router.get('/fr/*', (req, res) => {
+  res.redirect("/t/fr");
+});
+
+router.get('/fr', (req, res) => {
+  res.redirect("/t/fr");
+});
+
+router.get('/en/*', (req, res) => {
+  res.redirect("/t/en");
+});
+
+router.get('/en', (req, res) => {
+  res.redirect("/t/end");
+});
+
+router.get('/it', (req, res) => {
+  res.redirect("/t/en");
+});
+
+router.get('/account', (req, res) => {
+  res.render('spacedeck');
+});
+
+router.get('/login', (req, res) => {
+  res.render('spacedeck');
+});
+
+router.get('/logout', (req, res) => {
+  res.render('spacedeck');
+});
+
+router.get('/users/oauth2callback', (req, res) => {
+  res.render('spacedeck');
+});
+
+router.get('/contact', (req, res) => {
+  res.render('public/contact');
+});
+
+router.get('/about', (req, res) => {
+  res.render('public/about');
+});
+
+router.get('/terms', (req, res) => {
+  res.render('public/terms');
+});
+
+router.get('/privacy', (req, res) => {
+  res.render('public/privacy');
+});
+
+router.get('/t/:id', (req, res) => {
+  res.cookie('spacedeck_locale', req.params.id, { maxAge: 900000, httpOnly: true });
+  var path = "/";
+  if (req.query.r=="login" || req.query.r=="signup") {
+    path = "/"+req.query.r;
+  }
+  res.redirect(path);
+});
+
+router.get('/s/:token', (req, res) => {
+  redis.rateLimit(req.real_ip, "token", function(ok) {
+    if (ok) {
+      var token = req.params.token; 
+      if (token.split("-").length > 0) {
+        token = token.split("-")[0];
+      }
+
+      Space.findOne({"edit_hash": token}).exec(function (err, space) {
+        if (err) {
+          res.status(404).render('not_found', { title: 'Page Not Found.' });
+        } else {
+          if (space) {
+            if(req.accepts('text/html')){
+              res.redirect("/spaces/"+space._id + "?spaceAuth=" + token);
+            }else{
+              res.status(200).json(space);
+            }
+          } else {
+            if(req.accepts('text/html')){
+              res.status(404).render('not_found', { title: 'Page Not Found.' });
+            } else {
+              res.status(404).json({});
+            }
+          }
+        }
+      });
+    } else {
+      res.status(429).json({"error": "Too Many Requests"});
+    }
+  });
+});
+
+router.get('/spaces/:id', (req, res) => {
+  if (req.headers['user-agent']) {
+    if (req.headers['user-agent'].match(/facebook/)) {
+      Space.findOne({"_id": req.params.id }).exec(function (err, space) {
+        if (err) {
+          res.status(400).json(err);
+        } else {
+          if (space) {
+            if (space.access_mode == "public") {
+              Artifact.find({"space_id": req.params.id }).populate("creator").exec(function(err, artifacts) {
+                space.artifacts = artifacts;
+                res.render('facebook', { space: space });
+              });
+            } else {
+              res.redirect("/?error=space_not_accessible");
+            }
+          } else {
+            res.render('not_found', { title: 'Spaces' });
+          }
+        }
+      });
+    } else {
+      // not facebook, render javascript
+      res.render('spacedeck', { title: 'Space' });
+    }
+  } else res.render('spacedeck', { title: 'Space' });
+});
+
+router.get('/users/byteam/:team_id/join', (req, res) => {
+  if (!req.user) {
+    const q = {confirmation_token: req.query.confirmation_token, account_type: "email", team: req.params.team_id};
+    User.findOne(q,  (err, user) => {
+      if (err) {
+        res.status(400).json({"error":"session.users"});
+      } else {
+        if (user) {
+          crypto.randomBytes(48, function(ex, buf) {
+            const token = buf.toString('hex');
+
+            var session = {
+              token: token,
+              ip: req.ip,
+              device: "web",
+              created_at: new Date()
+            };
+
+            if (!user.sessions)
+              user.sessions = [];
+
+            user.sessions.push(session);
+            user.confirmed_at = new Date();
+            user.confirmation_token = null;
+
+            user.save(function(err, result) {
+              // FIXME
+              const secure = process.env.NODE_ENV == "production" || process.env.NODE_ENV == "staging";
+              const domain = (process.env.NODE_ENV == "production") ? ".spacedeck.com" : ".spacedecklocal.de";
+
+              res.cookie('sdsession', token, { domain: domain, httpOnly: true, secure: secure});
+              res.redirect("/spaces");
+            });
+          });
+        } else {
+          res.status(404).json({"error": "not found"});
+        }
+      }
+    });
+
+  } else {
+    res.redirect("/spaces");
+  }
+});
+
+router.get('/teams/:id/join', function(req, res, next) {
+  if (req.user) {
+    if (!req.user.team) {
+      Team.findOne({"_id": req.params.id}, function(err, team) {
+        if (team) {
+          const idx = team.invitation_codes.indexOf(req.query.code);
+          if (idx >= 0) {
+            const u = req.user;
+            u.team = team;
+
+            if(!u.confirmed_at) {
+              u.confirmed_at = new Date();
+            }
+            
+            u.payment_plan_key = team.payment_plan_key;
+            u.save(function(err) {
+              if (err) res.status(400).json(err);
+              else {
+                team.invitation_condes = team.invitation_codes.slice(idx);
+                team.save(function(err) {
+                  team.invitation_codes = null;
+
+                  var finish = function(team, users) {
+                    User.find({"_id": {"$in": team.admins}}).exec((err, admins) => {
+                      if(admins) {
+                        admins.forEach((admin) => {
+                          mailer.sendMail(
+                            admin.email,
+                            req.i18n.__("team_new_member_subject", team.name),
+                            req.i18n.__("team_new_member_body", u.email, team.name)
+                          );
+                        });
+                      }
+                    });
+                  }
+
+                  User.find({team: team}, function(err, users) {
+                    finish(team, users);
+                    res.redirect("/spaces");
+                  });
+                });
+              }
+            });
+          } else {
+            res.redirect("/spaces?error=team_code_notfound");
+          }
+        } else {
+          res.redirect("/spaces?error=team_notfound");
+        }
+      });
+    } else {
+      res.redirect("/spaces?error=team_already");
+    }
+  } else res.redirect("/login");
+});
+
+router.get('/qrcode/:id', function(req, res) {
+  Space.findOne({"_id": req.params.id}).exec(function(err, space) {
+    if (space) {
+      const url = config.get("endpoint") + "/s/"+space.edit_hash;
+      const code = qr.image(url, { type: 'svg' });
+      res.type('svg');
+      code.pipe(res);
+    } else {
+      res.status(404).json({
+        "error": "not_found"
+      });
+    }
+  });
+});
+
+module.exports = router;

styles/actions.scss

+@import "vars";
+@import "mixins";
+
+#header {
+  top: 0;
+  position: fixed;
+  width: 100%;
+  z-index: 1000;
+  padding: $gutter-b;
+  pointer-events: none;
+  border-bottom: 1px solid rgba(0,0,0,0.05);
+
+  .home {
+    margin-top: -20px;
+    margin-left: -20px;
+    .icon {
+      color: $dark;
+    }
+  }
+  .header-left,
+  .header-right {
+    pointer-events: auto;
+    position: relative;
+    z-index: 10;
+    > * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+
+  .header-center {
+    width: 100%;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    pointer-events: none;
+    > * {
+      pointer-events: auto;
+
+      font-size: 20px;
+      line-height: 44px;
+      color: $darker;
+      padding: 0 10px;
+    }
+  }
+
+  .header-left > * { margin-right: 10px; }
+  .header-right > * { margin-left: 5px; }
+
+  .title {
+    width: 100%;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    pointer-events: none;
+  }
+
+  h1 {
+    margin: 0;
+    height: 60px;
+    line-height: 60px;
+    font-size: $font-size*0.75;
+    font-weight: bold;
+    color: $medium;
+    display: inline-block;
+    margin-top: -14px;
+    pointer-events: all;
+    font-weight: normal;
+  }
+
+  .author {
+    float: left;
+    .btn {
+      margin-right: 10px;
+    }
+    .author-date {
+      opacity: 0.5;
+    }
+  }
+}
+
+.actions {
+  position: absolute;
+  top: 0;
+  @include transition( all 0.25s ease-in-out);
+  @include backface-visibility(hidden);
+  z-index: 3000;
+  opacity: 0;
+  pointer-events: none;
+  
+  .actions {
+    margin: 0;
+  }
+  
+  @include scale(0,0);
+  
+  &.left { left: 0;}
+  &.right { right: 0;}
+
+  &.in {
+    @include scale(1,1);
+    opacity: 1;
+    * {
+      pointer-events: auto;
+    }  
+  }
+}
+
+
+#global-actions {
+  margin: 10px;
+  text-align: center;
+  display: inline-block;
+  position: absolute;
+  white-space: nowrap;
+  left: 54px;
+  top: 0;
+  .btn {
+    padding: 0 8px;
+    &:first-child {padding-left: 20px; }
+    &:last-child {padding-right: 20px; }
+  }
+}
+
+#search-wrapper {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  .icon {
+    position: absolute;
+    right: 5px;
+    top: 0;
+  }
+  #search-input {
+    text-align: left;
+    @include transition( width 0.25s ease-in-out, background-color 0.25s ease-in-out);
+      width: 100px;
+    &:focus {
+      width: 250px;
+    }
+  }
+}
+
+#home-actions {
+  width: 100%;
+  img {
+    margin: auto;
+    display: block;
+    opacity: 0.1;
+    margin-top: 6px;
+  }
+}
+
+#no-profile-actions,
+#profile-actions {
+  right: 0;
+}
+
+#user-actions {
+  #profile-toggle {
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+#space-actions {
+  right: 0;
+  .btn {
+    text-transform: uppercase;
+  }
+  #space-version {
+    position: absolute;
+    right: 50px;
+  }
+  #space-pub-save {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    height: 44px;
+    .btn {
+      position: absolute;
+      right: 0;
+      top: 0;
+      @include perspective-origin(center right);
+    }
+  }
+}
\ No newline at end of file

styles/alerts.scss

+@import "vars";
+
+#alerts {
+  position: absolute;
+  height: auto;
+  width: auto;
+  display: inline-block;
+  bottom: 0px;
+  right: 0px;
+  left: 0px;
+  margin: 10px;
+  text-align: center;
+
+  z-index: 1200;
+  border-radius: 2px;
+
+  .alert-success:first-child:after {
+    border-bottom-color: #dff0d8;
+  }
+
+  .alert-info:first-child:after {
+    border-bottom-color: #d9edf7;
+
+  }
+
+  .alert-warning:first-child:after {
+    border-bottom-color: #fcf8e3;
+  }
+
+
+  .alert-danger:first-child:after {
+    border-bottom-color: #eed3d7;
+  }
+}
+
+.alert {
+  padding: 10px 30px 10px 20px;
+  border: none;
+  display: inline-block;
+  position: relative;
+  white-space: normal;
+  text-align: left;
+  border-radius: 3px;
+  font-weight: 600;
+  // &:first-child {
+  //   border-top-left-radius: 3px;
+  //   border-top-right-radius: 3px;
+  // }
+  // &:last-child {
+  //   border-bottom-left-radius: 3px;
+  //   border-bottom-right-radius: 3px;
+  // }
+  
+  .close {
+    float: none;
+    display: inline-block;
+    font-size: inherit;
+    line-height: inherit;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+  }
+  
+  p {
+    margin-top: 0px;
+    margin-bottom: 15px;
+    &:last-child { margin-bottom: 0px; }
+  }
+
+  > p + p {
+    margin-top: 15px;
+  }
+}
+
+.alert-success {
+  color: white;
+  background-color: #6bc36f;
+  border-color: #d6e9c6;
+  .alert-link {
+    color: white;
+  }
+}
+
+.alert-info {
+  color: white;
+  background-color: #4c9bd8;
+  border-color: #bce8f1;
+  .alert-link {
+    color: white;
+  }
+}
+
+.alert-warning {
+  color: $dark;
+  background-color: #ecc133;
+  border-color: #fbeed5;
+  .alert-link {
+    color: $dark;
+  }
+}
+
+.alert-danger {
+  color: white;
+  background-color: #c66554;
+  border-color: #eed3d7;
+  .alert-link {
+    color: white;
+  }
+}
\ No newline at end of file

styles/annotation.scss

+@import "vars";
+@import "mixins";
+
+.article-annotations {
+  display: none;
+  .disclaimer {
+    opacity: 0.5; 
+    font-size: 13px;
+    line-height: 20px;
+  }
+  
+  position: absolute;
+  top: 0;
+  left: 100%;
+  font-size: 13px;
+  line-height: 20px;
+  margin-left: 100px;
+
+  [contentEditable=true]{font-size: 13px; line-height: 20px; }
+
+  .annotation-item-body,
+  .annotation-reply-body {
+     /* Non standard for webkit */
+     word-break: break-word;
+
+    -webkit-hyphens: auto;
+       -moz-hyphens: auto;
+            hyphens: auto;
+  }
+
+  .annotation-group {
+    width: 250px;
+    margin-top: -2px;
+    .annotation-group-toggle {
+      position: absolute;
+      top: -15px;
+      right: 100%;
+      margin-right: 20px;
+      opacity: 0.25;
+    }
+
+    .annotation-item {
+      // border-bottom: 1px solid rgba(0,0,0,0.05);
+      margin-bottom: $gutter-a/3;
+      padding-bottom: $gutter-a/4;
+    }
+    .annotation-create-item,
+    .annotation-item {
+
+      .annotation-replies,
+      .annotation-item-body {
+        position: relative; 
+        margin-left: 44px;
+      }
+
+      .annotation-link { position: absolute; right: 0; top: 0; margin: -7px; opacity: 0.5;} 
+
+      .annotation-author { 
+        position: relative;
+        color: $dark;
+        font-weight: bold;
+        img { position: absolute; top: 0; right: 100%; margin-right: 11px; margin-top: 2px; pointer-events: none;}
+      }
+
+      .annotation-replies {
+        font-size: 11px;
+        line-height: 15px;
+
+        .annotation-create-reply,
+        .annotation-reply { 
+          margin-bottom: $gutter-a/3;
+
+          &:first-child {margin-top: $gutter-a/3; }
+          &:last-of-type {margin-bottom: 0px; }
+
+          .annotation-reply-body {
+            position: relative; 
+            margin-left: 37px;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

styles/artifact.scss

+@import "vars";
+@import "mixins";
+
+.artifact {
+  position: relative;
+  //-webkit-transform: translate3d(0,0,0); // hw accel
+
+  iframe {
+    width: 100% !important;
+    display: block;
+    max-height: 100%;
+  }
+
+  &.hide-text .text { opacity: 0 }
+
+  &.locked.selected {
+    box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.5) !important;
+  }
+
+  .placeholder {
+    .btn {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: -22px;
+    }
+  }
+
+  /*&.artifact-text.text-blank [contentEditable=true]:not(.text-editing) p:first-child::after {
+    content: "Double click to edit";
+    opacity: 0.25;
+  }
+
+  &.artifact-text.text-blank [contentEditable=true].text-editing p:first-child::after {
+    content: "Type here";
+    opacity: 0.25;
+  }*/
+
+  &.artifact-text.text-blank p:first-child br {
+    display: none;
+  }
+
+  .link-wrapper {
+    position: absolute;
+    width: 100%;
+    top: 100%;
+    display: block;
+    text-align: center;
+    max-width: 100%;
+    overflow-x: hidden;
+    margin-top: -3em;
+  }
+
+  .edit {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+
+  .ios-focuser {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    opacity: 0;
+    z-index: 0;
+  }
+
+  .text {
+    overflow: hidden;
+    width: auto;
+    height: auto;
+    height: 100%;
+    //pointer-events: none;
+
+    // handle glyphs that go beyond text box sides
+    // padding-left: 20px; margin-left: -20px;
+    // padding-right: 20px; margin-right: -20px;
+
+    //> * {pointer-events: auto; }
+
+  }
+
+  &:not(.artifact-text) {
+    // this collapses empty captions of images, media etc
+    // but doesn't collapse empty notes
+    .text-column:not(.text-editing):empty {
+      display: none !important;
+    }
+  }
+
+  &.x-spacedeck-shape .clip {
+    height: 100%;
+  }
+
+  .shape {
+    position: absolute;
+  }
+
+  .text-table {
+    display: table;
+    width: 100%;
+    height: 100%;
+    .text-cell {
+      display: table-cell;
+      position: relative;
+      height: 100%;
+
+      .text-column {
+        width: 100%;
+        -webkit-line-break: after-white-space;
+        display: block;
+        word-wrap: break-word;
+
+        line-height: 1.5em;
+        font-size: $font-size;
+
+        &.text-editing {
+          min-height: $font-size;
+
+          // without this, there is no text editing in safari
+          -webkit-user-select: auto;
+          -moz-user-select: auto;
+          user-select: auto;
+          pointer-events: auto;
+
+          * {
+            -webkit-user-select: auto;
+            -moz-user-select: auto;
+            user-select: auto;
+          }
+        }
+
+        p:last-child,
+        ul:last-child {
+          margin-bottom: 0em !important;
+        }
+
+        h1,
+        h2,
+        li {
+          margin-top: 0;
+          margin-bottom: 0.5em;
+          &:last-child {margin-bottom: 0em !important; }
+        }
+
+        h1 {
+          line-height: 1.1; // legacy
+        }
+
+        h2 {
+          font-size: 40px; // legacy
+          line-height: 1.1;
+        }
+
+        h3 {
+          font-size: 30px; // legacy
+          line-height: 1.1;
+        }
+
+        h4 {
+          font-size: 20px; // legacy
+          line-height: 1.1;
+        }
+
+        blockquote {
+          // legacy
+          font-size: inherit;
+          font-weight: inherit;
+          margin-left: 20px;
+          margin-right: 20px;
+        }
+
+        h3,
+        h4,
+        h5,
+        ul,
+        p {
+          margin-top: 0;
+          margin-bottom: 0.5em; // compatibility to old system
+          &:last-child {margin-bottom: 0em !important; }
+        }
+
+        a {pointer-events: none; }
+
+        ol {
+          padding: 0;
+          counter-reset: list-counter;
+
+          li {
+            list-style: none;
+            position: relative;
+            padding-left: 1em;
+            counter-increment: list-counter;
+            font-size: inherit;
+
+            &:before {
+              color: inherit;
+              top: 0;
+              left: 0;
+              content: counter(list-counter);
+              position: absolute;
+            }
+          }
+        }
+
+        ul {
+          padding: 0;
+          li {
+            list-style: none;
+            position: relative;
+            padding-left: 1em;
+            font-size: inherit;
+
+            &:before {
+              color: inherit;
+              top: 0;
+              left: 0;
+              content: "\2022";
+              position: absolute;
+            }
+          }
+        }
+
+        li,
+        p {
+          -webkit-hyphens: auto;
+          -moz-hyphens: auto;
+          -ms-hyphens: auto;
+          -o-hyphens: auto;
+          hyphens: auto;
+        }
+
+        * {
+          -webkit-backface-visibility: visible;
+          -moz-backface-visibility: visible;
+          -ms-backface-visibility: visible;
+          backface-visibility: visible;
+        }
+
+        > * {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .oembed,
+  div[class*='oembed-'] {
+    height: 100%;
+    .play {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin: -30px;
+      z-index: 100;
+      background-color: $light !important;
+      color: $darker !important;
+    }
+    .meta {
+      padding-top: 10px;
+      font-size: 10px;
+      display: block;
+      position: absolute;
+      top: 100%;
+      width: 100%;
+      z-index: 100;
+      color: $medium;
+      text-align: left;
+
+      .link {
+        position: absolute;
+        left: -12px;
+        bottom: -4px;
+      }
+      .description {
+        padding-left: 28px;
+        display: block;
+      }
+    }
+    iframe {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    &:not(.interactive) {
+      iframe {
+        pointer-events: none;
+      }
+    }
+    
+    .title {font-size: 20px; }
+    .image {
+      height: auto;
+      top: 0;
+      bottom: 0px;
+      position: absolute;
+      width: 100%;
+    }
+    .interact {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-left: -30px;
+      margin-top: -30px;
+    }
+  }
+
+  .image {
+    height: 100%;
+    background-position: center top;
+    background-size: cover;
+    background-repeat: no-repeat;
+
+    video {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .video   {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+
+    .title {
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      z-index: 1;
+      color: $medium;
+      background-color: white;
+      display: block;
+      width: 100%;
+      padding: 10px 15px;
+      font-size: 10px;
+    }
+    
+    video {
+      width: 100%;
+      height: 100%;
+    }
+
+    .tl-controls {
+      position: absolute;
+      bottom: 10px;
+      left: 10px;
+      right: 10px;
+      text-align: center;
+
+      .btn {
+        margin-top: 20px;
+
+      }
+    }
+
+  }
+
+  // FIXME: fix later
+  /*&.vector {
+    pointer-events: none;
+    div, svg {
+      pointer-events: none;
+    }
+
+    svg * {
+      pointer-events: painted;
+    }
+  }*/
+
+  .audio {
+    height: 100%;
+    .timeline {
+      position: absolute;
+      left:0;
+      top:0;
+      width: 100%;
+      bottom: 54px;
+      background-size: 100% 100%;
+      cursor: crosshair;
+      margin-bottom: 10px;
+      overflow: hidden;
+
+      .tl-current-time {
+        height:100%;
+        background: white;
+        opacity: 0.5;
+        border-right: 1px solid #888;
+
+        //transition: width 0.05s linear;
+      }
+
+      .tl-inpoint {
+        width: 1px;
+        bottom: 0px;
+        background: #333;
+        position: absolute;
+        top: 0px;
+        z-index: 1;
+      }
+
+      .tl-outpoint {
+        width: 1px;
+        bottom: 0px;
+        background: #333;
+        position: absolute;
+        top: 0px;
+        z-index: 2;
+      }
+    }
+
+    .tl-controls {
+      position: absolute;
+      bottom: 10px;
+      left: 10px;
+      right: 10px;
+      text-align: center;
+
+      .btn {
+        margin-top: 20px;
+
+      }
+    }
+
+    .tl-title {
+      margin-left:10px;
+      max-width: 55%;
+      overflow: hidden;
+      display: inline-block;
+      max-height: 2em;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-top: -18px;
+      margin-bottom: -18px;
+      margin-right: 10px;
+    }
+
+    .tl-times {
+    }
+  }
+
+  img {
+    // pointer-events:none;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.bold          { font-weight: bold;}
+  &.italic        { font-style: italic;}
+  &.underline     { text-decoration: underline;}
+  &.strike        { text-decoration: line-through;}
+
+  &.align-top     .text-cell {vertical-align: top;}
+  &.align-middle  .text-cell {vertical-align: middle;}
+  &.align-bottom  .text-cell {vertical-align: bottom;}
+
+  &.align-left    { text-align: left; }
+  &.align-center  { text-align: center; }
+  &.align-right   { text-align: right; }
+  &.align-justify { text-align: justify; }
+
+  audio {
+    width: 100%;
+  }
+}
+
+.board .artifact {
+  position: absolute;
+  color: black;
+  //@include user-select(none);
+  white-space: normal;
+  font-size: 18px;
+
+  &.artifact-zone {
+    border: 1px solid rgba(46,204,113,1);
+    background-color: rgba(46,204,113,0.025);
+    border-radius: 10px;
+    &:after {display: none; }
+    .shape {display: none; }
+    .zone {
+      height: 100%;
+    }
+  }
+}
+
+body.present-mode {
+  #space {
+    .artifact-zone {
+      display: none;
+    }
+    .artifact  {
+      cursor: default !important;
+      .text a { pointer-events: auto !important; }
+    }
+  }
+}
+
+body:not(.present-mode) {
+
+  #space {
+
+    .Medium {
+      cursor: text;
+    }
+    
+    .artifact {
+
+      &.selected.text-editing,
+      &.text-editing {
+        cursor: text;
+
+        &:before {
+          border: 1px solid rgba(255,255,255,0.25);
+        }
+        &:after {
+          border: 1px dotted rgba(40,140,215,0.5);
+          background-color: transparent !important;
+        }
+      }
+
+      &.selected {
+        cursor: -webkit-grab;
+        cursor: -moz-grab;
+        &:active {
+          cursor: -webkit-grabbing;
+          cursor: -moz-grabbing;
+        }
+
+        &:not(.artifact-vector):after {
+          border: 1px solid rgba(40,140,215,1);
+          // overlay color removed for now (messes with colors)
+          //background-color: rgba(40,140,215,0.35);
+        }
+      }
+
+    }
+  }
+}
+
+.mouse-scribble, .tool-scribble, .tool-line, .tool-arrow {
+  cursor: crosshair !important;
+
+  .artifact {
+    pointer-events: none !important;
+  }
+
+  .artifact:after, .artifact:before {
+    display: none !important;
+  }
+}
+
+.tool-pan {
+  cursor: grab !important;
+}
+
+.artifact.state-idle {
+  .progress, .progress-text {
+    display: none;
+  }
+}
+
+.artifact.state-processing, .artifact.state-uploading {
+  .progress {
+    height: 100%;
+    padding: 10px;
+    
+    background-color: $blue;
+    opacity: 0.9;
+    text-align: center;
+  }
+  .progress-text {
+    text-align: center;
+    padding: 8px;
+    width: 100%;
+    
+    position: absolute;
+    left: 0px;
+    top: 0px;
+
+    color: #888;
+    font-size: 10px;
+  }
+  video, audio, .tl-controls, .timeline {
+    display: none;
+  }
+  
+  
+  background-color: white;
+}
+
+.state-processing .spinner {
+  opacity: 1;
+  background-image: url('/images/hourglass.gif');
+}
+
+.state-uploading .spinner {
+  opacity: 0.8;
+  background-image: url('/images/hourglass.gif');
+}
+
+.state-idle .spinner {
+  display: none;
+}
+
+
+.artifact.image {
+  background-color: transparent;
+  &.state-loading { background-color: rgba(40,140,215,0.05);}
+  &.state-processing { background-color: rgba(107,195,111,0.05);}
+}
+
+.spinner {
+  height:44px;
+  width:44px;
+  position:absolute;
+  top: 50%;
+  left: 50%;
+  margin: -22px;
+  border-radius:100%;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+#pick-mobile {
+  img {
+    width: 200px;
+  }
+  
+  .artifact {
+    display: block;
+    width: 200px;
+    height: 150px;
+    float: left;
+
+    font-size: 14px;
+    line-height: 20px;
+
+    .text {
+      padding: 10px;
+    }
+  }
+
+  .spinner {
+    display: none !important;
+  }
+
+  .video {
+    height: 100%;
+  }
+}
+
+// fix player button offset
+.icon-controls-play:before {
+  line-height: 40px !important;
+  left: 1px !important;
+}

styles/audio.scss

+@import "vars";
+@import "mixins";
+
+audio {
+  -webkit-appearance:none;
+  width: 100%;
+  height: 60px;
+}
+
+audio::-webkit-media-controls {
+  width: inherit;
+  height: inherit;
+  position: relative;
+  direction: ltr;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+audio::-webkit-media-controls-enclosure {
+  width: 100%;
+  height: 60px;
+  flex-shrink: 0;
+  bottom: 0px;
+  text-indent: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+audio::-webkit-media-controls-panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  -webkit-user-select: none;
+  position: relative;
+  width: 100%;
+  z-index: 0;
+  overflow: hidden;
+  text-align: right;
+  bottom: auto;
+  height: 60px;
+  background-color: rgba(20, 20, 20, 0.8);
+  background-color: $dark;
+  border-radius: $radius;
+  color: $light;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
+}
+
+input[type="range"]::-webkit-media-slider-thumb {
+  margin-left: -7px;
+  margin-right: -7px;
+}
+
+input[type="range"]::-webkit-slider-thumb, 
+input[type="range"]::-webkit-media-slider-thumb {
+  -webkit-appearance: sliderthumb-horizontal;
+  box-sizing: border-box;
+  display: block;
+  -webkit-user-modify: read-only;
+}
+
+input[type="range"]::-webkit-media-slider-container > div {
+  margin-right: -14px;
+}
+
+audio::-webkit-media-slider-container,
+input[type="range"]::-webkit-media-slider-container {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  border: none !important;
+  border-image-source: initial;
+  border-image-slice: initial;
+  border-image-width: initial;
+  border-image-outset: initial;
+  border-image-repeat: initial;
+  border-radius: 0 !important;
+  background-color: transparent;
+
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+  flex: 1 1 0px;
+  align-self: center;
+  box-sizing: border-box;
+  display: block;
+  -webkit-user-modify: read-only;
+}
+
+audio::-webkit-media-controls-mute-button {
+  -webkit-appearance: media-mute-button;
+  display: flex;
+  flex: 0 0 auto;
+  border: none;
+  border-image-source: initial;
+  border-image-slice: initial;
+  border-image-width: initial;
+  border-image-outset: initial;
+  border-image-repeat: initial;
+  box-sizing: border-box;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  margin: 0px;
+  padding: 0px;
+  background-color: initial;
+  color: inherit;
+}
+
+audio::-webkit-media-controls-play-button {
+  -webkit-appearance: media-play-button;
+  display: flex;
+  flex: 0 0 auto;
+  border: none;
+  border-image-source: initial;
+  border-image-slice: initial;
+  border-image-width: initial;
+  border-image-outset: initial;
+  border-image-repeat: initial;
+  box-sizing: border-box;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  margin-left: 0px;
+  margin-right: 9px;
+  padding: 0px;
+  background-color: initial;
+  color: inherit;
+}
+
+audio::-webkit-media-controls-timeline-container {}
+audio::-webkit-media-controls-current-time-display {}
+audio::-webkit-media-controls-time-remaining-display {}
+
+audio::-webkit-media-controls-current-time-display, 
+video::-webkit-media-controls-current-time-display, 
+audio::-webkit-media-controls-time-remaining-display, 
+video::-webkit-media-controls-time-remaining-display {
+  -webkit-appearance: media-current-time-display;
+  -webkit-user-select: none;
+  flex: 0 0 auto;
+  display: flex;
+  border: none;
+  border-image-source: initial;
+  border-image-slice: initial;
+  border-image-width: initial;
+  border-image-outset: initial;
+  border-image-repeat: initial;
+  cursor: default;
+  height: 60px;
+  margin: 0px 9px 0px 0px;
+  padding: 0px;
+  line-height: 60px;
+  font-family: $main-font;
+  font-size: $font-size;
+  font-weight: normal;
+  font-style: normal;
+  color: $medium;
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0px;
+  text-shadow: none;
+  text-decoration: none;
+}
+
+audio::-webkit-media-controls-timeline, 
+video::-webkit-media-controls-timeline {
+  -webkit-appearance: media-slider;
+  display: flex;
+  flex: 1 1 auto;
+  height: 60px;
+  margin: 0px 15px 0px 0px;
+  padding: 0px;
+  background-color: transparent;
+  min-width: 60px;
+  border: initial;
+  color: inherit;
+  border-radius: 0 !important;
+}
+
+audio::-webkit-media-controls-volume-slider-container {}
+
+audio::-webkit-media-controls-volume-slider {}
+
+audio::-webkit-media-controls-seek-back-button {}
+
+audio::-webkit-media-controls-seek-forward-button {}
+
+audio::-webkit-media-controls-fullscreen-button {}
+
+audio::-webkit-media-controls-rewind-button {}
+
+audio::-webkit-media-controls-return-to-realtime-button {}
+
+audio::-webkit-media-controls-toggle-closed-captions-button {}

styles/author.scss

+@import "vars";
+
+.author {
+  position: relative;
+  padding-top: 7px;
+  padding-right: 15px;
+  padding-left: 60px;
+  margin-left: -60px;
+  margin-right: -25px;
+  border-top: 1px solid rgba(255,255,255,0.05) !important;
+  
+  .author-avatar {
+    background-color: $blue;
+    font-family: $main-font;
+    color: white;
+    display: inline-block;
+    height: 30px;
+    width: 30px;
+    line-height: 30px;
+    text-align: center;
+    border-radius: $radius;
+    background-size: cover;
+    background-position: center;
+  }
+
+  .author-time,
+  .author-name {
+    font-weight: 300;
+    font-size: 10px;
+    line-height: 10px;
+    opacity: 0.5;
+    font-family: $main-font;
+  }
+  .author-time {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+  }
+}
+
+#chat .author-avatar{
+  position: absolute;
+  top: 14px;
+  left: 15px;
+}
\ No newline at end of file

styles/bounce.scss

+@-webkit-keyframes animation { 
+  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); }
+  1.666667% { -webkit-transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); }
+  3.333333% { -webkit-transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); }
+  5% { -webkit-transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); }
+  6.666667% { -webkit-transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); }
+  8.333333% { -webkit-transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); }
+  10% { -webkit-transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); }
+  11.666667% { -webkit-transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); }
+  13.333333% { -webkit-transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); }
+  15% { -webkit-transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); }
+  16.666667% { -webkit-transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); }
+  18.333333% { -webkit-transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); }
+  20% { -webkit-transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); }
+  21.666667% { -webkit-transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); }
+  23.333333% { -webkit-transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); }
+  25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); }
+  26.666667% { -webkit-transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); }
+  28.333333% { -webkit-transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); }
+  30% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); }
+  31.666667% { -webkit-transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); }
+  33.333333% { -webkit-transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); }
+  35% { -webkit-transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); }
+  36.666667% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); }
+  38.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); }
+  40% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); }
+  41.666667% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); }
+  43.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); }
+  45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); }
+  46.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); }
+  48.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); }
+  50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); }
+  51.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); }
+  53.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); }
+  55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); }
+  56.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); }
+  58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); }
+  60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); }
+  61.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); }
+  63.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
+  65% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); }
+  66.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); }
+  68.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); }
+  70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); }
+  71.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); }
+  73.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); }
+  75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); }
+  76.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
+  78.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); }
+  80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); }
+  81.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); }
+  83.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); }
+  85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); }
+  86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); }
+  88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); }
+  90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
+  98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
+  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
+}
+
+@keyframes animation { 
+  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 300, 0, 1); }
+  1.666667% { -webkit-transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); transform: matrix3d(4.25264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 221.78042, 0, 1); }
+  3.333333% { -webkit-transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); transform: matrix3d(4.39462, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 156.54763, 0, 1); }
+  5% { -webkit-transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); transform: matrix3d(3.48153, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 104.77835, 0, 1); }
+  6.666667% { -webkit-transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); transform: matrix3d(2.48225, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 65.49714, 0, 1); }
+  8.333333% { -webkit-transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); transform: matrix3d(1.73728, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 36.98954, 0, 1); }
+  10% { -webkit-transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); transform: matrix3d(1.28584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 17.27782, 0, 1); }
+  11.666667% { -webkit-transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); transform: matrix3d(1.05775, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 4.41711, 0, 1); }
+  13.333333% { -webkit-transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); transform: matrix3d(0.96701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.33838, 0, 1); }
+  15% { -webkit-transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); transform: matrix3d(0.94673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.45902, 0, 1); }
+  16.666667% { -webkit-transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); transform: matrix3d(0.95517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.12151, 0, 1); }
+  18.333333% { -webkit-transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); transform: matrix3d(0.97059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.22582, 0, 1); }
+  20% { -webkit-transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); transform: matrix3d(0.98394, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -8.43042, 0, 1); }
+  21.666667% { -webkit-transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); transform: matrix3d(0.99283, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.19481, 0, 1); }
+  23.333333% { -webkit-transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -5.82226, 0, 1); }
+  25% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -4.49867, 0, 1); }
+  26.666667% { -webkit-transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); transform: matrix3d(1.00073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.32573, 0, 1); }
+  28.333333% { -webkit-transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); transform: matrix3d(1.00076, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.34752, 0, 1); }
+  30% { -webkit-transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); transform: matrix3d(1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.57121, 0, 1); }
+  31.666667% { -webkit-transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); transform: matrix3d(1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.98217, 0, 1); }
+  33.333333% { -webkit-transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); transform: matrix3d(1.00017, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.55468, 0, 1); }
+  35% { -webkit-transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); transform: matrix3d(1.00006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.25909, 0, 1); }
+  36.666667% { -webkit-transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.06624, 0, 1); }
+  38.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.05006, 0, 1); }
+  40% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.11185, 0, 1); }
+  41.666667% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13678, 0, 1); }
+  43.333333% { -webkit-transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.13835, 0, 1); }
+  45% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.12642, 0, 1); }
+  46.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10789, 0, 1); }
+  48.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08731, 0, 1); }
+  50% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06746, 0, 1); }
+  51.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.04987, 0, 1); }
+  53.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.0352, 0, 1); }
+  55% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02356, 0, 1); }
+  56.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.01473, 0, 1); }
+  58.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00832, 0, 1); }
+  60% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00389, 0, 1); }
+  61.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00099, 0, 1); }
+  63.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
+  65% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00168, 0, 1); }
+  66.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00205, 0, 1); }
+  68.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00207, 0, 1); }
+  70% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0019, 0, 1); }
+  71.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00162, 0, 1); }
+  73.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00131, 0, 1); }
+  75% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00101, 0, 1); }
+  76.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00075, 0, 1); }
+  78.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00053, 0, 1); }
+  80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00035, 0, 1); }
+  81.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00022, 0, 1); }
+  83.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00012, 0, 1); }
+  85% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00006, 0, 1); }
+  86.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00001, 0, 1); }
+  88.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00001, 0, 1); }
+  90% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  91.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  93.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  95% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00003, 0, 1); }
+  96.666667% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
+  98.333333% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.00002, 0, 1); }
+  100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
+}
+
+

styles/button.scss

+@import "vars";
+@import "mixins";
+@import "unicode";
+
+.contrast-black { color: black !important;}
+.contrast-white { color: white !important;}
+
+.btn-group.colors {
+  .btn {
+    // padding: 4px;
+    // background-clip: content-box;
+    // padding-right: 2px;
+    // &:last-child {
+    //   padding-right: 4px;
+    // }
+    box-shadow: inset 0 0 30px 0px rgba(40,40,40,0.1);
+  }
+}
+
+.vertical {
+  .btn-divider {
+    min-width: 60px !important;
+    width: 60px !important;
+    min-height: 2px !important;
+    height: 2px !important;
+    margin: -1px 0;
+  }
+}
+.btn-divider {
+  min-width: 2px !important;
+  width: 2px !important;
+  padding: 0px !important;
+  background-color: rgba(140, 140, 140, 0.5) !important;
+  opacity: 0.25;
+  margin: 0 -1px;
+  z-index: 1000;
+  position: relative;
+}
+
+.btn {
+  //@include transition-transform( 0.1s 0s ease-in-out);
+  white-space: nowrap;
+  position: relative;
+  height: 60px;
+  min-width: 60px;
+  line-height: 60px;
+  padding: 0 20px;
+  font-size: 20px;
+  display: inline-block;
+  border: none;
+  outline: none;
+  border: none;
+  vertical-align: middle;
+  text-align: center;
+  background-size: cover;
+  background-position: center;
+  border-radius: $radius;
+  font-family: $main-font;
+  // text-transform: capitalize;
+
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  backface-visibility: hidden;
+  cursor: pointer;
+  background-color: $light;
+  color: $medium;;
+
+  @include user-select(none);
+  &:last-child {border: none;}
+  
+  &.active {
+    outline: none;
+
+    .jewel {
+      background-color: #fff !important;
+      border-color: #303030 !important;
+    }
+  }
+
+  input {display: none; }
+  
+  &.btn-link {
+    background-color: transparent;
+    color: $medium;;
+  }
+  
+  &.facebook {background-color: $facebook !important; color: white !important;}
+  &.twitter {background-color: $twitter !important; color: white !important; }
+
+  &.btn-round {
+    border-radius: 100px !important;
+  }
+
+  &.btn-rounded {
+    border-radius: 6px !important;
+  }
+
+  // &.close {
+  //   position: absolute;
+  //   top: 15px;
+  //   right: 15px;
+  //   z-index: 4000;
+  //   font-size: 40px;
+  // }
+
+  &.btn-nude {
+    min-width: 0 !important;
+    // font-size: inherit !important;
+    padding: 0 !important;
+    // height: auto !important;    
+    background-color: transparent;
+    color: $medium;
+  }
+
+  &.btn-nude + .btn-nude {
+    &:before {
+    content: "·";
+    margin: 0 3px;
+    color: rgba(0,0,0,0.3);
+    }
+  }
+
+  &.btn-stroke {
+    box-shadow: inset 0 0 0 1px $dark;
+    color: $dark !important;
+    background-color: transparent;
+    &:active {
+      box-shadow: inset 0 0 0 1px white;
+      color: white !important;
+    }
+  }
+
+  &.btn-stroke-darken {
+    //box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
+    border: 1px solid rgba(0,0,0,0.1);
+    color: $medium;
+    background-color: transparent;
+    &:active {
+      //box-shadow: inset 0 0 0 1px $dark;
+      border: 1px solid $dark;
+      color: $dark !important;
+    }
+
+    .icon {
+      margin-left: -0.5px;
+      margin-top: -1px;
+    }
+  }
+
+
+  &.btn-stroke-medium {
+    box-shadow: inset 0 0 0 1px $medium;
+    color: $medium !important;
+    background-color: transparent;
+    &:active {
+      box-shadow: inset 0 0 0 1px white;
+      color: white !important;
+    }
+  }
+
+
+  &.btn-stroke-light {
+    box-shadow: inset 0 0 0 1px $light;
+    color: $light !important;
+    background-color: transparent;
+    &:active {
+      box-shadow: inset 0 0 0 1px white;
+      color: white !important;
+    }
+  }
+
+  &.btn-stroke-light {
+    box-shadow: inset 0 0 0 1px $light;
+    color: $light !important;
+    background-color: transparent;
+  }
+
+  &.btn-primary {
+    background-color: $blue;
+    color: white !important;
+  }
+
+  &.btn-white {
+    background-color: white;
+    color: $dark !important;
+    &:active {
+      background-color: $darker !important;
+      color: $light !important;
+    }
+  }
+
+  &.btn-blue-light {
+    background-color: $blue-light;
+    color: white !important;
+    &:active {
+      background-color: $darker;
+    }
+  }
+
+  &.btn-blue {
+    background-color: $blue;
+    color: white !important;
+    &:active {
+      background-color: $darker;
+    }
+  }
+
+  &.btn-text-light {
+    background-color: transparent !important;
+    color: $light !important;
+    &:active {
+      color: $darker;
+    }
+  }
+
+  &.btn-text-blue {
+    background-color: transparent !important;
+    color: $blue !important;
+    font-weight: bold;
+    text-transform: uppercase;
+    &:active {
+      color: $darker;
+    }
+  }
+
+  &.btn-black {
+    background-color: $black;
+    color: $medium !important;
+    &:active {
+      background-color: $darker;
+    }
+  }
+
+  &.btn-yellow {
+    background-color: $yellow;
+    color: $dark !important;
+    &:active {
+      background-color: $darker;
+    }
+  }
+
+  &.btn-red {
+    background-color: $red;
+    color: white !important;
+    &:active {
+      background-color: $darker;
+    }
+  }
+
+  &.btn-green {
+    background-color: $green;
+    color: white !important;
+    &:active {
+      background-color: $darker;
+    }
+  }
+  
+  &.btn-disabled {
+    @include opacity(0.125);
+    pointer-events: none;
+  }
+  
+  &.btn-transparent {
+    background-color: transparent;
+    color: $medium;
+    &.active {color: $darker !important; }
+    &.open {color: white !important; }
+  }
+
+  &.btn-transparent-medium {
+    background-color: transparent;
+    color: $medium;
+  }
+
+  &.btn-transparent-dark {
+    background-color: transparent;
+    color: $dark;
+  }
+
+  &.btn-transparent-black {
+    background-color: transparent;
+    color: black;
+  }
+  
+  &.btn-light {
+    background-color: $light;
+    color: $medium;
+    &.active,
+    &:active {
+      color: $darker !important;
+    }
+  }
+
+  &.btn-lighten {
+    background-color: rgba(255,255,255,0.05);
+    color: $medium;
+  }
+
+  &.btn-soft {
+    background-color: rgba(245,245,245,0.95);
+    color: $medium;
+  }
+
+  &.btn-darken {
+    background-color: rgba(0,0,0,0.05);
+    // background-color: rgba(0,0,0,0.1);
+    color: $medium;
+    &.invert {
+      background-color: rgba(255,255,255,0.05);
+    }
+  }
+
+  &.btn-dark {
+    background-color: $dark ;
+    color: $medium;
+  }
+
+  &.btn-medium {
+    background-color: rgba(0,0,0,0.05);
+    color: $medium;
+  }
+
+  &.btn-darker {
+    background-color: $darker ;
+    color: $medium;
+  }
+
+  &.btn-dropdown {
+    text-align: left;
+    padding-right: 44px !important;
+    min-width: 0px !important;
+    &.btn-md {padding-right: 44px !important; }
+    &.btn-sm {padding-right: 32px !important; }
+      
+    &.btn-md { &:before, &:after { @include icon-md; } }
+    &.btn-sm { &:before, &:after { @include icon-sm; } }
+
+    &:before,
+    &:after {
+      @include icon;
+      position: absolute;
+      right: 4px;
+      top: -2px;
+      left: auto;
+      @include backface-visibility(hidden);
+      //@include transition-transform( 0.1s 0s ease-in-out);
+      width: 44px;
+      opacity: 0.5;
+    }
+
+    &:before {
+      @include scale(1,1);
+      @extend .icon-triangle-3-bottom:before;
+    }
+
+    &:after {
+      @include scale(0,0);
+      //@extend .icon-cross-2:before;
+    }
+
+    &.open {
+      &:before {
+        opacity: 0;
+        @include scale(0,0);
+      }
+      &:after {
+        opacity: 1;
+        @include scale(1,1);
+      }
+    }
+  }
+
+  &.btn-toggle-couple {
+    padding: 0;
+    @include clearfix;
+    @include transition-transform( 0.1s ease-in-out);
+    &:active { color: inherit !important; }
+    .btn-option {
+      &:before{
+        content: "";
+        display: block;
+        float: left;
+        padding-top: 100%; /* initial ratio of 1:1*/
+      }
+      &:first-child { margin-right: -7px}
+      &:last-child { margin-left: -7px}
+    }
+
+    &.invisible {
+      @include scale(0,0);
+    }
+
+    &.alt .btn-option {
+      &:first-child {
+        @include transition( all 0.1s 0s ease-in-out);
+        opacity: 1;
+      }
+      &:last-child {
+        @include transition( all 0.1s 0.1s ease-in-out);
+        opacity: 0.25;
+      }
+    }
+
+    
+    .btn-option {
+      &:first-child {
+        @include transition( all 0.1s 0.1s ease-in-out);
+        opacity: 0.25;
+      }
+      
+      &:last-child {
+        @include transition( all 0.1s 0s ease-in-out);
+        opacity: 1;
+      }
+
+      &:first-child.disabled,
+      &:last-child.disabled {
+        @include transition( all 0.1s 0s ease-in-out);
+      }
+    }
+  }
+
+  &.btn-toggle {
+    @include transition-transform( 0.1s ease-in-out);
+
+    &.invisible {
+      @include scale(0,0);
+    }
+
+    &.alt .btn-option {
+      &:first-child {
+        @include transition( all 0.1s 0s ease-in-out);
+        @include scale(0,0);
+      }
+      &:last-child {
+        @include transition( all 0.1s 0.1s ease-in-out);
+        @include scale(1,1);
+      }
+    }
+
+    
+    .btn-option {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+
+      &:first-child {
+        @include transition( all 0.1s 0.1s ease-in-out);
+        @include scale(1,1);
+      }
+      
+      &:last-child {
+        @include transition( all 0.1s 0s ease-in-out);
+        @include scale(0,0);
+      }
+
+      &:first-child.disabled,
+      &:last-child.disabled {
+        @include transition( all 0.1s 0s ease-in-out);
+        @include scale(0,0);
+      }
+    }
+  }
+
+  &.btn-icon-text {
+    white-space: nowrap;
+
+    .icon {
+      margin-left: -15px;
+      margin-top: -6px;
+      margin-right: -5px;
+    }
+    
+    padding-left: 16px !important;
+    padding-right: 10px !important;
+  }
+  
+  &.btn-icon {
+    padding: 0px !important;
+    font-weight: bold;
+    max-width: 60px;
+
+    &.btn-xl { max-width: 80px; }
+    &.btn-md { max-width: 44px; font-size: 20px !important; }
+    &.btn-sm { max-width: 38px; }
+    &.btn-xs { max-width: 24px; }
+
+    .icon {
+      line-height: 2.6; 
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+  &.btn-labeled-out {
+    .icon-label {
+      width: 100%;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      font-size: $font-size;
+      color: $medium;
+      margin-top: 10px;
+    }
+  }
+
+  &.btn-social {
+    position: relative;
+
+    &:hover .icon,
+    .number {
+      @include scale(0,0);
+      opacity: 0;
+    }
+
+    &:hover .number {
+      @include transition( all 0.1s 0.1s ease-in-out);
+      @include scale(1,1);
+      opacity: 1;
+    }
+
+    .number,
+    .icon {
+      @include transition( all 0.1s 0s ease-in-out);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  &.btn-md.btn-icon-labeled {
+    .icon:before {
+      line-height: 29px; 
+    }
+
+    .icon-label {
+      margin: 6px 0px;
+    }
+  }
+
+  &.btn-icon-labeled {
+    font-size: 0px;
+    min-width: 60px;
+
+    .letter,
+    .number,
+    .icon {
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    .jewel,
+    .letter,
+    .number,
+    .icon,
+    .icon-label {
+      transition: opacity 0.1s 0s ease-in-out, margin 0.1s 0s ease-in-out;
+      -webkit-transition: opacity 0.1s 0s ease-in-out, margin 0.1s 0s ease-in-out;
+    }
+
+    .letter {line-height: 42px; }
+    .icon:before {line-height: 42px; }
+    .icon-label {
+      font-size: 11px;
+      text-transform: capitalize;
+      text-align: center;
+      margin: 8px 0;
+      display: block;
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      width: 100%;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 0 0px;
+      font-weight: bold;
+    }
+
+    &.hover {
+      .letter, .number, .icon:before { line-height: 60px; }
+      .letter, .number, .icon:before { @include transition( line-height 0.1s 0s ease-in-out); }
+      .icon-label { opacity: 0; margin: 0; }
+
+      &:hover {
+        .icon-label { opacity: 1; margin: 8px 0; }
+        .letter, .number, .icon:before { line-height: 42px; } 
+      }
+
+      &.btn-xl {
+        .letter, .number, .icon:before { line-height: 60px; }
+        .icon-label { margin: 6px 0; }
+
+        &:hover {
+          .icon-label { opacity: 1; margin: 12px 0; }
+          .letter, .number, .icon:before { line-height: 60px; } 
+        }
+      }
+    }
+  }
+
+  &.btn-xxs {
+    min-width: 16px;
+    height: 16px;
+    line-height: 16px;
+    font-size: 10px;
+    padding: 0 5px;
+  }
+
+  &.btn-xs {
+    min-width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-size: 10px;
+    padding: 0 7px;
+  }
+
+  &.btn-sm {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 13px;
+    padding: 0 13px;
+  }
+
+  &.btn-md {
+    min-width: 44px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 15px;
+  }
+
+  &.btn-xl {
+    min-width: 80px;
+    height: 80px;
+    line-height: 80px;
+    padding: 0px 40px;
+    font-size: 25px;
+    text-transform: none;
+    font-weight: 400;
+  }
+
+  &.btn-xxl {
+    min-width: 140px;
+    height: 140px;
+    padding: 0px 60px;
+    font-size: 60px;
+    text-transform: none;
+    font-weight: 400;
+  }
+
+  &.btn-half,
+  &.btn-half .icon,
+  &.btn-half .icon:before {
+    min-width: 30px;
+    width: 30px;
+  }
+
+  &.btn-half.btn-sm,
+  &.btn-half.btn-sm .icon,
+  &.btn-half.btn-sm .icon:before {
+    min-width: 16px;
+    width: 16px;
+  }
+
+  &.btn-half.btn-md,
+  &.btn-half.btn-md .icon,
+  &.btn-half.btn-md .icon:before {
+    min-width: 22px;
+    width: 22px;
+  }
+
+  &.btn-half.btn-xl,
+  &.btn-half.btn-xl .icon,
+  &.btn-half.btn-xl .icon:before {
+    min-width: 40px;
+    width: 40px;
+  }
+
+  &.btn-xxl { .icon { @include icon-xxl; } }
+  &.btn-xl  { .icon { @include icon-xl; } }
+  &.btn-md  { .icon { @include icon-md; } }
+  &.btn-sm  { .icon { @include icon-sm; } }
+  &.btn-xs  { .icon { @include icon-xs; } }
+  &.btn-xxs { .icon { @include icon-xxs; } }
+
+  &.btn-block {
+    width: 100%;
+    display: block !important;
+    .icon-label {
+      display: block;
+    }
+  }
+}
+
+.btn-block + .btn-block {margin-top: 2px; }
+
+.btn-cluster {
+  font-size: 0;
+  @include clearfix();
+  
+  .icon {
+    width: 100%; 
+    &:after,
+    &:before {
+      width: 100%; 
+    }
+  }
+
+  > * {
+    border-radius: 0 !important;
+    background-clip: padding-box;
+    width: 100%;
+    float: left;
+
+    &:nth-last-child(2),
+    &:nth-child(2) {
+      width: 50%;
+    }
+
+    &:nth-last-child(2) { border-right: 1px solid rgba(0,0,0,0.025);}
+    &:nth-child(2) { border-left: 1px solid rgba(0,0,0,0.025);}
+
+    &:nth-last-child(3),
+    &:nth-child(2):nth-last-child(2),
+    &:nth-child(3) {width: 33.33333%; }
+
+    &:nth-last-child(3) {border-right: 1px solid rgba(0,0,0,0.025);}
+    &:nth-child(2):nth-last-child(2) {border-left: 1px solid rgba(0,0,0,0.025);border-right: 1px solid rgba(0,0,0,0.025);}
+    &:nth-child(3) {border-left: 1px solid rgba(0,0,0,0.025); }
+
+
+    &:nth-last-child(4),
+    &:nth-child(2):nth-last-child(3),
+    &:nth-child(3):nth-last-child(2),
+    &:nth-child(4) {width: 25%; }
+
+    &:nth-last-child(4) {border-right: 1px solid rgba(0,0,0,0.025);}
+    &:nth-child(3):nth-last-child(2),
+    &:nth-child(2):nth-last-child(3) {border-left: 1px solid rgba(0,0,0,0.025);border-right: 1px solid rgba(0,0,0,0.025);}
+    &:nth-child(4) {border-left: 1px solid rgba(0,0,0,0.025); }
+  }
+}
+
+
+.btn-follow.alt .icon {  color: $green !important;}
+.btn-like.alt .icon { color: $red !important; }
+
+.btn-checkbox {
+  &:active,
+  &.active {
+    .icon {
+      @include opacity(1);
+    } 
+  }
+  .icon {
+    @include opacity(0.3);
+  }
+}
+
+.btn-circle {
+  &.open {
+    .btn-group {
+      @include scale(1,1);
+      .btn {
+        @include scale(1,1);
+
+      }
+    }
+  }
+  .btn-group {
+    @include scale(0,0);
+    //@include transition( all 0.1s 0s ease-in-out);
+
+    position: absolute;
+    top: -100%;
+    left: -100%;
+    width: 350%;
+    height: 300%;
+    font-size: 0px;
+    margin-left: -12px;
+
+    .btn {
+      @include scale(0,0);
+      //@include transition( all 0.1s 0.05s ease-in-out);
+
+
+      margin: 0 4px;
+      &:first-child {
+        margin-left: 17.35%;
+      }
+      &:nth-last-child(2) {
+        margin-left: 17.35%;
+      }
+    }
+  }
+}
+
+// .btn-group + .btn-group {
+//   margin-left: 2px;
+// }
+
+// .btn-group + .btn {
+//   margin-left: 2px;
+// }
+
+
+.btn-group,
+.form-group {
+  .btn-prev,
+  .btn-less { bottom: 0; left: 0px; }
+  .btn-next,
+  .btn-more { bottom: 0; right: 0px;}
+}
+
+.btn-prev,
+.btn-next,
+.btn-more,
+.btn-less {
+  position: absolute !important;
+  opacity: 0.5;
+  min-width: 44px !important;
+  width: 44px;
+  &:before {
+    width: 44px !important;
+  }
+}
+
+.btn-more,
+.btn-less {
+  &:before {
+    margin-top: -8px;
+  }
+}
+
+.btn-more:before { @include icon; @include icon-md; @extend .icon-plus; }
+.btn-less:before { @include icon; @include icon-md; @extend .icon-minus; }
+
+.btn-prev:before { @include icon; @extend .icon-triangle-left;}
+.btn-next:before { @include icon; @extend .icon-triangle-right;}
+
+.dropdown-menu {
+  .btn-group {
+    > .btn {
+      border-radius: 0px;
+      &:first-child {
+        border-top-left-radius: $radius !important;
+        border-bottom-left-radius: $radius !important;
+      }
+      &:last-child {
+        border-top-right-radius: $radius !important;
+        border-bottom-right-radius: $radius !important;
+      }
+    }
+  }
+  &.vertical {
+    > .btn {
+      &:first-child {
+        border-top-left-radius: $radius !important;
+        border-top-right-radius: $radius !important;
+      }
+      &:last-child {
+        border-bottom-left-radius: $radius !important;
+        border-bottom-right-radius: $radius !important;
+      }
+    }
+  }
+}
+
+.btn-group {
+  > .btn-collapse,
+  > .dropdown {
+    > .btn{ border-radius: 0px; }
+    > .btn-group > .btn { border-radius: 0px; }
+
+    &:first-child   {
+      > .btn-group > .btn:first-child,
+      > .btn{
+        border-top-left-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+    } 
+
+    &:last-child {
+      > .btn-group > .btn:last-child,
+      > .btn{
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+    }
+  }
+
+  &.vertical {
+    .btn-collapse {
+      width: 60px;
+      height: 0px;
+     &.in {
+        height: 60px;
+      }
+    }
+  }
+}
+
+.btn-collapse {
+  vertical-align: middle;
+  display: inline-block;
+  width: 0px;
+  height: 60px;
+  // pointer-events: auto;
+  overflow: hidden;
+  //@include transition( all 0.25s ease-in-out);
+  
+  &.btn-collapse-md {
+    height: 44px;
+  }
+
+  .member,
+  .btn .icon{
+    @include scale(0,0); 
+    //@include transition-transform( 0.1s ease-in-out 0s );
+  }
+
+  &.in {
+    .member,
+    .btn .icon{
+      @include scale(1,1); 
+      //@include transition-transform( 0.1s ease-in-out 0.15s );
+    }
+    pointer-events: auto;
+    cursor: pointer;
+    width: 60px;
+      
+    &.btn-collapse-md {width: 44px; }
+  }
+}
+
+.btn-group > .btn-collapse {
+  border-radius: 0px;
+
+  &.first > .btn,
+  &:first-child > .btn{
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  &.last > .btn,
+  &:last-child > .btn{
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+}
+
+.btn-group > .btn {
+  border-radius: 0px;
+
+  &:first-child{
+    border-top-left-radius: 3px !important;
+    border-bottom-left-radius: 3px !important;
+  }
+  &:last-child{
+    border-top-right-radius: 3px !important;
+    border-bottom-right-radius: 3px !important;
+  }
+}
+
+.btn {
+  &.first{
+    border-top-left-radius: 3px !important;
+    border-bottom-left-radius: 3px !important;
+  }
+  &.last{
+    border-top-right-radius: 3px !important;
+    border-bottom-right-radius: 3px !important;
+  }
+}
+
+.btn-group.bottom-left > .btn {
+  border-radius: 0px;
+
+  &:first-child{
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+  &.last,
+  &:last-child{
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 0px;
+  }
+}
+
+.btn-xyz {
+  position: relative;
+  display: inline-block;
+  line-height: 0px;
+  padding: 0px;
+  font-size: 0px;
+  vertical-align: middle;
+  white-space: nowrap;
+  @include clearfix;
+  min-height: 44px;
+}
+
+.btn-group {
+  position: relative;
+  display: inline-block;
+  line-height: 0px;
+  padding: 0px;
+  font-size: 0px;
+  vertical-align: middle;
+  white-space: nowrap;
+  
+  &.dark {
+    border-radius: $radius;
+    background-color: $dark;
+    color: $lighter;
+
+    .btn {
+      color: $lighter;
+    }
+  }
+
+  &.lighten {
+    background-color: rgba(255,255,255,0.3);
+    color: $medium;
+  }
+
+  &.round {
+    border-radius: 60px;
+
+    > .btn:first-child   {
+      border-top-left-radius: 50%;
+      border-bottom-left-radius: 50%;
+    } 
+
+    > .btn:last-child {
+      border-top-right-radius: 50%;
+      border-bottom-right-radius: 50%;
+    }
+  }
+
+  &.vertical {
+    > .dropdown,
+    > .btn {
+      display: block;
+      border-radius: 0 !important;
+
+      &:first-child {
+        border-top-left-radius: $radius !important;
+        border-top-right-radius: $radius !important;
+      }
+      &:last-child {
+        border-bottom-left-radius: $radius !important;
+        border-bottom-right-radius: $radius !important;
+      }
+    }
+  }
+
+  .btn-group-title {
+    position: absolute;
+    bottom: 100%;
+    left: 0px;
+    padding-bottom: 8px;
+    color: $medium;;
+    font-size: 10px;
+    width: 100%;
+    text-align: center;
+    line-height: 1.5;
+  }
+  
+  &.btn-group-block {
+    width: 100%;
+    display: block !important;
+    .btn {
+      text-align: left;
+    }
+  }
+}
+
+.btn-group-vertical {
+  > div {
+    > .btn {
+      display: block;
+      border-radius: 0px;
+    }
+    &:first-child > .btn {
+      border-top-left-radius: 3px;
+      border-top-right-radius: 3px;
+    }
+    &:last-child > .btn {
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+  }
+}
+
+.btn-hidden {
+  @include scale(0,0);
+  pointer-events:none;
+
+  &.btn-visible {
+    @include scale(1,1);
+    pointer-events:auto;
+  }
+}
+
+.btn:hover {
+  .btn-flyout .btn{
+      @include translateX(0%);
+      opacity: 1;
+  }
+}
+
+.btn-flyout {
+  pointer-events: none;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 80%;
+  border-radius: 100px;
+  padding-top: 5px;
+  .btn {
+    //@include transition( all 0.1s 0s ease-in-out);
+    opacity: 0;
+    vertical-align: top;
+    @include translateX(-10%);
+  }
+}
+
+// .light .btn {
+//   &:active,
+//   &.active {
+//     color: $darker !important;
+//   }
+// }
+
+.jewel {
+  background-color: $medium;
+  color: $light;
+  border-width: 1px;
+  border-style: solid;
+  
+  border-color: rgba(0,0,0,0.25);
+  color: $dark;
+  
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 7px;
+  padding: 4px; 
+  min-width: 16px;
+  min-height: 16px;
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  margin: 4px;
+  z-index: 100;
+  border-radius: 50px;
+}
\ No newline at end of file

styles/canvas.scss

+#canvas {
+  .select-list {background-color: transparent; }
+}
+#canvas-orientation {
+  position: absolute;
+  right: 0;
+  top: 0;
+}

styles/chat.scss

+@import "vars";
+@import "mixins";
+
+#chat-functions {
+  position: absolute;
+  bottom: 0px;
+  right: 0px;
+  .btn {
+    display: block;
+    margin-top: -10px;
+    margin-left: -10px;
+  }
+}
+#chat {
+  #chat-message-new {
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+    display: table;
+    min-height: 60px;
+    label {
+      vertical-align: middle;
+      display: table-cell;
+      font-size: 0px;
+      textarea {
+        display: inline-block;
+        width: 100%;
+        min-height: 90px;
+        padding-right: 50px;
+        font-size: 14px;
+        line-height: 1.5 !important;
+        font-weight: 300;
+      }
+    }
+  }
+
+  .overflow-y-scroll {
+    bottom: 100px !important;
+  }
+
+  #chat-messages {
+    width: 100%;
+    padding: 0px;
+    li {
+      display: block;
+      padding-bottom: 10px;
+      padding-left: 25px;
+      padding-right: 25px;
+      padding-left: 60px;
+      min-height: 60px;
+      @include transition( all 0.2s ease-in-out);
+    }
+  }
+}
+
+
+#post-comment {}
+#new-comment {margin-bottom: 20px; }
+
+.comments {
+  padding: 0;
+  padding-top: 10px;
+  margin-bottom: 0;
+  //background-color: $light;
+  font-size: 16px !important;
+  font-family: $main-font !important;
+  list-style: none;
+
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+
+  > li {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 40px;
+    padding-right: 0px;
+    &:last-child {border: none; }
+  }
+
+  .comment-author {
+    pointer-events: none;
+    position: relative;
+    display: block;
+    color: $darker;
+    font-size: 11px;
+    .btn-icon {
+      position: absolute;
+      left: -40px;
+      top: -20px;
+    }
+  }
+  .comment-body {}
+  
+  .comment-meta {
+    display: block;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    font-size: 11px !important;
+    
+    li {
+      margin-right: 10px;
+      display: inline-block;
+
+      &.pull-right {
+        margin-right: 0px;
+        margin-left: 10px;
+      }
+
+      > a {
+        vertical-align: middle;
+        display: inline-block;
+        color: $lighter;
+      }
+
+      a {
+        &:hover {
+          color: $blue;
+        }
+        opacity: 0.5;
+      }
+    }
+  }
+}

styles/close.scss

+@import "vars";
+@import "mixins";
+
+//
+// Close icons
+// --------------------------------------------------
+
+
+.close {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  height: 60px;
+  width: 60px;
+  text-align: center;
+  line-height: 60px;
+  font-size: 40px;
+  color: $dark !important;
+  opacity: 0.5;
+  outline: 0 !important;
+
+  &:focus {
+    @include tab-focus();
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  &:active {
+    @include opacity(1);
+  }
+
+  // [converter] extracted button& to button.close
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}

styles/color.scss

+@import "vars";
+@import "mixins";
+
+#color-toggles {
+  background-size: 40px;
+  border-radius: $radius;
+  background-color: $dark;
+  background-image: url('../images/opacity-grid.png');
+}
+.color-picker {
+  margin: 6px;
+  margin-bottom: 0;
+  width: 256px;
+  @include backface-visibility(hidden);
+
+  &.out .fader-selector {
+    opacity: 0;
+  }
+
+  .color {
+    position: relative;
+    width: 100%;
+    background-color: #2ecc71;
+    display: block;
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+
+    &:before{
+      content: "";
+      display: block;
+      padding-top: 100%; /* initial ratio of 1:1*/
+    }
+
+    > div {
+      top: 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      border-top-left-radius: $radius;
+      border-top-right-radius: $radius;
+
+      &.mask {
+        background-image: url('../images/huevalue.png');
+      }
+    }
+  }
+
+  .color-hue {
+    position: relative;
+    width: 100%;
+
+    &:before{
+      content: "";
+      display: block;
+      padding-top: 40px; /* initial ratio of 1:1*/
+    }
+    background-size: 100% 100%;
+    background-image: url('../images/hue.png');
+  }
+
+  .color-opacity {
+    &:before{
+      content: "";
+      display: block;
+      padding-top: 40px; /* initial ratio of 1:1*/
+    }
+
+    position: relative;
+    width: 100%;
+    background-size: cover;
+    background-image: url('../images/opacity-strip.png');
+  }
+}
+
+.color-indicator {
+  box-shadow: inset  0 0 3px rgba(0,0,0,0.1);
+  border: 2px solid rgba(0,0,0,0.2);
+  background-clip: padding-box;
+}
+
+.fader-selector {
+  padding: 0px;
+  background-color: transparent;
+  border: none;
+  border: 18px solid $dark;
+  border: 8px solid $dark;
+  height: 44px;
+  width: 44px;
+  margin: -2px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border-radius: 100%;
+  box-shadow: 0 0 10px 1px rgba(255,255,255,0.2), inset  0 0 10px 1px rgba(255,255,255,0.2);
+  @include transition( border 0.125s ease-in-out);
+  @include user-select(none);
+  @include scale(1,1);
+
+  &:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -1px;
+    margin-left: -1px;
+    height: 2px;
+    width: 2px;
+    background-color: white;
+    pointer-events: none !important;
+    border-radius: 100%;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+    border: 8px solid $light;
+  }
+  &:active {
+    background-color: white;
+  }
+}
+
+.color-palette {
+  width: 600px;
+  text-align: center;
+
+  .overflow-y-scroll {
+    padding-top: 10px;
+    padding-bottom: 15px;
+
+    overflow-y: auto;
+
+    .btn {
+      display: inline-block;
+      height: 40px;
+      width: 40px;
+      min-width: 0;
+      min-height: 0;
+      margin-left: 4px;
+      margin-right: 4px;
+      margin-top: 8px;
+      padding: 0px;
+      // background-color:  rgba(255,255,255,0.05);
+      background-clip: padding-box;
+      border: 2px solid rgba(0,0,0,0.1);
+      border-radius: 100%;
+      background-color: transparent;
+      background-color: rgba(255,255,255,0.025);
+      /* aspect ratio without spacer image */
+
+      &.active,
+      &:active {
+        background-clip: border-box;
+        border: 2px solid white;
+      }
+
+      .icon {
+        position: absolute;
+        left: -3.5px;
+        top: -2px;
+        @include icon-md;
+      }
+    }
+  }
+}
+
+
+.color .fader-selector   { z-index: 10; left: 120px; top: 120px; margin: -22px; cursor: move; }
+.color-hue .fader-selector     { z-index: 10; left: 0px; margin: -2px -22px; cursor: ew-resize;}
+.color-opacity .fader-selector { z-index: 10; left: 120px; margin: -2px -22px; cursor: ew-resize;}
+
+
+#colors {
+  #color-target {
+    text-align: center;
+    display: block;
+  }
+  @include clearfix;
+
+
+  #color-hex {
+    @include clearfix;
+    position: relative;
+    #color-hash {
+      position: relative;
+      margin-left: 40px;
+      width: 196px;
+    }
+    .btn {
+      position: absolute;
+      z-index: 100;
+    }
+    #add-remove-color {
+      left: 0px;
+    }
+    #color-options-toggle {
+      right: 0px;
+    }
+    div {
+      position: relative;
+      width: 100%;
+      .input {
+        height: 50px;
+        line-height: 70px;
+      }
+      label {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 30px;
+        line-height: 32px;
+        font-size: 16px;
+        opacity: 0.35;
+        color: #888;
+        z-index: 10;
+        text-align: center;
+      }
+    }
+  }
+
+  #color-rgba {
+    position: relative;
+    @include clearfix;
+
+    label {
+      display: block;
+      width: 100%;
+      height: 20px;
+      line-height: 22px;
+      font-size: 16px;
+      opacity: 0.35;
+      color: #888;
+      z-index: 10;
+      text-align: center;
+      margin-bottom: -14px;
+      margin-top: 10px;
+    }
+    .input {
+      line-height: 48px;
+      width: 38px;
+    }
+  }
+}
+
+.font-size-swatches {
+  line-height: 50px;
+}
\ No newline at end of file

styles/colors.scss

+#fill-color-12 { background-color: transparent !important;
+  background-image: url('../images/opacity-grid.png');
+  background-size: contain;
+}
+
+#fill-color-1  { background-color: #4a2f7e !important;}
+#fill-color-2  { background-color: #9b59b6 !important;}
+#fill-color-3  { background-color: #3498db !important;}
+#fill-color-4  { background-color: #2ecc71 !important;}
+#fill-color-5  { background-color: #f1c40f !important;}
+#fill-color-6  { background-color: #e67e22 !important;}
+#fill-color-7  { background-color: #d55c4b !important;}
+#fill-color-8  { background-color: #6f4021 !important;}
+#fill-color-9  { background-color: #ffffff !important;}
+#fill-color-10 { background-color: #95a5a6 !important;}
+#fill-color-11 { background-color: #252525 !important;}
+
+#stroke-color-12 { background-color: transparent !important;
+  background-image: url('../images/opacity-grid.png');
+  background-size: contain;
+}
+
+#stroke-color-1  { background-color: #4a2f7e !important;}
+#stroke-color-2  { background-color: #9b59b6 !important;}
+#stroke-color-3  { background-color: #3498db !important;}
+#stroke-color-4  { background-color: #2ecc71 !important;}
+#stroke-color-5  { background-color: #f1c40f !important;}
+#stroke-color-6  { background-color: #e67e22 !important;}
+#stroke-color-7  { background-color: #d55c4b !important;}
+#stroke-color-8  { background-color: #6f4021 !important;}
+#stroke-color-9  { background-color: #ffffff !important;}
+#stroke-color-10 { background-color: #95a5a6 !important;}
+#stroke-color-11 { background-color: #252525 !important;}

styles/column.scss

+@import "vars";
+@import "mixins";
+
+.column-row {
+  min-height: 100%;
+  box-sizing: content-box;
+
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  -webkit-justify-content: center;
+  justify-content:center;
+  margin: auto;
+}
+
+.section {
+  &.active {
+    .column-border.in {
+      background-color: rgba(40,140,215,0.25);
+      border: 1px solid rgba(255,255,255,0.5);
+      .edge-handle {display: block; }
+
+      &:after{
+        border: 1px dotted rgba(40,140,215,0.5);
+      }
+    }
+  }
+}
+
+.column {
+
+  min-height: 50px;
+  // min-height: 100%;
+  position: relative;
+
+  -webkit-flex: 1 auto;
+  flex: 1 auto;
+
+  // background-clip: content-box;
+  // background-color: rgba(40,140,215,0.0125);
+  // box-shadow: 0px 0px 0px 1px rgba(40,140,215,0.1);
+  .artifact {
+    &:last-child {margin-bottom: 0px; }
+
+    &.over {
+      @include transition( margin-top 0.1s ease-in-out 0.05s);
+      position: relative;
+      z-index: 1000;
+    }
+  }
+
+  &:first-child .column-border .edge-handle:first-child { display: none !important;}
+  &:last-child .column-border .edge-handle:last-child { display: none !important; }
+
+  .column-border {
+    border: 1px solid rgba(255,255,255,0.125);
+
+    // &.in {display: block; }
+    // border-style: solid;
+    // border-width: 1px;
+    // -moz-border-image: url('../images/border-dotted.png') 1 repeat;
+    // -webkit-border-image: url('../images/border-dotted.png') 1 repeat;
+    // -o-border-image: url('../images/border-dotted.png') 1 repeat;
+    // border-image: url('../images/border-dotted.png') 1 fill repeat;
+
+    position: absolute;
+    width: auto;
+    height: auto;
+    right: -1px;
+    left: -1px;
+    top: -1px;
+    bottom: -1px;
+
+    z-index: 2000;
+    pointer-events: none;
+    .edge-handle {display: none; }
+    &:after{
+      border: 1px dotted rgba(40,140,215,0.125);
+      content: "";
+      display: block;
+
+      position: absolute;
+      width: auto;
+      height: auto;
+      right: -1px;
+      left: -1px;
+      top: -1px;
+      bottom: -1px;
+
+    }
+  }
+}

styles/dialog.scss

+@import "vars";
+@import "mixins";
+
+.separate {
+  .icon {display: block; }
+  .icon:after, 
+  .icon:before {
+    font-size: 20px;
+  }
+
+  h4 {padding: 0px !important; padding-top: 21px !important; }
+
+  .label {
+    display: none !important;
+  }
+  .form-group {
+    width: 33.3333%;
+    height: 60px;
+  }
+  
+  .axis-center {
+    border: 2px solid rgba(0,0,0,0.025); 
+  }
+
+  .axis-left,
+  .axis-right {
+    border-top: 2px solid rgba(0,0,0,0.025); 
+    border-bottom: 2px solid rgba(0,0,0,0.025); 
+  }
+
+  .axis-left,
+  .axis-center,
+  .axis-right {
+    float: left;
+    height: 63px;
+  }
+
+
+  .axis-top,
+  .axis-bottom {
+    border-left: 2px solid rgba(0,0,0,0.025); 
+    border-right: 2px solid rgba(0,0,0,0.025); 
+    margin-left: 33.33333% !important;
+  }
+
+  .axis-top .input-drag ,
+  .axis-left .input-drag ,
+  .axis-right .input-drag ,
+  .axis-bottom .input-drag {
+  }
+
+  .axis-top .input-drag {
+    top: 100%;
+    left: 50%;
+    margin-left: -22px;
+    margin-top: -22px;
+  }
+  
+  .axis-left .input-drag {
+    left: 100%;
+    top: 50%;
+    margin-left: -22px;
+    margin-top: -22px;
+  }
+
+  .axis-right .input-drag {
+    right: 100%;
+    top: 50%;
+    margin-right: -22px;
+    margin-top: -22px;
+    left: auto;
+
+  }
+
+  .axis-bottom .input-drag {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -22px;
+    margin-bottom: -22px;
+  }
+}
+
+
+
+.dialog-side-tabs {
+  position: absolute;
+  right: 0;
+  top: 0;
+  list-style: none;
+  padding: 0;
+  height: 100%;
+  padding: 15px;
+  border-left: 2px solid rgba(0,0,0,0.025); 
+  z-index: 100;
+  border-top-right-radius: $radius*3;
+  border-bottom-right-radius: $radius*3;
+}
+
+
+.dialog {
+
+  font-size: 13px;
+  
+  ol, ul, p {
+    font-size: inherit;
+  }
+
+  > .btn-block:last-child {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: $radius*3;
+    border-bottom-right-radius: $radius*3;
+  }
+  
+  min-width: 200px;
+
+  @include backface-visibility(hidden);
+  white-space: normal;
+  z-index: 1000;
+  position: absolute;
+  // white-space: normal;
+  
+  opacity: 0;
+  @include user-select(none);
+  @include transition( all 0.125s ease-in-out);
+  pointer-events: none; 
+  background-color: $light;
+  color: $medium;
+  &.dark {background-color: $dark; }
+  
+  border-radius: $radius*3;
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
+
+  .dialog-tabs-wrapper {
+    overflow: hidden;
+    border-top-left-radius: $radius*3;
+    border-top-right-radius: $radius*3;
+  }
+
+  .dialog-tabs {
+    display: table;
+    width: 100%;
+    max-width: 800px;
+    table-layout: auto;
+    background-color: $lightish;
+
+    .dialog-tab {
+      display: table-cell;
+      text-align: center; 
+      &:hover span {color: $dark; }
+
+      &.open span {
+        background-color: $light;
+        color: $dark;
+        opacity: 1;
+        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1) !important;
+        border-bottom-right-radius: 0px !important;
+        border-bottom-left-radius: 0px !important;
+        border-top-left-radius: $radius*3;
+        border-top-right-radius: $radius*3;
+
+      }
+
+      &:first-child span { 
+        box-shadow: inset 0px -4px 4px -4px rgba(0, 0, 0, 0.1); 
+        // border-top-left-radius: $radius*3;
+        // border-bottom-right-radius: $radius*3;
+      }
+
+      &:last-child  span { 
+        // box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1); 
+        // border-top-right-radius: $radius*3;
+        // border-bottom-left-radius: $radius*3;
+      }
+
+      span {
+        box-shadow: inset 0 -4px 1px -4px rgba(0, 0, 0, 0.05), inset 0 -4px 7px -4px rgba(0, 0, 0, 0.1); 
+        cursor: pointer;
+        //font-size: 12px;
+        //text-transform: uppercase;
+        //letter-spacing: 0.2em;
+        text-indent: 4px;
+        display: block;
+        width: 100%;
+        height: 44px;
+        line-height: 44px;
+      }
+    }
+  }
+  
+  .dialog-title {
+    margin: 0;
+    padding: 15px;
+    padding-bottom: 0px;
+    color: $dark;
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    text-indent: 4px;
+    text-align: center;
+  }
+
+
+  .dialog-section {
+    &:first-child {border: none !important; }
+    border-top: 2px solid rgba(0,0,0,0.1);
+    border-top: 2px solid rgba(0,0,0,0.025); 
+    padding: 15px 20px;
+    position: relative;
+    text-align: center;
+    max-width: 800px;
+    margin: auto;
+    
+    .label-sm { margin-bottom: 0px; pointer-events: none;}
+    .label-sm + input {margin-top: -8px !important; }
+    .label-sm + .btn-group {margin-top: -8px !important; }
+    // .input {height: 45px; line-height: 45px; }
+      
+    &.btn-transparent {
+      &:hover {color: $dark !important; }
+    }
+
+    &.section-tall {
+      height: 200px;
+    }
+  }
+
+  h4 .icon {
+    height: 38px;
+  }
+}
\ No newline at end of file

styles/dropdown.scss

+@import "vars";
+@import "mixins";
+
+$delay: 0.05;
+$predelay: 0;
+
+.open .contained-dropdown.open {pointer-events: auto; }
+.contained-dropdown {
+  //position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  width: 100%;
+  pointer-events: none;
+  z-index: 200;
+  @include transition( all 0.1s ease-in-out);
+
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+
+  // border-radius: 10px;
+  
+  > * {
+    opacity: 0;
+    @include transition( all 0.1s ease-in-out);
+  }
+
+  .overflow-y-scroll {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: auto;
+    width: auto;
+    @include translateY (1%); 
+    ul li span {
+      text-align: center;
+      font-size: $font-size;
+      line-height: $line-height;
+    }
+  }
+
+  &.hover:hover,
+  &.open {
+    // &:before {opacity: 0.125; }
+    // pointer-events: auto;
+    background-color: $dark;
+    background-color: $light; 
+
+    > * {
+      opacity: 1;
+    }
+  }
+}
+
+.form-list {
+  padding: 0px;
+  margin: 0px;
+  > li {
+    list-style: none;
+    color: $medium;;
+    position: relative;
+    .dropdown {
+      position: static;
+      z-index: initial;
+    }
+    > div {border-bottom: 2px solid rgba(255,255,255,0.025); }
+    &:hover {color: $light; }
+  }
+
+  label {
+    float: left;
+    font-size: 12px;
+    min-width: 0px;
+    position: absolute;
+    line-height: 60px;
+    height: 60px;
+    padding-left: 20px;
+  }
+}
+
+.dropdown-menu .section {
+  border-top: 2px solid rgba(0,0,0,0.2);
+  padding: 15px;
+  text-align: center;
+  &:last-child {padding-bottom: 15px; }
+}
+
+.btn + .dropdown-group,
+.dropdown + .dropdown-group,
+.btn-divider + .dropdown-group {
+  > .dropdown {
+    > .btn{border-radius: 0px !important; }
+  }
+}
+
+.dropdown-group {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+
+  > .dropdown {
+    position: static;
+    z-index: initial;
+    > .btn{border-radius: 0px; }
+
+    &:first-child > .btn{
+      border-top-left-radius: $radius;
+      border-bottom-left-radius: $radius;
+    }
+
+    &:last-child > .btn{
+      border-top-right-radius: $radius ;
+      border-bottom-right-radius: $radius ;
+    }
+  }
+}
+
+.dropdown {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+  
+  &.dropdown-block {
+    display: block;
+    .dropdown-toggle {
+      width: 100%;
+      display: block;
+      text-align: left;
+    }
+    .dropdown-menu {
+      min-width: 100%;
+      min-width: 150px;
+    }
+  }
+  
+  &.dark > .dropdown-menu,
+  &.dark > .dialog {
+    background: $dark;
+    color: $medium;
+  }
+
+  &.light > .dropdown-menu,
+  &.light > .dialog {
+    background: $light;
+    color: $medium;
+  }
+
+  > .dropdown-menu {
+    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 7px rgba(0, 0, 0, 0.1);
+    @include backface-visibility(hidden);
+    z-index: 1000;
+    white-space: nowrap;
+    
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-top: 8px;
+    @include opacity(0);
+    @include user-select(none);
+    @include transition( all 0.125s ease-in-out);
+    pointer-events: none; 
+    border-radius: $radius;
+
+    > ul,
+    > div {
+      position: relative !important;
+      // background-color: $dark !important;
+      // color: $light;
+      
+      &.center   { text-align: center; }
+      &.overflow-y-scroll { max-height: 250px; }
+
+      > li {
+        &:hover {
+          > a,
+          > span {
+            background-color: rgba(255,255,255,0.05);
+          }
+        }
+        > a,
+        > span {
+          &:before {
+            background-color: white;
+          }
+        }
+      }
+    }
+  }
+
+
+
+  &.hover:hover > .dialog,
+  &.hover:hover > .dropdown-menu,
+
+  &.open > .dialog,
+  &.open > .dropdown-menu  {
+    @include opacity(1);
+    pointer-events: auto !important;
+    display: block;
+  }
+
+  &.center {
+    &.hover:hover,
+    &.open {
+      > .dialog,
+      > .dropdown-menu {
+      -webkit-transform: translate3d(-50%, -50%, 100px) scale(1);
+          -ms-transform: translate3d(-50%, -50%, 100px) scale(1);
+              transform: translate3d(-50%, -50%, 100px) scale(1);
+      }
+    }
+
+    > .dialog,
+    > .dropdown-menu {
+      left: 50%;
+      top: 50%;
+      margin-top: 0px;
+      @include transform-origin(center center);
+      -webkit-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
+          -ms-transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
+              transform: translate3d(-50%, -50%, 100px) scale(0.93,0.8);
+    }
+  }
+
+  &.bottomleft {
+    > .dialog,
+    > .dropdown-menu {
+      top: auto;
+      bottom: 100%;
+      margin-bottom: 16px;
+      @include transform-origin(bottom left);
+      -webkit-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
+          -ms-transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
+              transform: translate3d(-33%, 0%, 100px) scale(0.93,0.8);
+    }
+  }
+  
+  &.bottom {
+    > .dialog,
+    > .dropdown-menu {
+      top: auto;
+      bottom: 100%;
+      margin-bottom: 16px;
+      @include transform-origin(bottom center);
+      -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+          -ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+              transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+    }
+
+  }
+
+  &.top {
+    > .dialog,
+    > .dropdown-menu {
+      top: 100%;
+      bottom: auto;
+      margin-top: -16px;
+      @include transform-origin(top center);
+      -webkit-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+          -ms-transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+              transform: translate3d(-50%, 0%, 100px) scale(0.93,0.8);
+    }
+  }
+
+  &.top.right {
+    > .dialog,
+    > .dropdown-menu {
+      top: 100%;
+      bottom: auto;
+      left: auto;
+      right: 0;
+      margin-top: 16px;
+      @include transform-origin(top right);
+      -webkit-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
+          -ms-transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
+              transform: translate3d(0%, 0%, 100px) scale(0.93,0.8);
+    }
+    &.hover:hover,
+    &.open {
+      > .dialog,
+      > .dropdown-menu {
+      -webkit-transform: translate3d(0%, 0%, 100px) scale(1);
+          -ms-transform: translate3d(0%, 0%, 100px) scale(1);
+              transform: translate3d(0%, 0%, 100px) scale(1);
+      }
+    }
+
+  }
+
+  &.top,
+  &.bottom,
+  &.bottomleft {
+
+    /*&.open > .btn-group > .btn-icon-labeled:hover,
+    &.open > .btn-icon-labeled:hover {
+      .icon-label {opacity: 0; margin: 0; }
+      .icon:before {line-height: 60px; }
+    }*/
+
+    &.hover:hover,
+    &.open {
+
+      > .btn-dark,
+      > .btn-group > .btn-dark {
+        .jewel {
+          background-color: #fff !important;
+          border-color: #303030 !important;
+        }
+      }
+
+      > .dialog,
+      > .dropdown-menu {
+          -webkit-transform: translate3d(-50%, 0%, 100px) scale(1);
+              -ms-transform: translate3d(-50%, 0%, 100px) scale(1);
+                  transform: translate3d(-50%, 0%, 100px) scale(1);
+      }
+    }
+  }
+
+  &.bottomleft {
+    &.hover:hover,
+    &.open {
+      > .dialog,
+      > .dropdown-menu {
+          -webkit-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
+              -ms-transform: translate3d(-33%, 0%, 100px) scale(1) !important;
+                  transform: translate3d(-33%, 0%, 100px) scale(1) !important;
+      }
+    }
+  }
+}
+
+
+.dropdown {
+  &.options-3 {
+    &.option-1:after { margin-left: -68px;}
+    &.option-2:after { margin-left: -8px;}
+    &.option-3:after { margin-left: 52px;} 
+  }
+
+  &.option-1:after { margin-left: -38px;}
+  &.option-2:after { margin-left: 22px;}
+  
+  &.open:after {
+    @include transition( all 0.1s ease-in-out 0s);
+    -webkit-transform:  scale(1);
+        -ms-transform:  scale(1);
+            transform:  scale(1);
+  }
+  
+  &:after {
+    @include transition( all 0.1s ease-in-out 0s);
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    width: 0; 
+    height: 0; 
+    // margin-bottom: 8px;
+
+    margin-left: -8px;
+    pointer-events: none !important;
+    left: 50%;
+    -webkit-transform: scale(0,0);
+        -ms-transform: scale(0,0);
+            transform: scale(0,0);
+  }
+
+  &.bottom:after, &.bottomleft:after {
+    @include transform-origin(bottom center);
+    bottom: 100%;
+    border-bottom: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-top: 8px solid #303030;
+    border-left: 8px solid transparent;
+  }
+
+  &.top:after {
+    @include transform-origin(top center);
+    top: 100%;
+    border-bottom: 8px solid #303030;
+    border-right: 8px solid transparent;
+    border-top: 8px solid transparent;
+    border-left: 8px solid transparent;
+  }
+}
\ No newline at end of file

styles/editors.scss

+@import "vars";
+@import "mixins";
+
+#editors, #editors-list {
+  @include user-select(none);
+
+  h6 {
+    padding: 15px 25px;
+    margin: 0px;
+    color: $medium;
+    font-size: 10px;
+  }
+
+  ul {
+    padding: 0px;
+    margin: 0px;
+    li {
+      &:nth-child(1)  .editor-avatar {background-color: #4a2f7e;}
+      &:nth-child(2)  .editor-avatar {background-color: #9b59b6;}
+      &:nth-child(3)  .editor-avatar {background-color: #3498db;}
+      &:nth-child(4)  .editor-avatar {background-color: #2ecc71;}
+      &:nth-child(5)  .editor-avatar {background-color: #f1c40f;}
+      &:nth-child(6)  .editor-avatar {background-color: #e67e22;}
+      &:nth-child(7)  .editor-avatar {background-color: #d55c4b;}
+      &:nth-child(8)  .editor-avatar {background-color: #6f4021;}
+      &:nth-child(9)  .editor-avatar {background-color: #ffffff;}
+      &:nth-child(10) .editor-avatar {background-color: #95a5a6;}
+      &:nth-child(11) .editor-avatar {background-color: #252525;}
+    }
+  }
+}
+
+
+#invite-message {
+  height: 117px !important;
+}
+
+.editor > a, 
+.editor > span {
+  text-align: left;
+  border-radius: $radius;
+  display: block;
+  // background-color: rgba(255,255,255,0.05);
+  position: relative;
+  // padding-left: 70px !important;
+  min-height: 60px;
+  border: none;
+
+
+  .editor-avatar {
+    margin-top: 7px;
+    background-size: cover;
+    background-position: center;
+    margin-right: 15px;
+    float: left;
+    color: white !important;
+
+    &.status-off,
+    &.status-on {
+      &:before {
+        top: 0;
+        right: 0;
+        display: block;
+        position: absolute;
+        color: $darker ;
+        border: 1px solid #292929;
+        border-radius: 100px;
+
+        padding: 4px; 
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 0px;
+        height: 4px;
+        width: 4px;
+      }
+    }
+    &.status-off:before {background-color: #d55c4b; content: "off"; display: none;}
+    &.status-on:before {background-color: #2ecc71; content: "on"; }
+  }
+
+  .editor-email,
+  .editor-name {
+    font-family: $main-font;
+    font-size: 13px;
+    line-height: 1.4;
+    display: block;
+    font-weight: 300;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: $medium;
+  }
+  .editor-email {
+    opacity: 0.5;
+  }
+}
\ No newline at end of file

styles/files.scss

+@import "vars";
+@import "mixins";
+
+
+#files-empty,
+#favorites-empty {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  width: 100%;
+  height: 100%;
+  display: table;
+  pointer-events: none;
+  color: $medium;
+  > div {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+    padding: 20px;
+    .btn {
+      pointer-events: auto;
+    }
+  }
+}
+
+.files-wrapper {
+  overflow: hidden;
+  position: absolute;
+  top: 120px;
+  bottom: 0px;
+  width: 100%;
+  height: auto;
+}
+
+.in-from-left,
+.in-from-right,
+.out-to-left,
+.out-to-right {
+
+  @include backface-visibility(hidden);
+  
+  @include animation-duration(0.225s);
+  @include animation-iteration-count(1);
+  @include animation-timing-function(ease-out);
+  @include animation-fill-mode(forwards);
+  // overflow: hidden !important;
+}
+
+.in-from-left  { @include animation-name(in-from-left); }
+.in-from-right { @include animation-name(in-from-right); }
+.out-to-left   { @include animation-name(out-to-left); }
+.out-to-right  { @include animation-name(out-to-right); }
+
+@-webkit-keyframes in-from-left {
+  from { @include translateX (-100%); opacity: 0;}
+  to   { @include translateX (0%); opacity: 1; }
+}
+
+@-webkit-keyframes in-from-right {
+  from { @include translateX (100%); opacity: 0; }
+  to   { @include translateX (0%); opacity: 1; }
+}
+
+@-webkit-keyframes out-to-left {
+  from { @include translateX (0%); opacity: 1; }
+  to   { @include translateX (-100%); }
+}
+
+@-webkit-keyframes out-to-right {
+  from { @include translateX (0%); opacity: 1; }
+  to   { @include translateX (100%); opacity: 0; }
+}
\ No newline at end of file

styles/filter.scss

+@import "vars";
+
+#filter {
+
+  .icon {
+    position: absolute;
+    opacity: 0.5;
+    color: $medium;
+    left: 0;
+    top: -4px;
+    display: none;
+  }
+
+  .form-group {
+    .btn-less { bottom: 0; left: 0px; }
+    .btn-more { bottom: 0; right: 0px;}
+
+    .label {
+      margin-bottom: -5px;
+    }
+  }
+}
\ No newline at end of file