Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <button id="sbtn">Sidebar</button>
<aside>
<div class="slide-container">
  <ul>
    <li><a href="#">Lorem ipsum dolor <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Aliquam tincidunt <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Vestibulum auctor dapibus <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Lorem ipsum dolor <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Aliquam tincidunt <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Vestibulum auctor dapibus <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Lorem ipsum dolor <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Aliquam tincidunt <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Vestibulum auctor dapibus <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Lorem ipsum dolor <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Lorem ipsum dolor <span class="glyphicon glyphicon-chevron-right"></span></a></li>
    <li><a href="#">Vestibulum auctor dapibus <span class="glyphicon glyphicon-chevron-right"></span></a></li>
  </ul>
</div>
</aside>
              
            
!

CSS

              
                @import "lesshat";

html, body {
  font-family: 'Montserrat', sans-serif;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
a {
  text-decoration: none;
  transition: all 0.4s;
}
#sbtn {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  width: 200px;
  margin: auto;
  background-color: #1F2D39;
  color: #fff;
  border-radius: 60px;
  border: 3px solid #1F2D39;
  box-sizing: border-box;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,.2), 0 3px 0 rgba(0,0,0,.8);
  cursor: pointer;
  transition: transform, background-color 0.45s;
  outline: none;
  &:hover {
    color: #F39C12;
    background-color: #fff;
  }
  &:active {
    box-shadow: none;
    transition: none;
  }
}
aside {
  height: 100%;
  width: 340px;
  overflow: hidden;
  background-color: #1F2D39;
  position: fixed;
  top: 0;
  right: 0;
  box-shadow: -5px 0 0 rgba(0,0,0,.15), -2px 0 15px rgba(0,0,0,.4), -1px 0 0 #B4C6D6;
  color: #fff;
  transform: translate(100%, 0);
  
  .slide-container {
    float: left;
    width: 680px;
	 transform: translate(100%, 0);
  }
  
  ul {
    height: 100%;
    overflow-x: auto;
    float: left;
    width: 340px;
    border-right: 1px solid #374551;
    background-color: #1F2D39;
    position: relative;
  }
  
  ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  li {
    border-bottom: 1px solid #374551;
    a {
      display: block;
      padding: 15px;
      padding-right: 30px;
      color: #B4C6D6;
      font-size: 22px;
      position: relative;
      box-sizing: border-box;
      &:hover {
        color: #fff;
        background-color: #2C3A47;
        text-decoration: none;
      }
      &:active {
        color: #F39C12;
        background-color: #2C3A47;
      }
      .glyphicon {
        position: absolute;
        right: 10px;
        top: 18px;
        opacity: .4;
      }
    }
  }
}

/* Magic */

.slide-right, .close-sb aside, .close-sb .slide-container {
  animation: slide-right 1200ms linear both;
}
.close-sb .slide-container {
  animation-duration: 1000ms;
}


.slide-left, .open aside, .open .slide-container {
  animation: slide-left 1600ms linear both;
}
.open .slide-container {
  animation-duration: 1800ms;
}


/* Generated with Bounce.js. Edit at https://goo.gl/9cI8D5 */

@keyframes slide-left { 
  0% { transform: matrix3d(1.3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 340, 0, 0, 1); }
  0.555556% { transform: matrix3d(1.28377, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 321.60892, 0, 0, 1); }
  1.111111% { transform: matrix3d(1.2681, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 303.84166, 0, 0, 1); }
  1.666667% { transform: matrix3d(1.25297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 286.70461, 0, 0, 1); }
  2.222222% { transform: matrix3d(1.23841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 270.20097, 0, 0, 1); }
  2.777778% { transform: matrix3d(1.22441, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 254.33106, 0, 0, 1); }
  3.333333% { transform: matrix3d(1.21096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 239.0926, 0, 0, 1); }
  3.888889% { transform: matrix3d(1.19807, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 224.48104, 0, 0, 1); }
  4.444444% { transform: matrix3d(1.18573, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 210.48976, 0, 0, 1); }
  5% { transform: matrix3d(1.17392, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 197.11037, 0, 0, 1); }
  5.555556% { transform: matrix3d(1.16265, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 184.33286, 0, 0, 1); }
  6.111111% { transform: matrix3d(1.15189, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 172.14587, 0, 0, 1); }
  6.666667% { transform: matrix3d(1.14165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 160.53684, 0, 0, 1); }
  7.222222% { transform: matrix3d(1.1319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 149.49221, 0, 0, 1); }
  7.777778% { transform: matrix3d(1.12264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 138.99753, 0, 0, 1); }
  8.333333% { transform: matrix3d(1.11386, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 129.0377, 0, 0, 1); }
  8.888889% { transform: matrix3d(1.10553, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 119.59699, 0, 0, 1); }
  9.444444% { transform: matrix3d(1.09764, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 110.65927, 0, 0, 1); }
  10% { transform: matrix3d(1.09018, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 102.20803, 0, 0, 1); }
  10.555556% { transform: matrix3d(1.08314, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 94.22656, 0, 0, 1); }
  11.111111% { transform: matrix3d(1.0765, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 86.69797, 0, 0, 1); }
  11.666667% { transform: matrix3d(1.07024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 79.60535, 0, 0, 1); }
  12.222222% { transform: matrix3d(1.06435, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 72.93176, 0, 0, 1); }
  12.777778% { transform: matrix3d(1.05882, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 66.66036, 0, 0, 1); }
  13.333333% { transform: matrix3d(1.05362, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 60.77446, 0, 0, 1); }
  13.888889% { transform: matrix3d(1.04876, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 55.25753, 0, 0, 1); }
  14.444444% { transform: matrix3d(1.0442, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50.09332, 0, 0, 1); }
  15% { transform: matrix3d(1.03994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 45.26581, 0, 0, 1); }
  15.555556% { transform: matrix3d(1.03596, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 40.75933, 0, 0, 1); }
  16.111111% { transform: matrix3d(1.03226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 36.55855, 0, 0, 1); }
  16.666667% { transform: matrix3d(1.02881, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 32.64848, 0, 0, 1); }
  17.222222% { transform: matrix3d(1.0256, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 29.01457, 0, 0, 1); }
  17.777778% { transform: matrix3d(1.02263, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 25.64263, 0, 0, 1); }
  18.333333% { transform: matrix3d(1.01987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 22.51893, 0, 0, 1); }
  18.888889% { transform: matrix3d(1.01732, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 19.63015, 0, 0, 1); }
  19.444444% { transform: matrix3d(1.01497, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 16.96343, 0, 0, 1); }
  20% { transform: matrix3d(1.0128, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 14.50635, 0, 0, 1); }
  20.555556% { transform: matrix3d(1.01081, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.24694, 0, 0, 1); }
  21.111111% { transform: matrix3d(1.00898, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.17369, 0, 0, 1); }
  21.666667% { transform: matrix3d(1.0073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 8.27554, 0, 0, 1); }
  22.222222% { transform: matrix3d(1.00577, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 6.54186, 0, 0, 1); }
  22.777778% { transform: matrix3d(1.00438, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.9625, 0, 0, 1); }
  23.333333% { transform: matrix3d(1.00311, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.52771, 0, 0, 1); }
  23.888889% { transform: matrix3d(1.00197, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.22821, 0, 0, 1); }
  24.444444% { transform: matrix3d(1.00093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1.05513, 0, 0, 1); }
  25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.555556% { transform: matrix3d(0.99917, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.94522, 0, 0, 1); }
  26.111111% { transform: matrix3d(0.99842, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.78818, 0, 0, 1); }
  26.666667% { transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.53616, 0, 0, 1); }
  27.222222% { transform: matrix3d(0.99718, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.19603, 0, 0, 1); }
  27.777778% { transform: matrix3d(0.99667, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.77433, 0, 0, 1); }
  28.333333% { transform: matrix3d(0.99623, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.27722, 0, 0, 1); }
  28.888889% { transform: matrix3d(0.99584, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.71055, 0, 0, 1); }
  29.444444% { transform: matrix3d(0.99552, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.07982, 0, 0, 1); }
  30% { transform: matrix3d(0.99524, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.39022, 0, 0, 1); }
  30.555556% { transform: matrix3d(0.99502, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.64664, 0, 0, 1); }
  31.111111% { transform: matrix3d(0.99484, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.85366, 0, 0, 1); }
  31.666667% { transform: matrix3d(0.99469, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.0156, 0, 0, 1); }
  32.222222% { transform: matrix3d(0.99459, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.13651, 0, 0, 1); }
  32.777778% { transform: matrix3d(0.99451, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.22018, 0, 0, 1); }
  33.333333% { transform: matrix3d(0.99447, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.27014, 0, 0, 1); }
  33.888889% { transform: matrix3d(0.99445, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.28971, 0, 0, 1); }
  34.444444% { transform: matrix3d(0.99446, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.28198, 0, 0, 1); }
  35% { transform: matrix3d(0.99449, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.24982, 0, 0, 1); }
  35.555556% { transform: matrix3d(0.99453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.1959, 0, 0, 1); }
  36.111111% { transform: matrix3d(0.9946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.12271, 0, 0, 1); }
  36.666667% { transform: matrix3d(0.99468, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -6.03255, 0, 0, 1); }
  37.222222% { transform: matrix3d(0.99477, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.92755, 0, 0, 1); }
  37.777778% { transform: matrix3d(0.99487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.80967, 0, 0, 1); }
  38.333333% { transform: matrix3d(0.99499, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.68074, 0, 0, 1); }
  38.888889% { transform: matrix3d(0.99511, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.54242, 0, 0, 1); }
  39.444444% { transform: matrix3d(0.99524, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.39624, 0, 0, 1); }
  40% { transform: matrix3d(0.99537, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.24361, 0, 0, 1); }
  40.555556% { transform: matrix3d(0.99551, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.08582, 0, 0, 1); }
  41.111111% { transform: matrix3d(0.99566, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.92403, 0, 0, 1); }
  41.666667% { transform: matrix3d(0.9958, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.75932, 0, 0, 1); }
  42.222222% { transform: matrix3d(0.99595, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.59265, 0, 0, 1); }
  42.777778% { transform: matrix3d(0.9961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.42488, 0, 0, 1); }
  43.333333% { transform: matrix3d(0.99624, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.25682, 0, 0, 1); }
  43.888889% { transform: matrix3d(0.99639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -4.08917, 0, 0, 1); }
  44.444444% { transform: matrix3d(0.99654, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.92255, 0, 0, 1); }
  45% { transform: matrix3d(0.99668, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.75754, 0, 0, 1); }
  45.555556% { transform: matrix3d(0.99683, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.59462, 0, 0, 1); }
  46.111111% { transform: matrix3d(0.99697, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.43422, 0, 0, 1); }
  46.666667% { transform: matrix3d(0.99711, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.27675, 0, 0, 1); }
  47.222222% { transform: matrix3d(0.99724, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.12251, 0, 0, 1); }
  47.777778% { transform: matrix3d(0.99738, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.97179, 0, 0, 1); }
  48.333333% { transform: matrix3d(0.99751, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.82484, 0, 0, 1); }
  48.888889% { transform: matrix3d(0.99763, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.68185, 0, 0, 1); }
  49.444444% { transform: matrix3d(0.99776, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.54298, 0, 0, 1); }
  50% { transform: matrix3d(0.99787, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.40836, 0, 0, 1); }
  50.555556% { transform: matrix3d(0.99799, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.27809, 0, 0, 1); }
  51.111111% { transform: matrix3d(0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.15223, 0, 0, 1); }
  51.666667% { transform: matrix3d(0.99821, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.03085, 0, 0, 1); }
  52.222222% { transform: matrix3d(0.99831, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.91394, 0, 0, 1); }
  52.777778% { transform: matrix3d(0.99841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.80153, 0, 0, 1); }
  53.333333% { transform: matrix3d(0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.69359, 0, 0, 1); }
  53.888889% { transform: matrix3d(0.9986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.59009, 0, 0, 1); }
  54.444444% { transform: matrix3d(0.99868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.49099, 0, 0, 1); }
  55% { transform: matrix3d(0.99877, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.39621, 0, 0, 1); }
  55.555556% { transform: matrix3d(0.99885, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.30571, 0, 0, 1); }
  56.111111% { transform: matrix3d(0.99892, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.21938, 0, 0, 1); }
  56.666667% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.13715, 0, 0, 1); }
  57.222222% { transform: matrix3d(0.99907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.05891, 0, 0, 1); }
  57.777778% { transform: matrix3d(0.99913, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.98458, 0, 0, 1); }
  58.333333% { transform: matrix3d(0.99919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.91403, 0, 0, 1); }
  58.888889% { transform: matrix3d(0.99925, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.84715, 0, 0, 1); }
  59.444444% { transform: matrix3d(0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.78384, 0, 0, 1); }
  60% { transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.72398, 0, 0, 1); }
  60.555556% { transform: matrix3d(0.99941, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.66745, 0, 0, 1); }
  61.111111% { transform: matrix3d(0.99946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.61412, 0, 0, 1); }
  61.666667% { transform: matrix3d(0.9995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.56388, 0, 0, 1); }
  62.222222% { transform: matrix3d(0.99954, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.51661, 0, 0, 1); }
  62.777778% { transform: matrix3d(0.99958, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.47218, 0, 0, 1); }
  63.333333% { transform: matrix3d(0.99962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.43049, 0, 0, 1); }
  63.888889% { transform: matrix3d(0.99965, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.39141, 0, 0, 1); }
  64.444444% { transform: matrix3d(0.99969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.35483, 0, 0, 1); }
  65% { transform: matrix3d(0.99972, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.32064, 0, 0, 1); }
  65.555556% { transform: matrix3d(0.99975, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.28872, 0, 0, 1); }
  66.111111% { transform: matrix3d(0.99977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.25896, 0, 0, 1); }
  66.666667% { transform: matrix3d(0.9998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.23126, 0, 0, 1); }
  67.222222% { transform: matrix3d(0.99982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.20552, 0, 0, 1); }
  67.777778% { transform: matrix3d(0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.18164, 0, 0, 1); }
  68.333333% { transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.15951, 0, 0, 1); }
  68.888889% { transform: matrix3d(0.99988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.13905, 0, 0, 1); }
  69.444444% { transform: matrix3d(0.99989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.12016, 0, 0, 1); }
  70% { transform: matrix3d(0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.10275, 0, 0, 1); }
  70.555556% { transform: matrix3d(0.99992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.08675, 0, 0, 1); }
  71.111111% { transform: matrix3d(0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.07206, 0, 0, 1); }
  71.666667% { transform: matrix3d(0.99995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.05862, 0, 0, 1); }
  72.222222% { transform: matrix3d(0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.04634, 0, 0, 1); }
  72.777778% { transform: matrix3d(0.99997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.03515, 0, 0, 1); }
  73.333333% { transform: matrix3d(0.99998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.02499, 0, 0, 1); }
  73.888889% { transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.01578, 0, 0, 1); }
  74.444444% { transform: matrix3d(0.99999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00747, 0, 0, 1); }
  75% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.555556% { transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0067, 0, 0, 1); }
  76.111111% { transform: matrix3d(1.00001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01267, 0, 0, 1); }
  76.666667% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01796, 0, 0, 1); }
  77.222222% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02264, 0, 0, 1); }
  77.777778% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02674, 0, 0, 1); }
  78.333333% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0303, 0, 0, 1); }
  78.888889% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03337, 0, 0, 1); }
  79.444444% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03598, 0, 0, 1); }
  80% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03818, 0, 0, 1); }
  80.555556% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04, 0, 0, 1); }
  81.111111% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04146, 0, 0, 1); }
  81.666667% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04261, 0, 0, 1); }
  82.222222% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04347, 0, 0, 1); }
  82.777778% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04406, 0, 0, 1); }
  83.333333% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04441, 0, 0, 1); }
  83.888889% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04455, 0, 0, 1); }
  84.444444% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0445, 0, 0, 1); }
  85% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04427, 0, 0, 1); }
  85.555556% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04389, 0, 0, 1); }
  86.111111% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04337, 0, 0, 1); }
  86.666667% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04273, 0, 0, 1); }
  87.222222% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04199, 0, 0, 1); }
  87.777778% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04115, 0, 0, 1); }
  88.333333% { transform: matrix3d(1.00004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04024, 0, 0, 1); }
  88.888889% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03926, 0, 0, 1); }
  89.444444% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03822, 0, 0, 1); }
  90% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03714, 0, 0, 1); }
  90.555556% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03602, 0, 0, 1); }
  91.111111% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03488, 0, 0, 1); }
  91.666667% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03371, 0, 0, 1); }
  92.222222% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03253, 0, 0, 1); }
  92.777778% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03134, 0, 0, 1); }
  93.333333% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.03015, 0, 0, 1); }
  93.888889% { transform: matrix3d(1.00003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02897, 0, 0, 1); }
  94.444444% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02779, 0, 0, 1); }
  95% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02662, 0, 0, 1); }
  95.555556% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02546, 0, 0, 1); }
  96.111111% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02433, 0, 0, 1); }
  96.666667% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02321, 0, 0, 1); }
  97.222222% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02212, 0, 0, 1); }
  97.777778% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02105, 0, 0, 1); }
  98.333333% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.02001, 0, 0, 1); }
  98.888889% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.019, 0, 0, 1); }
  99.444444% { transform: matrix3d(1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01801, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

/* Generated with Bounce.js. Edit at https://goo.gl/rC1vXR */

@keyframes slide-right { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  0.555556% { transform: matrix3d(0.98377, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 18.39108, 0, 0, 1); }
  1.111111% { transform: matrix3d(0.9681, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 36.15834, 0, 0, 1); }
  1.666667% { transform: matrix3d(0.95297, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 53.29539, 0, 0, 1); }
  2.222222% { transform: matrix3d(0.93841, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.79903, 0, 0, 1); }
  2.777778% { transform: matrix3d(0.92441, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 85.66894, 0, 0, 1); }
  3.333333% { transform: matrix3d(0.91096, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100.9074, 0, 0, 1); }
  3.888889% { transform: matrix3d(0.89807, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 115.51896, 0, 0, 1); }
  4.444444% { transform: matrix3d(0.88573, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 129.51024, 0, 0, 1); }
  5% { transform: matrix3d(0.87392, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 142.88963, 0, 0, 1); }
  5.555556% { transform: matrix3d(0.86265, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 155.66714, 0, 0, 1); }
  6.111111% { transform: matrix3d(0.85189, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 167.85413, 0, 0, 1); }
  6.666667% { transform: matrix3d(0.84165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 179.46316, 0, 0, 1); }
  7.222222% { transform: matrix3d(0.8319, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 190.50779, 0, 0, 1); }
  7.777778% { transform: matrix3d(0.82264, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 201.00247, 0, 0, 1); }
  8.333333% { transform: matrix3d(0.81386, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 210.9623, 0, 0, 1); }
  8.888889% { transform: matrix3d(0.80553, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 220.40301, 0, 0, 1); }
  9.444444% { transform: matrix3d(0.79764, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 229.34073, 0, 0, 1); }
  10% { transform: matrix3d(0.79018, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 237.79197, 0, 0, 1); }
  10.555556% { transform: matrix3d(0.78314, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 245.77344, 0, 0, 1); }
  11.111111% { transform: matrix3d(0.7765, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 253.30203, 0, 0, 1); }
  11.666667% { transform: matrix3d(0.77024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 260.39465, 0, 0, 1); }
  12.222222% { transform: matrix3d(0.76435, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 267.06824, 0, 0, 1); }
  12.777778% { transform: matrix3d(0.75882, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 273.33964, 0, 0, 1); }
  13.333333% { transform: matrix3d(0.75362, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 279.22554, 0, 0, 1); }
  13.888889% { transform: matrix3d(0.74876, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 284.74247, 0, 0, 1); }
  14.444444% { transform: matrix3d(0.7442, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 289.90668, 0, 0, 1); }
  15% { transform: matrix3d(0.73994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 294.73419, 0, 0, 1); }
  15.555556% { transform: matrix3d(0.73596, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 299.24067, 0, 0, 1); }
  16.111111% { transform: matrix3d(0.73226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 303.44145, 0, 0, 1); }
  16.666667% { transform: matrix3d(0.72881, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 307.35152, 0, 0, 1); }
  17.222222% { transform: matrix3d(0.7256, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 310.98543, 0, 0, 1); }
  17.777778% { transform: matrix3d(0.72263, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 314.35737, 0, 0, 1); }
  18.333333% { transform: matrix3d(0.71987, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 317.48107, 0, 0, 1); }
  18.888889% { transform: matrix3d(0.71732, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 320.36985, 0, 0, 1); }
  19.444444% { transform: matrix3d(0.71497, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 323.03657, 0, 0, 1); }
  20% { transform: matrix3d(0.7128, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 325.49365, 0, 0, 1); }
  20.555556% { transform: matrix3d(0.71081, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 327.75306, 0, 0, 1); }
  21.111111% { transform: matrix3d(0.70898, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 329.82631, 0, 0, 1); }
  21.666667% { transform: matrix3d(0.7073, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 331.72446, 0, 0, 1); }
  22.222222% { transform: matrix3d(0.70577, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.45814, 0, 0, 1); }
  22.777778% { transform: matrix3d(0.70438, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.0375, 0, 0, 1); }
  23.333333% { transform: matrix3d(0.70311, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.47229, 0, 0, 1); }
  23.888889% { transform: matrix3d(0.70197, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.77179, 0, 0, 1); }
  24.444444% { transform: matrix3d(0.70093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.94487, 0, 0, 1); }
  25% { transform: matrix3d(0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 340, 0, 0, 1); }
  25.555556% { transform: matrix3d(0.70083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.05478, 0, 0, 1); }
  26.111111% { transform: matrix3d(0.70158, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.21182, 0, 0, 1); }
  26.666667% { transform: matrix3d(0.70224, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.46384, 0, 0, 1); }
  27.222222% { transform: matrix3d(0.70282, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.80397, 0, 0, 1); }
  27.777778% { transform: matrix3d(0.70333, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.22567, 0, 0, 1); }
  28.333333% { transform: matrix3d(0.70377, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.72278, 0, 0, 1); }
  28.888889% { transform: matrix3d(0.70416, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.28945, 0, 0, 1); }
  29.444444% { transform: matrix3d(0.70448, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.92018, 0, 0, 1); }
  30% { transform: matrix3d(0.70476, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.60978, 0, 0, 1); }
  30.555556% { transform: matrix3d(0.70498, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.35336, 0, 0, 1); }
  31.111111% { transform: matrix3d(0.70516, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.14634, 0, 0, 1); }
  31.666667% { transform: matrix3d(0.70531, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.9844, 0, 0, 1); }
  32.222222% { transform: matrix3d(0.70541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.86349, 0, 0, 1); }
  32.777778% { transform: matrix3d(0.70549, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.77982, 0, 0, 1); }
  33.333333% { transform: matrix3d(0.70553, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.72986, 0, 0, 1); }
  33.888889% { transform: matrix3d(0.70555, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.71029, 0, 0, 1); }
  34.444444% { transform: matrix3d(0.70554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.71802, 0, 0, 1); }
  35% { transform: matrix3d(0.70551, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.75018, 0, 0, 1); }
  35.555556% { transform: matrix3d(0.70547, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.8041, 0, 0, 1); }
  36.111111% { transform: matrix3d(0.7054, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.87729, 0, 0, 1); }
  36.666667% { transform: matrix3d(0.70532, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 333.96745, 0, 0, 1); }
  37.222222% { transform: matrix3d(0.70523, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.07245, 0, 0, 1); }
  37.777778% { transform: matrix3d(0.70513, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.19033, 0, 0, 1); }
  38.333333% { transform: matrix3d(0.70501, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.31926, 0, 0, 1); }
  38.888889% { transform: matrix3d(0.70489, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.45758, 0, 0, 1); }
  39.444444% { transform: matrix3d(0.70476, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.60376, 0, 0, 1); }
  40% { transform: matrix3d(0.70463, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.75639, 0, 0, 1); }
  40.555556% { transform: matrix3d(0.70449, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 334.91418, 0, 0, 1); }
  41.111111% { transform: matrix3d(0.70434, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.07597, 0, 0, 1); }
  41.666667% { transform: matrix3d(0.7042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.24068, 0, 0, 1); }
  42.222222% { transform: matrix3d(0.70405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.40735, 0, 0, 1); }
  42.777778% { transform: matrix3d(0.7039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.57512, 0, 0, 1); }
  43.333333% { transform: matrix3d(0.70376, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.74318, 0, 0, 1); }
  43.888889% { transform: matrix3d(0.70361, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 335.91083, 0, 0, 1); }
  44.444444% { transform: matrix3d(0.70346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.07745, 0, 0, 1); }
  45% { transform: matrix3d(0.70332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.24246, 0, 0, 1); }
  45.555556% { transform: matrix3d(0.70317, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.40538, 0, 0, 1); }
  46.111111% { transform: matrix3d(0.70303, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.56578, 0, 0, 1); }
  46.666667% { transform: matrix3d(0.70289, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.72325, 0, 0, 1); }
  47.222222% { transform: matrix3d(0.70276, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 336.87749, 0, 0, 1); }
  47.777778% { transform: matrix3d(0.70262, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.02821, 0, 0, 1); }
  48.333333% { transform: matrix3d(0.70249, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.17516, 0, 0, 1); }
  48.888889% { transform: matrix3d(0.70237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.31815, 0, 0, 1); }
  49.444444% { transform: matrix3d(0.70224, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.45702, 0, 0, 1); }
  50% { transform: matrix3d(0.70213, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.59164, 0, 0, 1); }
  50.555556% { transform: matrix3d(0.70201, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.72191, 0, 0, 1); }
  51.111111% { transform: matrix3d(0.7019, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.84777, 0, 0, 1); }
  51.666667% { transform: matrix3d(0.70179, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 337.96915, 0, 0, 1); }
  52.222222% { transform: matrix3d(0.70169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.08606, 0, 0, 1); }
  52.777778% { transform: matrix3d(0.70159, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.19847, 0, 0, 1); }
  53.333333% { transform: matrix3d(0.70149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.30641, 0, 0, 1); }
  53.888889% { transform: matrix3d(0.7014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.40991, 0, 0, 1); }
  54.444444% { transform: matrix3d(0.70132, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.50901, 0, 0, 1); }
  55% { transform: matrix3d(0.70123, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.60379, 0, 0, 1); }
  55.555556% { transform: matrix3d(0.70115, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.69429, 0, 0, 1); }
  56.111111% { transform: matrix3d(0.70108, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.78062, 0, 0, 1); }
  56.666667% { transform: matrix3d(0.701, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.86285, 0, 0, 1); }
  57.222222% { transform: matrix3d(0.70093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 338.94109, 0, 0, 1); }
  57.777778% { transform: matrix3d(0.70087, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.01542, 0, 0, 1); }
  58.333333% { transform: matrix3d(0.70081, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.08597, 0, 0, 1); }
  58.888889% { transform: matrix3d(0.70075, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.15285, 0, 0, 1); }
  59.444444% { transform: matrix3d(0.70069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.21616, 0, 0, 1); }
  60% { transform: matrix3d(0.70064, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.27602, 0, 0, 1); }
  60.555556% { transform: matrix3d(0.70059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.33255, 0, 0, 1); }
  61.111111% { transform: matrix3d(0.70054, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.38588, 0, 0, 1); }
  61.666667% { transform: matrix3d(0.7005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.43612, 0, 0, 1); }
  62.222222% { transform: matrix3d(0.70046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.48339, 0, 0, 1); }
  62.777778% { transform: matrix3d(0.70042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.52782, 0, 0, 1); }
  63.333333% { transform: matrix3d(0.70038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.56951, 0, 0, 1); }
  63.888889% { transform: matrix3d(0.70035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.60859, 0, 0, 1); }
  64.444444% { transform: matrix3d(0.70031, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.64517, 0, 0, 1); }
  65% { transform: matrix3d(0.70028, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.67936, 0, 0, 1); }
  65.555556% { transform: matrix3d(0.70025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.71128, 0, 0, 1); }
  66.111111% { transform: matrix3d(0.70023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.74104, 0, 0, 1); }
  66.666667% { transform: matrix3d(0.7002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.76874, 0, 0, 1); }
  67.222222% { transform: matrix3d(0.70018, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.79448, 0, 0, 1); }
  67.777778% { transform: matrix3d(0.70016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.81836, 0, 0, 1); }
  68.333333% { transform: matrix3d(0.70014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.84049, 0, 0, 1); }
  68.888889% { transform: matrix3d(0.70012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.86095, 0, 0, 1); }
  69.444444% { transform: matrix3d(0.70011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.87984, 0, 0, 1); }
  70% { transform: matrix3d(0.70009, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.89725, 0, 0, 1); }
  70.555556% { transform: matrix3d(0.70008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.91325, 0, 0, 1); }
  71.111111% { transform: matrix3d(0.70006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.92794, 0, 0, 1); }
  71.666667% { transform: matrix3d(0.70005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.94138, 0, 0, 1); }
  72.222222% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95366, 0, 0, 1); }
  72.777778% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96485, 0, 0, 1); }
  73.333333% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97501, 0, 0, 1); }
  73.888889% { transform: matrix3d(0.70001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.98422, 0, 0, 1); }
  74.444444% { transform: matrix3d(0.70001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.99253, 0, 0, 1); }
  75% { transform: matrix3d(0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 340, 0, 0, 1); }
  75.555556% { transform: matrix3d(0.70001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.9933, 0, 0, 1); }
  76.111111% { transform: matrix3d(0.70001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.98733, 0, 0, 1); }
  76.666667% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.98204, 0, 0, 1); }
  77.222222% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97736, 0, 0, 1); }
  77.777778% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97326, 0, 0, 1); }
  78.333333% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.9697, 0, 0, 1); }
  78.888889% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96663, 0, 0, 1); }
  79.444444% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96402, 0, 0, 1); }
  80% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96182, 0, 0, 1); }
  80.555556% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96, 0, 0, 1); }
  81.111111% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95854, 0, 0, 1); }
  81.666667% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95739, 0, 0, 1); }
  82.222222% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95653, 0, 0, 1); }
  82.777778% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95594, 0, 0, 1); }
  83.333333% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95559, 0, 0, 1); }
  83.888889% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95545, 0, 0, 1); }
  84.444444% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.9555, 0, 0, 1); }
  85% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95573, 0, 0, 1); }
  85.555556% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95611, 0, 0, 1); }
  86.111111% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95663, 0, 0, 1); }
  86.666667% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95727, 0, 0, 1); }
  87.222222% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95801, 0, 0, 1); }
  87.777778% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95885, 0, 0, 1); }
  88.333333% { transform: matrix3d(0.70004, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.95976, 0, 0, 1); }
  88.888889% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96074, 0, 0, 1); }
  89.444444% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96178, 0, 0, 1); }
  90% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96286, 0, 0, 1); }
  90.555556% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96398, 0, 0, 1); }
  91.111111% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96512, 0, 0, 1); }
  91.666667% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96629, 0, 0, 1); }
  92.222222% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96747, 0, 0, 1); }
  92.777778% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96866, 0, 0, 1); }
  93.333333% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.96985, 0, 0, 1); }
  93.888889% { transform: matrix3d(0.70003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97103, 0, 0, 1); }
  94.444444% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97221, 0, 0, 1); }
  95% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97338, 0, 0, 1); }
  95.555556% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97454, 0, 0, 1); }
  96.111111% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97567, 0, 0, 1); }
  96.666667% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97679, 0, 0, 1); }
  97.222222% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97788, 0, 0, 1); }
  97.777778% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97895, 0, 0, 1); }
  98.333333% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.97999, 0, 0, 1); }
  98.888889% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.981, 0, 0, 1); }
  99.444444% { transform: matrix3d(0.70002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 339.98199, 0, 0, 1); }
  100% { transform: matrix3d(0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 340, 0, 0, 1); } 
}
              
            
!

JS

              
                $(document).ready(function() {
  $("#sbtn").on("click", function() {
    $("html").toggleClass("open").toggleClass("close-sb");
  });
});
              
            
!
999px

Console