Add columns section

diff --git a/docs/_includes/heading.html b/docs/_includes/anchor.html
similarity index 100%
rename from docs/_includes/heading.html
rename to docs/_includes/anchor.html

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index 7991ec1694cb2286d969b530f65b0b266a904722..1261803a34e28513254429539d5a4144dab705fa 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -36,8 +36,8 @@
           <a class="navbar-item {% if page.doc-tab == 'modifiers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
             Modifiers
           </a>
-          <a class="navbar-item {% if page.doc-tab == 'grid' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
-            Grid
+          <a class="navbar-item {% if page.doc-tab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
+            Columns
           </a>
           <a class="navbar-item {% if page.doc-tab == 'layout' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
             Layout

diff --git a/docs/_includes/subnav-columns.html b/docs/_includes/subnav-columns.html
new file mode 100644 (file)
index 0000000..d8c8a2c
--- /dev/null
+++ b/docs/_includes/subnav-columns.html
@@ -0,0 +1,24 @@
+<nav class="navbar has-shadow">
+  <div class="container">
+    <div class="navbar-brand">
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'basics' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
+        Basics
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'sizes' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/sizes/">
+        Sizes
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/responsiveness/">
+        Responsiveness
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
+        Nesting
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
+        Options
+      </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'variable-gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/variable-gap/">
+        Variable gap
+      </a>
+    </div>
+  </div>
+</nav>

diff --git a/docs/_includes/subnav-layout.html b/docs/_includes/subnav-layout.html
index 6c5782b668ee0f59fa429af74728aa282cbeaa5a..8883a28c9fa24ccbd9f7390257a97ece12ebddcb 100644 (file)
--- a/docs/_includes/subnav-layout.html
+++ b/docs/_includes/subnav-layout.html
@@ -7,6 +7,9 @@
       <a class="navbar-item is-tab {% if page.doc-subtab == 'hero' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/hero/">
         Hero
       </a>
+      <a class="navbar-item is-tab {% if page.doc-subtab == 'tiles' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/tiles/">
+        Tiles
+      </a>
       <a class="navbar-item is-tab {% if page.doc-subtab == 'section' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/section/">
         Section
       </a>

diff --git a/docs/_includes/variables.html b/docs/_includes/variables.html
index e3d5e294e74246c53636eadbcc702139656f86c4..0d8257df8214f8c7b007f9766aaced61aa250553 100644 (file)
--- a/docs/_includes/variables.html
+++ b/docs/_includes/variables.html
@@ -1,4 +1,4 @@
-{% include heading.html name="Variables" %}
+{% include anchor.html name="Variables" %}
 
 <div class="content">
   <p>

diff --git a/docs/_javascript/bulma.js b/docs/_javascript/bulma.js
deleted file mode 100644 (file)
index a5e956d..0000000
--- a/docs/_javascript/bulma.js
+++ /dev/null
@@ -1,65 +0,0 @@
-jQuery(document).ready(function ($) {
-
-  var $toggle = $('#nav-toggle');
-  var $menu = $('#nav-menu');
-
-  $toggle.click(function() {
-    $(this).toggleClass('is-active');
-    $menu.toggleClass('is-active');
-  });
-
-  $('.modal-button').click(function() {
-    var target = $(this).data('target');
-    $('html').addClass('is-clipped');
-    $(target).addClass('is-active');
-  });
-
-  $('.modal-background, .modal-close').click(function() {
-    $('html').removeClass('is-clipped');
-    $(this).parent().removeClass('is-active');
-  });
-
-  $('.modal-card-head .delete, .modal-card-foot .button').click(function() {
-    $('html').removeClass('is-clipped');
-    $('#modal-ter').removeClass('is-active');
-  });
-
-  $(document).on('keyup',function(e) {
-    if (e.keyCode == 27) {
-      $('html').removeClass('is-clipped');
-      $('.modal').removeClass('is-active');
-    }
-  });
-
-  var $highlights = $('.highlight');
-
-  $highlights.each(function() {
-    var $el = $(this);
-    var copy = '<button class="bd-copy">Copy</button>';
-    var expand = '<button class="bd-expand">Expand</button>';
-    $el.append(copy);
-
-    if ($el.find('pre code').innerHeight() > 600) {
-      $el.append(expand);
-    }
-  });
-
-  var $highlightButtons = $('.highlight .bd-copy, .highlight .bd-expand');
-
-  $highlightButtons.hover(function() {
-    $(this).parent().css('box-shadow', '0 0 0 1px #ed6c63');
-  }, function() {
-    $(this).parent().css('box-shadow', 'none');
-  });
-
-  $('.highlight .bd-expand').click(function() {
-    $(this).parent().children('pre').css('max-height', 'none');
-  });
-
-  new Clipboard('.bd-copy', {
-    target: function(trigger) {
-      return trigger.previousSibling;
-    }
-  });
-
-});

diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js
index 7f612beaf80f03aeb04081e12340fb69804d7a34..0f12278658c3cb78dfb792a57f520a21595f1f89 100644 (file)
--- a/docs/_javascript/main.js
+++ b/docs/_javascript/main.js
@@ -103,8 +103,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
   if ($highlights.length > 0) {
     $highlights.forEach($el => {
-      const copy = '<button class="bd-copy">Copy</button>';
-      const expand = '<button class="bd-expand">Expand</button>';
+      const copy = '<button class="button is-small bd-copy">Copy</button>';
+      const expand = '<button class="button is-small bd-expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copy);
 
       if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
@@ -123,11 +123,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     $highlightButtons.forEach($el => {
       $el.addEventListener('mouseenter', () => {
-        $el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63';
+        $el.parentNode.classList.add('bd-is-hovering');
       });
 
       $el.addEventListener('mouseleave', () => {
-        $el.parentNode.style.boxShadow = 'none';
+        $el.parentNode.classList.remove('bd-is-hovering');
       });
     });
 

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 00730ab70f0c5e564062bca3ca15a408c4a38cbe..f5ea05f55f7699b4788eedae35d2c14a1ddd5df7 100644 (file)
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -36,6 +36,9 @@ route: documentation
           <li {% if page.doc-tab == 'modifiers' %}class="is-active"{% endif %}>
             <a href="{{ site.url }}/documentation/modifiers/syntax">Modifiers</a>
           </li>
+          <li {% if page.doc-tab == 'columns' %}class="is-active"{% endif %}>
+            <a href="{{ site.url }}/documentation/columns/basics">Columns</a>
+          </li>
           <li {% if page.doc-tab == 'grid' %}class="is-active"{% endif %}>
             <a href="{{ site.url }}/documentation/grid/columns">Grid</a>
           </li>
@@ -65,7 +68,7 @@ route: documentation
 
 <section class="section">
   <div class="container">
-    <p class="has-text-grey-light">
+    <p class="has-text-centered has-text-grey-light">
       This page is <strong class="has-text-grey">open source</strong>.
       Noticed a typo? Or something unclear?
       <a class="has-text-grey" href="https://github.com/jgthms/bulma/blob/master/docs/{{ page.path }}" style="border-bottom: 1px solid currentColor;">

diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass
index 9893aa6aaccce121e103c5984606e8793753c59c..4d9502a29b428dc8c7af75db8050fc20257ff6bf 100644 (file)
--- a/docs/_sass/example.sass
+++ b/docs/_sass/example.sass
@@ -38,6 +38,10 @@
     &:not(:last-child)
       margin-bottom: 1.5rem
 
+.highlight.bd-is-hovering
+  border-radius: 2px
+  box-shadow: 0 0 0 3px $border
+
 .highlight pre
   max-height: 480px
   margin-bottom: 0 !important
@@ -93,22 +97,22 @@ $structure-invert: $danger-invert
   position: relative
   .bd-copy,
   .bd-expand
-    +unselectable
-    background: $white
-    border: solid $border
-    border-width: 0 0 1px 1px
-    color: $text-light
+    background: none
+    border: none
+    color: $text
     cursor: pointer
+    font-size: 0.625rem
     outline: none
+    padding-bottom: 0
+    padding-top: 0
     position: absolute
-    right: 0
-    top: 0
+    right: 0.25rem
+    top: 0.25rem
     &:hover
-      border-color: $code
-      color: $code
+      background-color: $text
+      color: $white
   .bd-expand
-    border-right-width: 1px
-    right: 50px
+    right: 45px
   +tablet
     pre
       white-space: pre-wrap

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 6ecb21a18fdc8d799212933b5089b13ea88e0e91..a2823fe0827bcfb4b9c5e8f841ef1c16e03e347a 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -132,7 +132,7 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 .bd-notification
   background-color: $background
   border-radius: $radius
-  padding: 1.25rem 1.5rem
+  padding: 1.25rem 0
   position: relative
   text-align: center
   .title,

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 1647f91a0ee9888bfad8ee276ac855cf2a06d50a..522550fa3db4b2b1a43fa26743d60cc15cc74c60 100644 (file)
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -21,5 +21,5 @@ $twitter: #55acee
 @import "./_sass/love"
 @import "./_sass/bootstrap"
 
-.columns
-  background-color: coral
+// .columns
+//   background-color: coral

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 27585c5db8a0df1a8d2b2c550a3d8f2a437158c6..9119d13ce41021ba2be1fb76b03ddad713f850d6 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -1,23 +1,11 @@
 @charset "UTF-8";
 /*! bulma.io v0.5.1 | MIT License | github.com/jgthms/bulma */
-@-webkit-keyframes spinAround {
-  from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(359deg);
-            transform: rotate(359deg);
-  }
-}
 @keyframes spinAround {
   from {
-    -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-    -webkit-transform: rotate(359deg);
-            transform: rotate(359deg);
+    transform: rotate(359deg);
   }
 }
 
@@ -71,18 +59,15 @@ textarea {
 }
 
 html {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 * {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 *:before, *:after {
-  -webkit-box-sizing: inherit;
-          box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 img,
@@ -892,79 +877,59 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 }
 
 .is-flex {
-  display: -webkit-box !important;
-  display: -ms-flexbox !important;
   display: flex !important;
 }
 
 @media screen and (max-width: 768px) {
   .is-flex-mobile {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 769px), print {
   .is-flex-tablet {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-flex-tablet-only {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (max-width: 1007px) {
   .is-flex-touch {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 1008px) {
   .is-flex-desktop {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-flex-desktop-only {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 1200px) {
   .is-flex-widescreen {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 1200px) and (max-width: 1391px) {
   .is-flex-widescreen-only {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
 
 @media screen and (min-width: 1392px) {
   .is-flex-fullhd {
-    display: -webkit-box !important;
-    display: -ms-flexbox !important;
     display: flex !important;
   }
 }
@@ -1086,79 +1051,59 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 }
 
 .is-inline-flex {
-  display: -webkit-inline-box !important;
-  display: -ms-inline-flexbox !important;
   display: inline-flex !important;
 }
 
 @media screen and (max-width: 768px) {
   .is-inline-flex-mobile {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 769px), print {
   .is-inline-flex-tablet {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 769px) and (max-width: 1007px) {
   .is-inline-flex-tablet-only {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (max-width: 1007px) {
   .is-inline-flex-touch {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 1008px) {
   .is-inline-flex-desktop {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 1008px) and (max-width: 1199px) {
   .is-inline-flex-desktop-only {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 1200px) {
   .is-inline-flex-widescreen {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 1200px) and (max-width: 1391px) {
   .is-inline-flex-widescreen-only {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
 
 @media screen and (min-width: 1392px) {
   .is-inline-flex-fullhd {
-    display: -webkit-inline-box !important;
-    display: -ms-inline-flexbox !important;
     display: inline-flex !important;
   }
 }
@@ -1234,8 +1179,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 }
 
 .is-shadowless {
-  -webkit-box-shadow: none !important;
-          box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 .is-unselectable {
@@ -1249,8 +1193,7 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 .box {
   background-color: white;
   border-radius: 5px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   color: #4a4a4a;
   display: block;
   padding: 1.25rem;
@@ -1261,33 +1204,24 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 }
 
 a.box:hover, a.box:focus {
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
 }
 
 a.box:active {
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
 }
 
 .button {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border: 1px solid transparent;
   border-radius: 3px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
+  box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
   height: 2.25em;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   line-height: 1.5;
   padding-bottom: calc(0.375em - 1px);
   padding-left: calc(0.625em - 1px);
@@ -1304,9 +1238,7 @@ a.box:active {
   border-color: #dbdbdb;
   color: #363636;
   cursor: pointer;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding-left: 0.75em;
   padding-right: 0.75em;
   text-align: center;
@@ -1357,8 +1289,7 @@ a.box:active {
 
 .button:active, .button.is-active {
   border-color: #4a4a4a;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #363636;
 }
 
@@ -1377,8 +1308,7 @@ a.box:active {
 .button.is-link[disabled] {
   background-color: transparent;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-white {
@@ -1395,24 +1325,21 @@ a.box:active {
 
 .button.is-white:focus, .button.is-white.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
-          box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
+  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
   color: #0a0a0a;
 }
 
 .button.is-white:active, .button.is-white.is-active {
   background-color: #f2f2f2;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #0a0a0a;
 }
 
 .button.is-white[disabled] {
   background-color: white;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-white.is-inverted {
@@ -1427,8 +1354,7 @@ a.box:active {
 .button.is-white.is-inverted[disabled] {
   background-color: #0a0a0a;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: white;
 }
 
@@ -1455,8 +1381,7 @@ a.box:active {
 .button.is-white.is-outlined[disabled] {
   background-color: transparent;
   border-color: white;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: white;
 }
 
@@ -1474,8 +1399,7 @@ a.box:active {
 .button.is-white.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: #0a0a0a;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #0a0a0a;
 }
 
@@ -1493,24 +1417,21 @@ a.box:active {
 
 .button.is-black:focus, .button.is-black.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
-          box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
+  box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
   color: white;
 }
 
 .button.is-black:active, .button.is-black.is-active {
   background-color: black;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: white;
 }
 
 .button.is-black[disabled] {
   background-color: #0a0a0a;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-black.is-inverted {
@@ -1525,8 +1446,7 @@ a.box:active {
 .button.is-black.is-inverted[disabled] {
   background-color: white;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #0a0a0a;
 }
 
@@ -1553,8 +1473,7 @@ a.box:active {
 .button.is-black.is-outlined[disabled] {
   background-color: transparent;
   border-color: #0a0a0a;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #0a0a0a;
 }
 
@@ -1572,8 +1491,7 @@ a.box:active {
 .button.is-black.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: white;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: white;
 }
 
@@ -1591,24 +1509,21 @@ a.box:active {
 
 .button.is-light:focus, .button.is-light.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
-          box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
+  box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
   color: #363636;
 }
 
 .button.is-light:active, .button.is-light.is-active {
   background-color: #e8e8e8;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #363636;
 }
 
 .button.is-light[disabled] {
   background-color: whitesmoke;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-light.is-inverted {
@@ -1623,8 +1538,7 @@ a.box:active {
 .button.is-light.is-inverted[disabled] {
   background-color: #363636;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: whitesmoke;
 }
 
@@ -1651,8 +1565,7 @@ a.box:active {
 .button.is-light.is-outlined[disabled] {
   background-color: transparent;
   border-color: whitesmoke;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: whitesmoke;
 }
 
@@ -1670,8 +1583,7 @@ a.box:active {
 .button.is-light.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: #363636;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #363636;
 }
 
@@ -1689,24 +1601,21 @@ a.box:active {
 
 .button.is-dark:focus, .button.is-dark.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
-          box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
+  box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
   color: whitesmoke;
 }
 
 .button.is-dark:active, .button.is-dark.is-active {
   background-color: #292929;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: whitesmoke;
 }
 
 .button.is-dark[disabled] {
   background-color: #363636;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-dark.is-inverted {
@@ -1721,8 +1630,7 @@ a.box:active {
 .button.is-dark.is-inverted[disabled] {
   background-color: whitesmoke;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #363636;
 }
 
@@ -1749,8 +1657,7 @@ a.box:active {
 .button.is-dark.is-outlined[disabled] {
   background-color: transparent;
   border-color: #363636;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #363636;
 }
 
@@ -1768,8 +1675,7 @@ a.box:active {
 .button.is-dark.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: whitesmoke;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: whitesmoke;
 }
 
@@ -1787,24 +1693,21 @@ a.box:active {
 
 .button.is-primary:focus, .button.is-primary.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
-          box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
   color: #fff;
 }
 
 .button.is-primary:active, .button.is-primary.is-active {
   background-color: #00b89c;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #fff;
 }
 
 .button.is-primary[disabled] {
   background-color: #00d1b2;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-primary.is-inverted {
@@ -1819,8 +1722,7 @@ a.box:active {
 .button.is-primary.is-inverted[disabled] {
   background-color: #fff;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #00d1b2;
 }
 
@@ -1847,8 +1749,7 @@ a.box:active {
 .button.is-primary.is-outlined[disabled] {
   background-color: transparent;
   border-color: #00d1b2;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #00d1b2;
 }
 
@@ -1866,8 +1767,7 @@ a.box:active {
 .button.is-primary.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: #fff;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #fff;
 }
 
@@ -1885,24 +1785,21 @@ a.box:active {
 
 .button.is-info:focus, .button.is-info.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
-          box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
+  box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
   color: #fff;
 }
 
 .button.is-info:active, .button.is-info.is-active {
   background-color: #2366d1;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #fff;
 }
 
 .button.is-info[disabled] {
   background-color: #3273dc;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-info.is-inverted {
@@ -1917,8 +1814,7 @@ a.box:active {
 .button.is-info.is-inverted[disabled] {
   background-color: #fff;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #3273dc;
 }
 
@@ -1945,8 +1841,7 @@ a.box:active {
 .button.is-info.is-outlined[disabled] {
   background-color: transparent;
   border-color: #3273dc;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #3273dc;
 }
 
@@ -1964,8 +1859,7 @@ a.box:active {
 .button.is-info.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: #fff;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #fff;
 }
 
@@ -1983,24 +1877,21 @@ a.box:active {
 
 .button.is-success:focus, .button.is-success.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
-          box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
+  box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
   color: #fff;
 }
 
 .button.is-success:active, .button.is-success.is-active {
   background-color: #20bc56;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #fff;
 }
 
 .button.is-success[disabled] {
   background-color: #23d160;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-success.is-inverted {
@@ -2015,8 +1906,7 @@ a.box:active {
 .button.is-success.is-inverted[disabled] {
   background-color: #fff;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #23d160;
 }
 
@@ -2043,8 +1933,7 @@ a.box:active {
 .button.is-success.is-outlined[disabled] {
   background-color: transparent;
   border-color: #23d160;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #23d160;
 }
 
@@ -2062,8 +1951,7 @@ a.box:active {
 .button.is-success.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: #fff;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #fff;
 }
 
@@ -2081,24 +1969,21 @@ a.box:active {
 
 .button.is-warning:focus, .button.is-warning.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
-          box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
+  box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
   color: rgba(0, 0, 0, 0.7);
 }
 
 .button.is-warning:active, .button.is-warning.is-active {
   background-color: #ffd83d;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: rgba(0, 0, 0, 0.7);
 }
 
 .button.is-warning[disabled] {
   background-color: #ffdd57;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-warning.is-inverted {
@@ -2113,8 +1998,7 @@ a.box:active {
 .button.is-warning.is-inverted[disabled] {
   background-color: rgba(0, 0, 0, 0.7);
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #ffdd57;
 }
 
@@ -2141,8 +2025,7 @@ a.box:active {
 .button.is-warning.is-outlined[disabled] {
   background-color: transparent;
   border-color: #ffdd57;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #ffdd57;
 }
 
@@ -2160,8 +2043,7 @@ a.box:active {
 .button.is-warning.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: rgba(0, 0, 0, 0.7);
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: rgba(0, 0, 0, 0.7);
 }
 
@@ -2179,24 +2061,21 @@ a.box:active {
 
 .button.is-danger:focus, .button.is-danger.is-focused {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
-          box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
+  box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
   color: #fff;
 }
 
 .button.is-danger:active, .button.is-danger.is-active {
   background-color: #ff1f4b;
   border-color: transparent;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
   color: #fff;
 }
 
 .button.is-danger[disabled] {
   background-color: #ff3860;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 .button.is-danger.is-inverted {
@@ -2211,8 +2090,7 @@ a.box:active {
 .button.is-danger.is-inverted[disabled] {
   background-color: #fff;
   border-color: transparent;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #ff3860;
 }
 
@@ -2239,8 +2117,7 @@ a.box:active {
 .button.is-danger.is-outlined[disabled] {
   background-color: transparent;
   border-color: #ff3860;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #ff3860;
 }
 
@@ -2258,8 +2135,7 @@ a.box:active {
 .button.is-danger.is-inverted.is-outlined[disabled] {
   background-color: transparent;
   border-color: #fff;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #fff;
 }
 
@@ -2279,14 +2155,11 @@ a.box:active {
 .button[disabled] {
   background-color: white;
   border-color: #dbdbdb;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   opacity: 0.5;
 }
 
 .button.is-fullwidth {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   width: 100%;
 }
@@ -2297,8 +2170,7 @@ a.box:active {
 }
 
 .button.is-loading:after {
-  -webkit-animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -2318,8 +2190,7 @@ a.box:active {
   background-color: whitesmoke;
   border-color: #dbdbdb;
   color: #7a7a7a;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   pointer-events: none;
 }
 
@@ -2551,21 +2422,14 @@ a.box:active {
 .textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border: 1px solid transparent;
   border-radius: 3px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
+  box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
   height: 2.25em;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   line-height: 1.5;
   padding-bottom: calc(0.375em - 1px);
   padding-left: calc(0.625em - 1px);
@@ -2576,8 +2440,7 @@ a.box:active {
   background-color: white;
   border-color: #dbdbdb;
   color: #363636;
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
   max-width: 100%;
   width: 100%;
 }
@@ -2613,8 +2476,7 @@ a.box:active {
 .textarea[disabled] {
   background-color: whitesmoke;
   border-color: whitesmoke;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #7a7a7a;
 }
 
@@ -2785,8 +2647,7 @@ a.box:active {
   height: 0.5em;
   pointer-events: none;
   position: absolute;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
+  transform: rotate(-45deg);
   width: 0.5em;
   margin-top: -0.375em;
   right: 1.125em;
@@ -2797,21 +2658,14 @@ a.box:active {
 .select select {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border: 1px solid transparent;
   border-radius: 3px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
+  box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
   height: 2.25em;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   line-height: 1.5;
   padding-bottom: calc(0.375em - 1px);
   padding-left: calc(0.625em - 1px);
@@ -2848,8 +2702,7 @@ a.box:active {
 .select select[disabled] {
   background-color: whitesmoke;
   border-color: whitesmoke;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #7a7a7a;
 }
 
@@ -2964,8 +2817,7 @@ a.box:active {
 }
 
 .select.is-loading::after {
-  -webkit-animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -2979,8 +2831,7 @@ a.box:active {
   position: absolute;
   right: 0.625em;
   top: 0.625em;
-  -webkit-transform: none;
-          transform: none;
+  transform: none;
 }
 
 .select.is-loading.is-small:after {
@@ -3001,15 +2852,9 @@ a.box:active {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   position: relative;
 }
 
@@ -3027,8 +2872,7 @@ a.box:active {
 
 .file.is-white:focus .file-cta, .file.is-white.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
-          box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
+  box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.25);
   color: #0a0a0a;
 }
 
@@ -3052,8 +2896,7 @@ a.box:active {
 
 .file.is-black:focus .file-cta, .file.is-black.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
-          box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
+  box-shadow: 0 0 0.5em rgba(10, 10, 10, 0.25);
   color: white;
 }
 
@@ -3077,8 +2920,7 @@ a.box:active {
 
 .file.is-light:focus .file-cta, .file.is-light.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
-          box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
+  box-shadow: 0 0 0.5em rgba(245, 245, 245, 0.25);
   color: #363636;
 }
 
@@ -3102,8 +2944,7 @@ a.box:active {
 
 .file.is-dark:focus .file-cta, .file.is-dark.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
-          box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
+  box-shadow: 0 0 0.5em rgba(54, 54, 54, 0.25);
   color: whitesmoke;
 }
 
@@ -3127,8 +2968,7 @@ a.box:active {
 
 .file.is-primary:focus .file-cta, .file.is-primary.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
-          box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
+  box-shadow: 0 0 0.5em rgba(0, 209, 178, 0.25);
   color: #fff;
 }
 
@@ -3152,8 +2992,7 @@ a.box:active {
 
 .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
-          box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
+  box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
   color: #fff;
 }
 
@@ -3177,8 +3016,7 @@ a.box:active {
 
 .file.is-success:focus .file-cta, .file.is-success.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
-          box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
+  box-shadow: 0 0 0.5em rgba(35, 209, 96, 0.25);
   color: #fff;
 }
 
@@ -3202,8 +3040,7 @@ a.box:active {
 
 .file.is-warning:focus .file-cta, .file.is-warning.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
-          box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
+  box-shadow: 0 0 0.5em rgba(255, 221, 87, 0.25);
   color: rgba(0, 0, 0, 0.7);
 }
 
@@ -3227,8 +3064,7 @@ a.box:active {
 
 .file.is-danger:focus .file-cta, .file.is-danger.is-focused .file-cta {
   border-color: transparent;
-  -webkit-box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
-          box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
+  box-shadow: 0 0 0.5em rgba(255, 56, 96, 0.25);
   color: #fff;
 }
 
@@ -3269,29 +3105,19 @@ a.box:active {
 }
 
 .file.is-centered {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .file.is-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .file.is-boxed .file-label {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 
 .file.is-boxed .file-cta {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   height: auto;
   padding: 1em 3em;
 }
@@ -3337,9 +3163,7 @@ a.box:active {
 .file.is-right .file-name {
   border-radius: 3px 0 0 3px;
   border-width: 1px 0 1px 1px;
-  -webkit-box-ordinal-group: 0;
-      -ms-flex-order: -1;
-          order: -1;
+  order: -1;
 }
 
 .file.is-fullwidth .file-label {
@@ -3347,23 +3171,15 @@ a.box:active {
 }
 
 .file.is-fullwidth .file-name {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
   max-width: none;
 }
 
 .file-label {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
   cursor: pointer;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   overflow: hidden;
   position: relative;
 }
@@ -3399,21 +3215,14 @@ a.box:active {
 .file-name {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border: 1px solid transparent;
   border-radius: 3px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
+  box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
   height: 2.25em;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   line-height: 1.5;
   padding-bottom: calc(0.375em - 1px);
   padding-left: calc(0.625em - 1px);
@@ -3459,16 +3268,10 @@ a.box:active {
 }
 
 .file-icon {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
   height: 1em;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin-right: 0.5em;
   width: 1em;
 }
@@ -3547,12 +3350,8 @@ a.box:active {
 }
 
 .field.has-addons {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .field.has-addons .control:not(:last-child) {
@@ -3612,43 +3411,29 @@ a.box:active {
 }
 
 .field.has-addons .control.is-expanded {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 
 .field.has-addons.has-addons-centered {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .field.has-addons.has-addons-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .field.has-addons.has-addons-fullwidth .control {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .field.is-grouped {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .field.is-grouped > .control {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-shrink: 0;
 }
 
 .field.is-grouped > .control:not(:last-child) {
@@ -3657,28 +3442,20 @@ a.box:active {
 }
 
 .field.is-grouped > .control.is-expanded {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .field.is-grouped.is-grouped-centered {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .field.is-grouped.is-grouped-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .field.is-grouped.is-grouped-multiline {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .field.is-grouped.is-grouped-multiline > .control:last-child, .field.is-grouped.is-grouped-multiline > .control:not(:last-child) {
@@ -3695,8 +3472,6 @@ a.box:active {
 
 @media screen and (min-width: 769px), print {
   .field.is-horizontal {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
 }
@@ -3713,13 +3488,9 @@ a.box:active {
 
 @media screen and (min-width: 769px), print {
   .field-label {
-    -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
     margin-right: 1.5rem;
     text-align: right;
   }
@@ -3746,28 +3517,19 @@ a.box:active {
 
 @media screen and (min-width: 769px), print {
   .field-body {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-preferred-size: 0;
-        flex-basis: 0;
-    -webkit-box-flex: 5;
-        -ms-flex-positive: 5;
-            flex-grow: 5;
-    -ms-flex-negative: 1;
-        flex-shrink: 1;
+    flex-basis: 0;
+    flex-grow: 5;
+    flex-shrink: 1;
   }
   .field-body .field {
     margin-bottom: 0;
   }
   .field-body > .field {
-    -ms-flex-negative: 1;
-        flex-shrink: 1;
+    flex-shrink: 1;
   }
   .field-body > .field:not(.is-narrow) {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
+    flex-grow: 1;
   }
   .field-body > .field:not(:last-child) {
     margin-right: 0.75rem;
@@ -3875,8 +3637,7 @@ a.box:active {
 }
 
 .control.is-loading::after {
-  -webkit-animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -3904,15 +3665,9 @@ a.box:active {
 }
 
 .icon {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
+  align-items: center;
   display: inline-flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   height: 1.5rem;
   width: 1.5rem;
 }
@@ -4375,17 +4130,10 @@ a.box:active {
 }
 
 .tags {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
 .tags .tag {
@@ -4419,20 +4167,14 @@ a.box:active {
 }
 
 .tag {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: whitesmoke;
   border-radius: 3px;
   color: #4a4a4a;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 0.75rem;
   height: 2em;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   line-height: 1.5;
   padding-left: 0.75em;
   padding-right: 0.75em;
@@ -4511,10 +4253,8 @@ a.box:active {
   left: 50%;
   position: absolute;
   top: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-          transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  -webkit-transform-origin: center center;
-          transform-origin: center center;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform-origin: center center;
 }
 
 .tag.is-delete:before {
@@ -4674,11 +4414,8 @@ a.tag:hover {
   border-radius: 290486px;
   cursor: pointer;
   display: inline-block;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
   font-size: 1rem;
   height: 20px;
   max-height: 20px;
@@ -4698,10 +4435,8 @@ a.tag:hover {
   left: 50%;
   position: absolute;
   top: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-          transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  -webkit-transform-origin: center center;
-          transform-origin: center center;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform-origin: center center;
 }
 
 .delete:before {
@@ -4780,8 +4515,7 @@ a.tag:hover {
 }
 
 .loader {
-  -webkit-animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -4794,19 +4528,13 @@ a.tag:hover {
 }
 
 .number {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: whitesmoke;
   border-radius: 290486px;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   font-size: 1.25rem;
   height: 2em;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin-right: 1.5rem;
   min-width: 2.5em;
   padding: 0.25rem 0.5rem;
@@ -4820,11 +4548,7 @@ a.tag:hover {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
   font-size: 1rem;
   overflow: hidden;
@@ -4837,16 +4561,10 @@ a.tag:hover {
 }
 
 .breadcrumb a {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   color: #7a7a7a;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding: 0.5em 0.75em;
 }
 
@@ -4855,11 +4573,7 @@ a.tag:hover {
 }
 
 .breadcrumb li {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
 }
 
@@ -4875,20 +4589,11 @@ a.tag:hover {
 }
 
 .breadcrumb ul, .breadcrumb ol {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-start;
 }
 
 .breadcrumb .icon:first-child {
@@ -4900,15 +4605,11 @@ a.tag:hover {
 }
 
 .breadcrumb.is-centered ol, .breadcrumb.is-centered ul {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .breadcrumb.is-right ol, .breadcrumb.is-right ul {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .breadcrumb.is-small {
@@ -4941,50 +4642,32 @@ a.tag:hover {
 
 .card {
   background-color: white;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   color: #4a4a4a;
   max-width: 100%;
   position: relative;
 }
 
 .card-header {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  -webkit-box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
+  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.1);
   display: flex;
 }
 
 .card-header-title {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   color: #363636;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
   font-weight: 700;
   padding: 0.75rem;
 }
 
 .card-header-icon {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   cursor: pointer;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding: 0.75rem;
 }
 
@@ -4999,31 +4682,17 @@ a.tag:hover {
 
 .card-footer {
   border-top: 1px solid #dbdbdb;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
 }
 
 .card-footer-item {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: center;
   padding: 0.75rem;
 }
 
@@ -5036,8 +4705,6 @@ a.tag:hover {
 }
 
 .dropdown {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
   vertical-align: top;
@@ -5065,8 +4732,7 @@ a.tag:hover {
 .dropdown-content {
   background-color: white;
   border-radius: 3px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   padding-bottom: 0.5rem;
   padding-top: 0.5rem;
 }
@@ -5104,12 +4770,8 @@ a.dropdown-item.is-active {
 }
 
 .level {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .level:not(:last-child) {
@@ -5126,15 +4788,11 @@ a.dropdown-item.is-active {
 }
 
 .level.is-mobile {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
 .level.is-mobile .level-left,
 .level.is-mobile .level-right {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -5147,41 +4805,25 @@ a.dropdown-item.is-active {
 }
 
 .level.is-mobile .level-item:not(.is-narrow) {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 
 @media screen and (min-width: 769px), print {
   .level {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
   .level > .level-item:not(.is-narrow) {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
+    flex-grow: 1;
   }
 }
 
 .level-item {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -ms-flex-preferred-size: auto;
-      flex-basis: auto;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
 }
 
 .level-item .title,
@@ -5197,13 +4839,9 @@ a.dropdown-item.is-active {
 
 .level-left,
 .level-right {
-  -ms-flex-preferred-size: auto;
-      flex-basis: auto;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .level-left .level-item:not(:last-child),
@@ -5213,18 +4851,12 @@ a.dropdown-item.is-active {
 
 .level-left .level-item.is-flexible,
 .level-right .level-item.is-flexible {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
+  flex-grow: 1;
 }
 
 .level-left {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 @media screen and (max-width: 768px) {
@@ -5235,35 +4867,23 @@ a.dropdown-item.is-active {
 
 @media screen and (min-width: 769px), print {
   .level-left {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
 }
 
 .level-right {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  align-items: center;
+  justify-content: flex-end;
 }
 
 @media screen and (min-width: 769px), print {
   .level-right {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
 }
 
 .media {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: flex-start;
   display: flex;
   text-align: left;
 }
@@ -5274,8 +4894,6 @@ a.dropdown-item.is-active {
 
 .media .media {
   border-top: 1px solid rgba(219, 219, 219, 0.5);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   padding-top: 0.75rem;
 }
@@ -5306,13 +4924,9 @@ a.dropdown-item.is-active {
 
 .media-left,
 .media-right {
-  -ms-flex-preferred-size: auto;
-      flex-basis: auto;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .media-left {
@@ -5324,13 +4938,9 @@ a.dropdown-item.is-active {
 }
 
 .media-content {
-  -ms-flex-preferred-size: auto;
-      flex-basis: auto;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
   text-align: left;
 }
 
@@ -5541,18 +5151,12 @@ a.dropdown-item.is-active {
 }
 
 .message-header {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: #4a4a4a;
   border-radius: 3px 3px 0 0;
   color: #fff;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   line-height: 1.25;
   padding: 0.5em 0.75em;
   position: relative;
@@ -5568,11 +5172,8 @@ a.dropdown-item.is-active {
 }
 
 .message-header .delete {
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
   margin-left: 0.75em;
 }
 
@@ -5613,21 +5214,15 @@ a.dropdown-item.is-active {
   position: absolute;
   right: 0;
   top: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   display: none;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   overflow: hidden;
   position: fixed;
   z-index: 20;
 }
 
 .modal.is-active {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
 }
 
@@ -5671,11 +5266,8 @@ a.dropdown-item.is-active {
   border-radius: 290486px;
   cursor: pointer;
   display: inline-block;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
   font-size: 1rem;
   height: 20px;
   max-height: 20px;
@@ -5701,10 +5293,8 @@ a.dropdown-item.is-active {
   left: 50%;
   position: absolute;
   top: 50%;
-  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-          transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  -webkit-transform-origin: center center;
-          transform-origin: center center;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform-origin: center center;
 }
 
 .modal-close:before {
@@ -5753,31 +5343,19 @@ a.dropdown-item.is-active {
 }
 
 .modal-card {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
   max-height: calc(100vh - 40px);
   overflow: hidden;
 }
 
 .modal-card-head,
 .modal-card-foot {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   background-color: whitesmoke;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-shrink: 0;
+  justify-content: flex-start;
   padding: 20px;
   position: relative;
 }
@@ -5790,11 +5368,8 @@ a.dropdown-item.is-active {
 
 .modal-card-title {
   color: #363636;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
   font-size: 1.5rem;
   line-height: 1;
 }
@@ -5812,11 +5387,8 @@ a.dropdown-item.is-active {
 .modal-card-body {
   -webkit-overflow-scrolling: touch;
   background-color: white;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
   overflow: auto;
   padding: 20px;
 }
@@ -5837,12 +5409,8 @@ a.dropdown-item.is-active {
   margin-left: -7px;
   position: absolute;
   top: 50%;
-  -webkit-transition: none 86ms ease-out;
   transition: none 86ms ease-out;
-  -webkit-transition-property: background, left, opacity, -webkit-transform;
-  transition-property: background, left, opacity, -webkit-transform;
   transition-property: background, left, opacity, transform;
-  transition-property: background, left, opacity, transform, -webkit-transform;
   width: 15px;
 }
 
@@ -5868,10 +5436,8 @@ a.dropdown-item.is-active {
 
 .nav-toggle.is-active span:nth-child(1) {
   margin-left: -5px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  -webkit-transform-origin: left top;
-          transform-origin: left top;
+  transform: rotate(45deg);
+  transform-origin: left top;
 }
 
 .nav-toggle.is-active span:nth-child(2) {
@@ -5880,10 +5446,8 @@ a.dropdown-item.is-active {
 
 .nav-toggle.is-active span:nth-child(3) {
   margin-left: -5px;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-  -webkit-transform-origin: left bottom;
-          transform-origin: left bottom;
+  transform: rotate(-45deg);
+  transform-origin: left bottom;
 }
 
 @media screen and (min-width: 769px), print {
@@ -5893,31 +5457,19 @@ a.dropdown-item.is-active {
 }
 
 .nav-item {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
   font-size: 1rem;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   line-height: 1.5;
   padding: 0.5rem 0.75rem;
 }
 
 .nav-item a {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .nav-item img {
@@ -5934,9 +5486,7 @@ a.dropdown-item.is-active {
 
 @media screen and (max-width: 768px) {
   .nav-item {
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
+    justify-content: flex-start;
   }
 }
 
@@ -5988,17 +5538,10 @@ a.nav-item:not(.button).is-tab.is-active {
 .nav-left,
 .nav-right {
   -webkit-overflow-scrolling: touch;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
   max-width: 100%;
   overflow: auto;
 }
@@ -6006,39 +5549,25 @@ a.nav-item:not(.button).is-tab.is-active {
 @media screen and (min-width: 1200px) {
   .nav-left,
   .nav-right {
-    -ms-flex-preferred-size: 0;
-        flex-basis: 0;
+    flex-basis: 0;
   }
 }
 
 .nav-left {
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   white-space: nowrap;
 }
 
 .nav-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .nav-center {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex-grow: 0;
+  flex-shrink: 0;
+  justify-content: center;
   margin-left: auto;
   margin-right: auto;
 }
@@ -6046,8 +5575,7 @@ a.nav-item:not(.button).is-tab.is-active {
 @media screen and (max-width: 768px) {
   .nav-menu.nav-right {
     background-color: white;
-    -webkit-box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
-            box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
+    box-shadow: 0 4px 7px rgba(10, 10, 10, 0.1);
     left: 0;
     display: none;
     right: 0;
@@ -6064,12 +5592,8 @@ a.nav-item:not(.button).is-tab.is-active {
 }
 
 .nav {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   background-color: white;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   height: 3.25rem;
   position: relative;
@@ -6078,19 +5602,14 @@ a.nav-item:not(.button).is-tab.is-active {
 }
 
 .nav > .container {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
   min-height: 3.25rem;
   width: 100%;
 }
 
 .nav.has-shadow {
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
 }
 
 .navbar {
@@ -6100,31 +5619,21 @@ a.nav-item:not(.button).is-tab.is-active {
 }
 
 .navbar > .container {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
   min-height: 3.25rem;
   width: 100%;
 }
 
 .navbar.has-shadow {
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
 }
 
 .navbar-brand {
   -webkit-overflow-scrolling: touch;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-shrink: 0;
   max-width: 100vw;
   min-height: 3.25rem;
   overflow-x: auto;
@@ -6148,12 +5657,8 @@ a.nav-item:not(.button).is-tab.is-active {
   margin-left: -7px;
   position: absolute;
   top: 50%;
-  -webkit-transition: none 86ms ease-out;
   transition: none 86ms ease-out;
-  -webkit-transition-property: background, left, opacity, -webkit-transform;
-  transition-property: background, left, opacity, -webkit-transform;
   transition-property: background, left, opacity, transform;
-  transition-property: background, left, opacity, transform, -webkit-transform;
   width: 15px;
 }
 
@@ -6179,10 +5684,8 @@ a.nav-item:not(.button).is-tab.is-active {
 
 .navbar-burger.is-active span:nth-child(1) {
   margin-left: -5px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  -webkit-transform-origin: left top;
-          transform-origin: left top;
+  transform: rotate(45deg);
+  transform-origin: left top;
 }
 
 .navbar-burger.is-active span:nth-child(2) {
@@ -6191,10 +5694,8 @@ a.nav-item:not(.button).is-tab.is-active {
 
 .navbar-burger.is-active span:nth-child(3) {
   margin-left: -5px;
-  -webkit-transform: rotate(-45deg);
-          transform: rotate(-45deg);
-  -webkit-transform-origin: left bottom;
-          transform-origin: left bottom;
+  transform: rotate(-45deg);
+  transform-origin: left bottom;
 }
 
 .navbar-menu {
@@ -6218,11 +5719,8 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 .navbar-item {
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .navbar-item img {
@@ -6254,11 +5752,8 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 .navbar-content {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .navbar-link {
@@ -6289,16 +5784,11 @@ a.navbar-item:hover, a.navbar-item.is-active,
     display: block;
   }
   .navbar-brand .navbar-item {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    align-items: center;
     display: flex;
   }
   .navbar-menu {
-    -webkit-box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-            box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
     padding: 0.5rem 0;
   }
   .navbar-menu.is-active {
@@ -6311,11 +5801,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar-menu,
   .navbar-start,
   .navbar-end {
-    -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-            align-items: stretch;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    align-items: stretch;
     display: flex;
   }
   .navbar {
@@ -6342,17 +5828,11 @@ a.navbar-item:hover, a.navbar-item.is-active,
   }
   .navbar-item,
   .navbar-link {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    align-items: center;
     display: flex;
   }
   .navbar-item.has-dropdown {
-    -webkit-box-align: stretch;
-        -ms-flex-align: stretch;
-            align-items: stretch;
+    align-items: stretch;
   }
   .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
     display: block;
@@ -6360,8 +5840,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
     opacity: 1;
     pointer-events: auto;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    transform: translateY(0);
   }
   .navbar-link::after {
     border: 1px solid #00d1b2;
@@ -6372,30 +5851,22 @@ a.navbar-item:hover, a.navbar-item.is-active,
     height: 0.5em;
     pointer-events: none;
     position: absolute;
-    -webkit-transform: rotate(-45deg);
-            transform: rotate(-45deg);
+    transform: rotate(-45deg);
     width: 0.5em;
     margin-top: -0.375em;
     right: 1.125em;
     top: 50%;
   }
   .navbar-menu {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 0;
-        flex-shrink: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
   }
   .navbar-start {
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
+    justify-content: flex-start;
     margin-right: auto;
   }
   .navbar-end {
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
+    justify-content: flex-end;
     margin-left: auto;
   }
   .navbar-dropdown {
@@ -6403,8 +5874,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     border-top: 1px solid #dbdbdb;
-    -webkit-box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
-            box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
+    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
     display: none;
     font-size: 0.875rem;
     left: 0;
@@ -6431,20 +5901,14 @@ a.navbar-item:hover, a.navbar-item.is-active,
   .navbar-dropdown.is-boxed {
     border-radius: 5px;
     border-top: none;
-    -webkit-box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-            box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+    box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
     display: block;
     opacity: 0;
     pointer-events: none;
     top: calc(100% + (-4px));
-    -webkit-transform: translateY(-5px);
-            transform: translateY(-5px);
-    -webkit-transition-duration: 86ms;
-            transition-duration: 86ms;
-    -webkit-transition-property: opacity, -webkit-transform;
-    transition-property: opacity, -webkit-transform;
+    transform: translateY(-5px);
+    transition-duration: 86ms;
     transition-property: opacity, transform;
-    transition-property: opacity, transform, -webkit-transform;
   }
   .navbar-dropdown.is-right {
     left: auto;
@@ -6489,15 +5953,9 @@ a.navbar-item:hover, a.navbar-item.is-active,
 
 .pagination,
 .pagination-list {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   text-align: center;
 }
 
@@ -6507,21 +5965,14 @@ a.navbar-item:hover, a.navbar-item.is-active,
 .pagination-ellipsis {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border: 1px solid transparent;
   border-radius: 3px;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
+  box-shadow: none;
   display: inline-flex;
   font-size: 1rem;
   height: 2.25em;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   line-height: 1.5;
   padding-bottom: calc(0.375em - 1px);
   padding-left: calc(0.625em - 1px);
@@ -6537,9 +5988,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
   font-size: 1em;
   padding-left: 0.5em;
   padding-right: 0.5em;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin: 0.25rem;
   text-align: center;
 }
@@ -6590,8 +6039,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
 .pagination-previous:active,
 .pagination-next:active,
 .pagination-link:active {
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
 }
 
 .pagination-previous[disabled],
@@ -6599,8 +6047,7 @@ a.navbar-item:hover, a.navbar-item.is-active,
 .pagination-link[disabled] {
   background-color: #dbdbdb;
   border-color: #dbdbdb;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
   color: #7a7a7a;
   opacity: 0.5;
 }
@@ -6624,96 +6071,59 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 .pagination-list {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 @media screen and (max-width: 768px) {
   .pagination {
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
+    flex-wrap: wrap;
   }
   .pagination-previous,
   .pagination-next {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 1;
-        flex-shrink: 1;
+    flex-grow: 1;
+    flex-shrink: 1;
   }
   .pagination-list li {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 1;
-        flex-shrink: 1;
+    flex-grow: 1;
+    flex-shrink: 1;
   }
 }
 
 @media screen and (min-width: 769px), print {
   .pagination-list {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
-    -ms-flex-negative: 1;
-        flex-shrink: 1;
-    -webkit-box-pack: start;
-        -ms-flex-pack: start;
-            justify-content: flex-start;
-    -webkit-box-ordinal-group: 2;
-        -ms-flex-order: 1;
-            order: 1;
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: flex-start;
+    order: 1;
   }
   .pagination-previous {
-    -webkit-box-ordinal-group: 3;
-        -ms-flex-order: 2;
-            order: 2;
+    order: 2;
   }
   .pagination-next {
-    -webkit-box-ordinal-group: 4;
-        -ms-flex-order: 3;
-            order: 3;
+    order: 3;
   }
   .pagination {
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
+    justify-content: space-between;
   }
   .pagination.is-centered .pagination-previous {
-    -webkit-box-ordinal-group: 2;
-        -ms-flex-order: 1;
-            order: 1;
+    order: 1;
   }
   .pagination.is-centered .pagination-list {
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
-    -webkit-box-ordinal-group: 3;
-        -ms-flex-order: 2;
-            order: 2;
+    justify-content: center;
+    order: 2;
   }
   .pagination.is-centered .pagination-next {
-    -webkit-box-ordinal-group: 4;
-        -ms-flex-order: 3;
-            order: 3;
+    order: 3;
   }
   .pagination.is-right .pagination-previous {
-    -webkit-box-ordinal-group: 2;
-        -ms-flex-order: 1;
-            order: 1;
+    order: 1;
   }
   .pagination.is-right .pagination-next {
-    -webkit-box-ordinal-group: 3;
-        -ms-flex-order: 2;
-            order: 2;
+    order: 2;
   }
   .pagination.is-right .pagination-list {
-    -webkit-box-pack: end;
-        -ms-flex-pack: end;
-            justify-content: flex-end;
-    -webkit-box-ordinal-group: 4;
-        -ms-flex-order: 3;
-            order: 3;
+    justify-content: flex-end;
+    order: 3;
   }
 }
 
@@ -6750,16 +6160,10 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 .panel-tabs {
-  -webkit-box-align: end;
-      -ms-flex-align: end;
-          align-items: flex-end;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: flex-end;
   display: flex;
   font-size: 0.875em;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .panel-tabs a {
@@ -6782,16 +6186,10 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 .panel-block {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   color: #363636;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
   padding: 0.5em 0.75em;
 }
 
@@ -6800,17 +6198,13 @@ a.navbar-item:hover, a.navbar-item.is-active,
 }
 
 .panel-block > .control {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
   width: 100%;
 }
 
 .panel-block.is-wrapped {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 .panel-block.is-active {
@@ -6856,16 +6250,10 @@ label.panel-block:hover {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
   font-size: 1rem;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  justify-content: space-between;
   overflow: hidden;
   overflow-x: auto;
   white-space: nowrap;
@@ -6876,19 +6264,13 @@ label.panel-block:hover {
 }
 
 .tabs a {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border-bottom-color: #dbdbdb;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   color: #4a4a4a;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin-bottom: -1px;
   padding: 0.5em 1em;
   vertical-align: top;
@@ -6909,23 +6291,14 @@ label.panel-block:hover {
 }
 
 .tabs ul {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   border-bottom-color: #dbdbdb;
   border-bottom-style: solid;
   border-bottom-width: 1px;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-start;
 }
 
 .tabs ul.is-left {
@@ -6933,20 +6306,14 @@ label.panel-block:hover {
 }
 
 .tabs ul.is-center {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  flex: none;
+  justify-content: center;
   padding-left: 0.75em;
   padding-right: 0.75em;
 }
 
 .tabs ul.is-right {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
   padding-left: 0.75em;
 }
 
@@ -6959,15 +6326,11 @@ label.panel-block:hover {
 }
 
 .tabs.is-centered ul {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .tabs.is-right ul {
-  -webkit-box-pack: end;
-      -ms-flex-pack: end;
-          justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .tabs.is-boxed a {
@@ -6987,11 +6350,8 @@ label.panel-block:hover {
 }
 
 .tabs.is-fullwidth li {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
 .tabs.is-toggle a {
@@ -7045,62 +6405,43 @@ label.panel-block:hover {
 
 .column {
   display: block;
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 0.75rem;
 }
 
 .columns.is-mobile > .column.is-narrow {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
 }
 
 .columns.is-mobile > .column.is-full {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 100%;
 }
 
 .columns.is-mobile > .column.is-three-quarters {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 75%;
 }
 
 .columns.is-mobile > .column.is-two-thirds {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 66.6666%;
 }
 
 .columns.is-mobile > .column.is-half {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 50%;
 }
 
 .columns.is-mobile > .column.is-one-third {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 33.3333%;
 }
 
 .columns.is-mobile > .column.is-one-quarter {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 25%;
 }
 
@@ -7125,9 +6466,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-1 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 8.33333%;
 }
 
@@ -7136,9 +6475,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-2 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 16.66667%;
 }
 
@@ -7147,9 +6484,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-3 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 25%;
 }
 
@@ -7158,9 +6493,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-4 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 33.33333%;
 }
 
@@ -7169,9 +6502,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-5 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 41.66667%;
 }
 
@@ -7180,9 +6511,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-6 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 50%;
 }
 
@@ -7191,9 +6520,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-7 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 58.33333%;
 }
 
@@ -7202,9 +6529,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-8 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 66.66667%;
 }
 
@@ -7213,9 +6538,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-9 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 75%;
 }
 
@@ -7224,9 +6547,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-10 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 83.33333%;
 }
 
@@ -7235,9 +6556,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-11 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 91.66667%;
 }
 
@@ -7246,9 +6565,7 @@ label.panel-block:hover {
 }
 
 .columns.is-mobile > .column.is-12 {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
+  flex: none;
   width: 100%;
 }
 
@@ -7258,44 +6575,30 @@ label.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .column.is-narrow-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-mobile {
@@ -7314,108 +6617,84 @@ label.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-mobile {
     margin-left: 8.33333%;
   }
   .column.is-2-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-mobile {
     margin-left: 16.66667%;
   }
   .column.is-3-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-mobile {
     margin-left: 25%;
   }
   .column.is-4-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-mobile {
     margin-left: 33.33333%;
   }
   .column.is-5-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-mobile {
     margin-left: 41.66667%;
   }
   .column.is-6-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-mobile {
     margin-left: 50%;
   }
   .column.is-7-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-mobile {
     margin-left: 58.33333%;
   }
   .column.is-8-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-mobile {
     margin-left: 66.66667%;
   }
   .column.is-9-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-mobile {
     margin-left: 75%;
   }
   .column.is-10-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-mobile {
     margin-left: 83.33333%;
   }
   .column.is-11-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-mobile {
     margin-left: 91.66667%;
   }
   .column.is-12-mobile {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-mobile {
@@ -7425,44 +6704,30 @@ label.panel-block:hover {
 
 @media screen and (min-width: 769px), print {
   .column.is-narrow, .column.is-narrow-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full, .column.is-full-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters, .column.is-three-quarters-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds, .column.is-two-thirds-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half, .column.is-half-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third, .column.is-one-third-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter, .column.is-one-quarter-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
@@ -7481,108 +6746,84 @@ label.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1, .column.is-1-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1, .column.is-offset-1-tablet {
     margin-left: 8.33333%;
   }
   .column.is-2, .column.is-2-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2, .column.is-offset-2-tablet {
     margin-left: 16.66667%;
   }
   .column.is-3, .column.is-3-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3, .column.is-offset-3-tablet {
     margin-left: 25%;
   }
   .column.is-4, .column.is-4-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4, .column.is-offset-4-tablet {
     margin-left: 33.33333%;
   }
   .column.is-5, .column.is-5-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5, .column.is-offset-5-tablet {
     margin-left: 41.66667%;
   }
   .column.is-6, .column.is-6-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6, .column.is-offset-6-tablet {
     margin-left: 50%;
   }
   .column.is-7, .column.is-7-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7, .column.is-offset-7-tablet {
     margin-left: 58.33333%;
   }
   .column.is-8, .column.is-8-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8, .column.is-offset-8-tablet {
     margin-left: 66.66667%;
   }
   .column.is-9, .column.is-9-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9, .column.is-offset-9-tablet {
     margin-left: 75%;
   }
   .column.is-10, .column.is-10-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10, .column.is-offset-10-tablet {
     margin-left: 83.33333%;
   }
   .column.is-11, .column.is-11-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11, .column.is-offset-11-tablet {
     margin-left: 91.66667%;
   }
   .column.is-12, .column.is-12-tablet {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12, .column.is-offset-12-tablet {
@@ -7592,44 +6833,30 @@ label.panel-block:hover {
 
 @media screen and (max-width: 1007px) {
   .column.is-narrow-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-touch {
@@ -7648,108 +6875,84 @@ label.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-touch {
     margin-left: 8.33333%;
   }
   .column.is-2-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-touch {
     margin-left: 16.66667%;
   }
   .column.is-3-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-touch {
     margin-left: 25%;
   }
   .column.is-4-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-touch {
     margin-left: 33.33333%;
   }
   .column.is-5-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-touch {
     margin-left: 41.66667%;
   }
   .column.is-6-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-touch {
     margin-left: 50%;
   }
   .column.is-7-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-touch {
     margin-left: 58.33333%;
   }
   .column.is-8-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-touch {
     margin-left: 66.66667%;
   }
   .column.is-9-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-touch {
     margin-left: 75%;
   }
   .column.is-10-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-touch {
     margin-left: 83.33333%;
   }
   .column.is-11-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-touch {
     margin-left: 91.66667%;
   }
   .column.is-12-touch {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-touch {
@@ -7759,44 +6962,30 @@ label.panel-block:hover {
 
 @media screen and (min-width: 1008px) {
   .column.is-narrow-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-desktop {
@@ -7815,108 +7004,84 @@ label.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-desktop {
     margin-left: 8.33333%;
   }
   .column.is-2-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-desktop {
     margin-left: 16.66667%;
   }
   .column.is-3-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-desktop {
     margin-left: 25%;
   }
   .column.is-4-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-desktop {
     margin-left: 33.33333%;
   }
   .column.is-5-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-desktop {
     margin-left: 41.66667%;
   }
   .column.is-6-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-desktop {
     margin-left: 50%;
   }
   .column.is-7-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-desktop {
     margin-left: 58.33333%;
   }
   .column.is-8-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-desktop {
     margin-left: 66.66667%;
   }
   .column.is-9-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-desktop {
     margin-left: 75%;
   }
   .column.is-10-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-desktop {
     margin-left: 83.33333%;
   }
   .column.is-11-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-desktop {
     margin-left: 91.66667%;
   }
   .column.is-12-desktop {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-desktop {
@@ -7926,44 +7091,30 @@ label.panel-block:hover {
 
 @media screen and (min-width: 1200px) {
   .column.is-narrow-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-widescreen {
@@ -7982,108 +7133,84 @@ label.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-widescreen {
     margin-left: 8.33333%;
   }
   .column.is-2-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-widescreen {
     margin-left: 16.66667%;
   }
   .column.is-3-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-widescreen {
     margin-left: 25%;
   }
   .column.is-4-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-widescreen {
     margin-left: 33.33333%;
   }
   .column.is-5-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-widescreen {
     margin-left: 41.66667%;
   }
   .column.is-6-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-widescreen {
     margin-left: 50%;
   }
   .column.is-7-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-widescreen {
     margin-left: 58.33333%;
   }
   .column.is-8-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-widescreen {
     margin-left: 66.66667%;
   }
   .column.is-9-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-widescreen {
     margin-left: 75%;
   }
   .column.is-10-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-widescreen {
     margin-left: 83.33333%;
   }
   .column.is-11-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-widescreen {
     margin-left: 91.66667%;
   }
   .column.is-12-widescreen {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-widescreen {
@@ -8093,44 +7220,30 @@ label.panel-block:hover {
 
 @media screen and (min-width: 1392px) {
   .column.is-narrow-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
   }
   .column.is-full-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-three-quarters-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-two-thirds-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.6666%;
   }
   .column.is-half-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-one-third-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.3333%;
   }
   .column.is-one-quarter-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-three-quarters-fullhd {
@@ -8149,108 +7262,84 @@ label.panel-block:hover {
     margin-left: 25%;
   }
   .column.is-1-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .column.is-offset-1-fullhd {
     margin-left: 8.33333%;
   }
   .column.is-2-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .column.is-offset-2-fullhd {
     margin-left: 16.66667%;
   }
   .column.is-3-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .column.is-offset-3-fullhd {
     margin-left: 25%;
   }
   .column.is-4-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .column.is-offset-4-fullhd {
     margin-left: 33.33333%;
   }
   .column.is-5-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .column.is-offset-5-fullhd {
     margin-left: 41.66667%;
   }
   .column.is-6-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .column.is-offset-6-fullhd {
     margin-left: 50%;
   }
   .column.is-7-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .column.is-offset-7-fullhd {
     margin-left: 58.33333%;
   }
   .column.is-8-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .column.is-offset-8-fullhd {
     margin-left: 66.66667%;
   }
   .column.is-9-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .column.is-offset-9-fullhd {
     margin-left: 75%;
   }
   .column.is-10-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .column.is-offset-10-fullhd {
     margin-left: 83.33333%;
   }
   .column.is-11-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .column.is-offset-11-fullhd {
     margin-left: 91.66667%;
   }
   .column.is-12-fullhd {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
   .column.is-offset-12-fullhd {
@@ -8261,19 +7350,23 @@ label.panel-block:hover {
 .columns {
   margin-left: -0.75rem;
   margin-right: -0.75rem;
+  margin-top: -0.75rem;
+}
+
+.columns:last-child {
+  margin-bottom: -0.75rem;
 }
 
 .columns:not(:last-child) {
-  margin-bottom: 1.5rem;
+  margin-bottom: calc(1.5rem - 0.75rem);
 }
 
 .columns.is-centered {
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .columns.is-gapless {
+  margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
 }
@@ -8283,70 +7376,107 @@ label.panel-block:hover {
   padding: 0 !important;
 }
 
-.columns.is-mobile {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.columns.is-multiline {
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-
-.columns.is-multiline > .column {
-  padding-bottom: 0.75rem;
-  padding-top: 0.75rem;
+.columns.is-gapless:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-.columns.is-multiline:not(.is-gapless) {
-  margin-top: -0.75rem;
+.columns.is-gapless:last-child {
+  margin-bottom: 0;
 }
 
-.columns.is-multiline:not(.is-gapless):last-child {
-  margin-bottom: -0.75rem;
+.columns.is-mobile {
+  display: flex;
 }
 
-.columns.is-multiline:not(.is-gapless):not(:last-child) {
-  margin-bottom: calc(1.5rem - 0.75rem);
+.columns.is-multiline {
+  flex-wrap: wrap;
 }
 
 .columns.is-vcentered {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
 }
 
 @media screen and (min-width: 769px), print {
   .columns:not(.is-desktop) {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
 }
 
 @media screen and (min-width: 1008px) {
   .columns.is-desktop {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
 }
 
+.columns.is-variable {
+  --columnGap: 0.75rem;
+  margin-left: calc(-1 * var(--columnGap));
+  margin-right: calc(-1 * var(--columnGap));
+}
+
+.columns.is-variable .column {
+  padding-left: var(--columnGap);
+  padding-right: var(--columnGap);
+}
+
+.columns.is-variable.is-0 {
+  --columnGap: 0rem;
+}
+
+.columns.is-variable.is-1 {
+  --columnGap: 0.25rem;
+}
+
+.columns.is-variable.is-2 {
+  --columnGap: 0.5rem;
+}
+
+.columns.is-variable.is-3 {
+  --columnGap: 0.75rem;
+}
+
+.columns.is-variable.is-4 {
+  --columnGap: 1rem;
+}
+
+.columns.is-variable.is-5 {
+  --columnGap: 1.25rem;
+}
+
+.columns.is-variable.is-6 {
+  --columnGap: 1.5rem;
+}
+
+.columns.is-variable.is-7 {
+  --columnGap: 1.75rem;
+}
+
+.columns.is-variable.is-8 {
+  --columnGap: 2rem;
+}
+
+.columns.is-variable.is-9 {
+  --columnGap: 2.25rem;
+}
+
+.columns.is-variable.is-10 {
+  --columnGap: 2.5rem;
+}
+
+.columns.is-variable.is-11 {
+  --columnGap: 2.75rem;
+}
+
+.columns.is-variable.is-12 {
+  --columnGap: 3rem;
+}
+
 .tile {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
+  align-items: stretch;
   display: block;
-  -ms-flex-preferred-size: 0;
-      flex-basis: 0;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
-  min-height: -webkit-min-content;
-  min-height: -moz-min-content;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
   min-height: min-content;
 }
 
@@ -8373,10 +7503,7 @@ label.panel-block:hover {
 }
 
 .tile.is-vertical {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
+  flex-direction: column;
 }
 
 .tile.is-vertical > .tile.is-child:not(:last-child) {
@@ -8385,104 +7512,68 @@ label.panel-block:hover {
 
 @media screen and (min-width: 769px), print {
   .tile:not(.is-child) {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
   .tile.is-1 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 8.33333%;
   }
   .tile.is-2 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 16.66667%;
   }
   .tile.is-3 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 25%;
   }
   .tile.is-4 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 33.33333%;
   }
   .tile.is-5 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 41.66667%;
   }
   .tile.is-6 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 50%;
   }
   .tile.is-7 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 58.33333%;
   }
   .tile.is-8 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 66.66667%;
   }
   .tile.is-9 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 75%;
   }
   .tile.is-10 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 83.33333%;
   }
   .tile.is-11 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 91.66667%;
   }
   .tile.is-12 {
-    -webkit-box-flex: 0;
-        -ms-flex: none;
-            flex: none;
+    flex: none;
     width: 100%;
   }
 }
 
 .hero {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .hero .nav {
   background: none;
-  -webkit-box-shadow: 0 1px 0 rgba(219, 219, 219, 0.3);
-          box-shadow: 0 1px 0 rgba(219, 219, 219, 0.3);
+  box-shadow: 0 1px 0 rgba(219, 219, 219, 0.3);
 }
 
 .hero .tabs ul {
@@ -8513,8 +7604,7 @@ label.panel-block:hover {
 }
 
 .hero.is-white .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(10, 10, 10, 0.2);
-          box-shadow: 0 1px 0 rgba(10, 10, 10, 0.2);
+  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -8610,8 +7700,7 @@ label.panel-block:hover {
 }
 
 .hero.is-black .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -8707,8 +7796,7 @@ label.panel-block:hover {
 }
 
 .hero.is-light .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(54, 54, 54, 0.2);
-          box-shadow: 0 1px 0 rgba(54, 54, 54, 0.2);
+  box-shadow: 0 1px 0 rgba(54, 54, 54, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -8804,8 +7892,7 @@ label.panel-block:hover {
 }
 
 .hero.is-dark .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(245, 245, 245, 0.2);
-          box-shadow: 0 1px 0 rgba(245, 245, 245, 0.2);
+  box-shadow: 0 1px 0 rgba(245, 245, 245, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -8901,8 +7988,7 @@ label.panel-block:hover {
 }
 
 .hero.is-primary .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -8998,8 +8084,7 @@ label.panel-block:hover {
 }
 
 .hero.is-info .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -9095,8 +8180,7 @@ label.panel-block:hover {
 }
 
 .hero.is-success .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -9192,8 +8276,7 @@ label.panel-block:hover {
 }
 
 .hero.is-warning .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
-          box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -9289,8 +8372,7 @@ label.panel-block:hover {
 }
 
 .hero.is-danger .nav {
-  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
-          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
 }
 
 @media screen and (max-width: 768px) {
@@ -9377,20 +8459,13 @@ label.panel-block:hover {
 }
 
 .hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
 }
 
 .hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .hero.is-halfheight {
@@ -9416,8 +8491,7 @@ label.panel-block:hover {
   min-width: 100%;
   position: absolute;
   top: 50%;
-  -webkit-transform: translate3d(-50%, -50%, 0);
-          transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
 }
 
 .hero-video.is-transparent {
@@ -9436,8 +8510,6 @@ label.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero-buttons .button {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
   }
   .hero-buttons .button:not(:last-child) {
@@ -9447,12 +8519,8 @@ label.panel-block:hover {
 
 @media screen and (min-width: 769px), print {
   .hero-buttons {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
   }
   .hero-buttons .button:not(:last-child) {
     margin-right: 1.5rem;
@@ -9461,19 +8529,13 @@ label.panel-block:hover {
 
 .hero-head,
 .hero-foot {
-  -webkit-box-flex: 0;
-      -ms-flex-positive: 0;
-          flex-grow: 0;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 0;
+  flex-shrink: 0;
 }
 
 .hero-body {
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
   padding: 3rem 1.5rem;
 }
 
@@ -9762,8 +8824,7 @@ svg {
 }
 
 #carbon:hover {
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
 }
 
 @media screen and (min-width: 769px), print {
@@ -9818,54 +8879,18 @@ svg {
   right: 0;
 }
 
-@-webkit-keyframes floatUp {
-  0% {
-    -webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-            box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  67% {
-    -webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-            box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-  100% {
-    -webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-            box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
 @keyframes floatUp {
   0% {
-    -webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-            box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0);
+    transform: scale(0.86);
   }
   67% {
-    -webkit-box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-            box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+    transform: scale(1);
   }
   100% {
-    -webkit-box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-            box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
-@-webkit-keyframes strokePath {
-  from {
-    stroke-dashoffset: 880;
-  }
-  to {
-    stroke-dashoffset: 0;
+    box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2);
+    transform: scale(1);
   }
 }
 
@@ -9878,129 +8903,59 @@ svg {
   }
 }
 
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
 @keyframes fadeIn {
   from {
     opacity: 0;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    transform: scale(0.86);
   }
   to {
     opacity: 1;
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
-@-webkit-keyframes fadeOut {
-  0% {
-    opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  67% {
-    opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    transform: scale(1);
   }
 }
 
 @keyframes fadeOut {
   0% {
     opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    transform: scale(0.86);
   }
   67% {
     opacity: 1;
-    -webkit-transform: scale(0.86);
-            transform: scale(0.86);
+    transform: scale(0.86);
   }
   100% {
     opacity: 0;
-    -webkit-transform: scale(1);
-            transform: scale(1);
-  }
-}
-
-@-webkit-keyframes slideDown {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(-10px);
-            transform: translateY(-10px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    transform: scale(1);
   }
 }
 
 @keyframes slideDown {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(-10px);
-            transform: translateY(-10px);
-  }
-  100% {
-    opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
-  }
-}
-
-@-webkit-keyframes slideUp {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
+    transform: translateY(-10px);
   }
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    transform: translateY(0);
   }
 }
 
 @keyframes slideUp {
   0% {
     opacity: 0;
-    -webkit-transform: translateY(10px);
-            transform: translateY(10px);
+    transform: translateY(10px);
   }
   100% {
     opacity: 1;
-    -webkit-transform: translateY(0);
-            transform: translateY(0);
+    transform: translateY(0);
   }
 }
 
 #b {
-  -webkit-animation-duration: 1.5s;
-          animation-duration: 1.5s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: floatUp;
-          animation-name: floatUp;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: floatUp;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
   border-radius: 24px;
   display: inline-block;
   height: 240px;
@@ -10022,25 +8977,17 @@ svg {
 }
 
 #b svg:first-child {
-  -webkit-animation-duration: 1.5s;
-          animation-duration: 1.5s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: fadeOut;
-          animation-name: fadeOut;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: fadeOut;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
 }
 
 #b svg:first-child g {
-  -webkit-animation-duration: 1s;
-          animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: strokePath;
-          animation-name: strokePath;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: strokePath;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
   fill: none;
   stroke: #00d1b2;
   stroke-dasharray: 880;
@@ -10048,16 +8995,11 @@ svg {
 }
 
 #b svg:last-child {
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s;
-  -webkit-animation-duration: 1s;
-          animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-          animation-fill-mode: both;
-  -webkit-animation-name: fadeIn;
-          animation-name: fadeIn;
-  -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
-          animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  animation-delay: 1s;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: fadeIn;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
 }
 
 #b svg:last-child g {
@@ -10073,32 +9015,21 @@ svg {
 }
 
 #bulma {
-  -webkit-animation: slideDown 500ms both;
-          animation: slideDown 500ms both;
+  animation: slideDown 500ms both;
 }
 
 #modern-framework {
-  -webkit-animation: slideUp 500ms both;
-          animation: slideUp 500ms both;
-  -webkit-animation-delay: 0.2s;
-          animation-delay: 0.2s;
+  animation: slideUp 500ms both;
+  animation-delay: 0.2s;
 }
 
 #npm {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-animation: fadeIn 500ms both;
-          animation: fadeIn 500ms both;
-  -webkit-animation-delay: 0.4s;
-          animation-delay: 0.4s;
+  align-items: center;
+  animation: fadeIn 500ms both;
+  animation-delay: 0.4s;
   background: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin: -10px 0 20px;
 }
 
@@ -10112,24 +9043,18 @@ svg {
 }
 
 #ghbtns {
-  -webkit-animation: slideDown 500ms both;
-          animation: slideDown 500ms both;
-  -webkit-animation-delay: 0.6s;
-          animation-delay: 0.6s;
+  animation: slideDown 500ms both;
+  animation-delay: 0.6s;
 }
 
 html.route-index #carbon {
-  -webkit-animation: slideUp 500ms both;
-          animation: slideUp 500ms both;
-  -webkit-animation-delay: 0.8s;
-          animation-delay: 0.8s;
+  animation: slideUp 500ms both;
+  animation-delay: 0.8s;
 }
 
 #download {
-  -webkit-animation: fadeIn 500ms both;
-          animation: fadeIn 500ms both;
-  -webkit-animation-delay: 1s;
-          animation-delay: 1s;
+  animation: fadeIn 500ms both;
+  animation-delay: 1s;
 }
 
 #grid .notification {
@@ -10144,8 +9069,7 @@ html.route-index #carbon {
 #tweet {
   background: white;
   border-radius: 5px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   padding: 1.5rem;
 }
 
@@ -10190,9 +9114,7 @@ html.route-index #carbon {
     padding-right: 1rem;
   }
   #moreDropdown .navbar-item .level {
-    -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-            flex-grow: 1;
+    flex-grow: 1;
   }
 }
 
@@ -10222,17 +9144,10 @@ html.route-index #carbon {
 }
 
 #social {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
 #social > iframe,
@@ -10260,32 +9175,22 @@ html.route-index #carbon {
 }
 
 #social .fb-like {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
   width: 130px;
 }
 
 #newsletter .input {
   border-color: white;
-  -webkit-box-shadow: none;
-          box-shadow: none;
+  box-shadow: none;
 }
 
 #sister ul {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 #sister li {
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   height: 30px;
   margin: 5px 1rem 0 0;
@@ -10317,8 +9222,7 @@ html.route-index #carbon {
 
 .bd-color {
   border-radius: 2px;
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-          box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   display: inline-block;
   float: left;
   height: 24px;
@@ -10443,18 +9347,15 @@ html.route-index #carbon {
 }
 
 .bd-article-image:hover .bd-article-icon {
-  -webkit-transform: scale(1.4);
-          transform: scale(1.4);
+  transform: scale(1.4);
 }
 
 .bd-article-image:hover .bd-article-date {
-  -webkit-transform: scale(0.9);
-          transform: scale(0.9);
+  transform: scale(0.9);
 }
 
 .bd-article-image:hover .bd-article-title {
-  -webkit-transform: scale(1.1);
-          transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 .bd-article-image.is-single {
@@ -10470,12 +9371,9 @@ html.route-index #carbon {
   top: 0;
   background-color: #0a0a0a;
   opacity: 0;
-  -webkit-transition-duration: 86ms;
-          transition-duration: 86ms;
-  -webkit-transition-property: opacity;
+  transition-duration: 86ms;
   transition-property: opacity;
-  -webkit-transition-timing-function: ease-out;
-          transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
 }
 
 .bd-article-icon,
@@ -10485,28 +9383,17 @@ html.route-index #carbon {
   position: absolute;
   right: 0;
   top: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .bd-article-icon,
 .bd-article-date,
 .bd-article-title {
-  -webkit-transition-duration: 86ms;
-          transition-duration: 86ms;
-  -webkit-transition-property: -webkit-transform;
-  transition-property: -webkit-transform;
+  transition-duration: 86ms;
   transition-property: transform;
-  transition-property: transform, -webkit-transform;
-  -webkit-transition-timing-function: ease-out;
-          transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
 }
 
 .bd-article-icon {
@@ -10548,7 +9435,7 @@ html.route-index #carbon {
 .bd-notification {
   background-color: whitesmoke;
   border-radius: 3px;
-  padding: 1.25rem 1.5rem;
+  padding: 1.25rem 0;
   position: relative;
   text-align: center;
 }
@@ -10670,6 +9557,11 @@ html.route-index #carbon {
   margin-bottom: 1.5rem;
 }
 
+.highlight.bd-is-hovering {
+  border-radius: 2px;
+  box-shadow: 0 0 0 3px #dbdbdb;
+}
+
 .highlight pre {
   max-height: 480px;
   margin-bottom: 0 !important;
@@ -10721,18 +9613,12 @@ html.route-index #carbon {
   position: absolute;
   right: 0;
   top: 0;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   content: attr(title);
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   font-family: monospace;
   font-size: 11px;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   padding: 3px 5px;
   z-index: 2;
 }
@@ -10742,12 +9628,8 @@ html.route-index #carbon {
 }
 
 .bd-structure-item.bd-is-structure-container:after {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
   padding: 0.5rem 0.75rem;
 }
 
@@ -10757,31 +9639,27 @@ html.route-index #carbon {
 
 .highlight .bd-copy,
 .highlight .bd-expand {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background: white;
-  border: solid #dbdbdb;
-  border-width: 0 0 1px 1px;
-  color: #7a7a7a;
+  background: none;
+  border: none;
+  color: #4a4a4a;
   cursor: pointer;
+  font-size: 0.625rem;
   outline: none;
+  padding-bottom: 0;
+  padding-top: 0;
   position: absolute;
-  right: 0;
-  top: 0;
+  right: 0.25rem;
+  top: 0.25rem;
 }
 
 .highlight .bd-copy:hover,
 .highlight .bd-expand:hover {
-  border-color: #ff3860;
-  color: #ff3860;
+  background-color: #4a4a4a;
+  color: white;
 }
 
 .highlight .bd-expand {
-  border-right-width: 1px;
-  right: 50px;
+  right: 45px;
 }
 
 @media screen and (min-width: 769px), print {
@@ -10897,8 +9775,7 @@ html.route-index #carbon {
 #_default_ > a {
   background-color: white;
   border-radius: 5px;
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   color: #4a4a4a;
   display: block;
   line-height: 1.375;
@@ -10910,13 +9787,11 @@ html.route-index #carbon {
 }
 
 #_default_ > a:hover, #_default_ > a:focus {
-  -webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
-          box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
 }
 
 #_default_ > a:active {
-  -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
-          box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
 }
 
 #_default_ > a span {
@@ -10957,12 +9832,8 @@ html.route-index #carbon {
     min-height: 120px;
   }
   #_default_ {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
     position: relative;
   }
   #_default_ .default-ad {
@@ -11032,11 +9903,8 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 
 .bd-tws {
   background-color: whitesmoke;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
+  flex-wrap: wrap;
   overflow: auto;
   padding: 20px;
 }
@@ -11046,32 +9914,21 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   border: 1px solid #e1e8ed;
   border-radius: 5px;
   color: #697882;
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-shrink: 0;
   font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
   font-size: 16px;
   padding: 20px;
 }
 
 .bd-tw-header {
-  -webkit-box-align: stretch;
-      -ms-flex-align: stretch;
-          align-items: stretch;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: stretch;
   display: flex;
-  -webkit-box-pack: start;
-      -ms-flex-pack: start;
-          justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .bd-tw-author {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
+  align-items: center;
   color: #1c2022;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
   line-height: 1.2;
 }
@@ -11081,8 +9938,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-tw-avatar {
-  -ms-flex-negative: 0;
-      flex-shrink: 0;
+  flex-shrink: 0;
   height: 36px;
   margin-right: 9px;
   width: 36px;
@@ -11141,11 +9997,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .Tweet-actions {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
   margin-top: 8.4px;
 }
@@ -11155,11 +10007,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .TweetAction {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
   height: 24px;
   min-width: 24px;
@@ -11297,15 +10145,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-website-image {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin-bottom: 1.5rem;
   position: relative;
 }
@@ -11317,7 +10159,6 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 .bd-website-overlay {
   background-color: #0a0a0a;
   opacity: 0;
-  -webkit-transition: opacity 200ms ease-out;
   transition: opacity 200ms ease-out;
 }
 
@@ -11333,14 +10174,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
     padding-top: 3rem;
   }
   .bd-websites {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
-    -webkit-box-pack: justify;
-        -ms-flex-pack: justify;
-            justify-content: space-between;
+    flex-wrap: wrap;
+    justify-content: space-between;
   }
   .bd-website {
     margin-top: 3rem;
@@ -11362,15 +10198,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-testimonial {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: flex-start;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .bd-testimonial-tweet {
@@ -11378,15 +10208,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-more-loves {
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: center;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
   margin-top: 1.5rem;
   text-align: center;
 }
@@ -11397,17 +10221,12 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-more-loves .button span {
-  -webkit-transform-origin: center center;
-          transform-origin: center center;
-  -webkit-transition: -webkit-transform 86ms ease-out;
-  transition: -webkit-transform 86ms ease-out;
+  transform-origin: center center;
   transition: transform 86ms ease-out;
-  transition: transform 86ms ease-out, -webkit-transform 86ms ease-out;
 }
 
 .bd-more-loves .button:hover span {
-  -webkit-transform: scale(1.04);
-          transform: scale(1.04);
+  transform: scale(1.04);
 }
 
 @media screen and (max-width: 768px) {
@@ -11447,8 +10266,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-rainbow {
-  -webkit-animation: rainbow 8s ease infinite;
-          animation: rainbow 8s ease infinite;
+  animation: rainbow 8s ease infinite;
   background-image: linear-gradient(124deg, #ff470f, #ff3860, #b86bff, #3273dc);
   background-size: 800% 800%;
 }
@@ -11458,18 +10276,6 @@ html.route-index .hero.is-primary a.column:hover .title strong {
   color: white;
 }
 
-@-webkit-keyframes rainbow {
-  0% {
-    background-position: 0% 80%;
-  }
-  50% {
-    background-position: 100% 20%;
-  }
-  100% {
-    background-position: 0% 80%;
-  }
-}
-
 @keyframes rainbow {
   0% {
     background-position: 0% 80%;
@@ -11483,15 +10289,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 }
 
 .bd-hug {
-  -webkit-box-align: start;
-      -ms-flex-align: start;
-          align-items: flex-start;
-  display: -webkit-box;
-  display: -ms-flexbox;
+  align-items: flex-start;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  justify-content: center;
 }
 
 .bd-embrace {
@@ -11527,15 +10327,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
     padding-top: 3rem;
   }
   .bd-embrace {
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-    display: -webkit-box;
-    display: -ms-flexbox;
+    align-items: center;
     display: flex;
-    -webkit-box-pack: center;
-        -ms-flex-pack: center;
-            justify-content: center;
+    justify-content: center;
   }
   .bd-embrace:not(:first-child) {
     margin-top: 3rem;
@@ -11547,11 +10341,8 @@ html.route-index .hero.is-primary a.column:hover .title strong {
     margin-left: 1.5rem;
   }
   .bd-hugs {
-    display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
-    -ms-flex-wrap: wrap;
-        flex-wrap: wrap;
+    flex-wrap: wrap;
     padding-bottom: 3rem;
   }
   .bd-hug {
@@ -11696,9 +10487,3 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 .bd-comparison-header {
   margin-bottom: 3rem;
 }
-
-.columns {
-  background-color: coral;
-}
-
-/*# sourceMappingURL=bulma-docs.css.map */
\ No newline at end of file

diff --git a/docs/documentation/columns/basics.html b/docs/documentation/columns/basics.html
new file mode 100644 (file)
index 0000000..1805e71
--- /dev/null
+++ b/docs/documentation/columns/basics.html
@@ -0,0 +1,58 @@
+---
+title: Columns powered by Flexbox
+layout: documentation
+doc-tab: columns
+doc-subtab: basics
+---
+
+{% capture columns %}
+<div class="columns">
+  <div class="column">
+    First column
+  </div>
+  <div class="column">
+    Second column
+  </div>
+  <div class="column">
+    Third column
+  </div>
+  <div class="column">
+    Fourth column
+  </div>
+</div>
+{% endcapture %}
+
+{% include subnav-columns.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Columns</h1>
+    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
+    <hr>
+    <div class="content">
+      <p>Building a <strong>columns layout</strong> with Bulma is very simple:</p>
+      <ol>
+        <li>Add a <code>columns</code> container</li>
+        <li>Add as many <code>column</code> elements as you want</li>
+      </ol>
+      <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <p class="bd-notification is-info">First column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Second column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Third column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Fourth column</p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns }}{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/columns/nesting.html b/docs/documentation/columns/nesting.html
new file mode 100644 (file)
index 0000000..68f7f5b
--- /dev/null
+++ b/docs/documentation/columns/nesting.html
@@ -0,0 +1,79 @@
+---
+title: Nesting columns
+layout: documentation
+doc-tab: columns
+doc-subtab: nesting
+---
+
+{% include subnav-columns.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Nesting columns</h1>
+    <h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
+    <hr>
+
+    <div class="content">
+      <p>
+        You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
+      </p>
+      <ul>
+        <li>
+          <code>columns</code>: top-level columns container
+          <ul>
+            <li>
+              <code>column</code>
+              <ul>
+                <li>
+                  <code>columns</code>: nested columns
+                  <ul>
+                    <li>
+                      <code>column</code> and so on…
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <p>
+        The difference with <a href="{{ site.url }}/documentation/columns/options/#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
+      </p>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        <p class="bd-notification is-info">First column</p>
+        <div class="columns is-mobile">
+          <div class="column">
+            <p class="bd-notification is-info">First nested column</p>
+          </div>
+          <div class="column">
+            <p class="bd-notification is-info">Second nested column</p>
+          </div>
+        </div>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Second column</p>
+        <div class="columns is-mobile">
+          <div class="column is-half">
+            <p class="bd-notification is-danger">50%</p>
+          </div>
+          <div class="column">
+            <p class="bd-notification is-danger">Auto</p>
+          </div>
+          <div class="column">
+            <p class="bd-notification is-danger">Auto</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <p>
+        Multiline columns will also have a <strong>gap</strong> between each <strong>line</strong>.
+      </p>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/columns/options.html b/docs/documentation/columns/options.html
new file mode 100644 (file)
index 0000000..e81803d
--- /dev/null
+++ b/docs/documentation/columns/options.html
@@ -0,0 +1,238 @@
+---
+title: Column options
+layout: documentation
+doc-tab: columns
+doc-subtab: options
+---
+
+{% capture columns_multiline %}
+<div class="columns is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-half">
+    <code>is-half</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column">
+    Auto
+  </div>
+</div>
+{% endcapture %}
+
+{% capture columns_gapless %}
+<div class="columns is-gapless">
+  <div class="column">First column</div>
+  <div class="column">Second column</div>
+  <div class="column">Third column</div>
+  <div class="column">Fourth column</div>
+</div>
+{% endcapture %}
+
+{% capture columns_gapless_multiline %}
+<div class="columns is-gapless is-multiline is-mobile">
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-half">
+    <code>is-half</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column is-one-quarter">
+    <code>is-one-quarter</code>
+  </div>
+  <div class="column">
+    Auto
+  </div>
+</div>
+{% endcapture %}
+
+{% capture columns_narrow %}
+<div class="columns">
+  <div class="column is-narrow">
+    <div class="box" style="width: 200px;">
+      <p class="title is-5">Narrow column</p>
+      <p class="subtitle">This column is only 200px wide.</p>
+    </div>
+  </div>
+  <div class="column">
+    <div class="box">
+      <p class="title is-5">Flexible column</p>
+      <p class="subtitle">This column will take up the remaining space available.</p>
+    </div>
+  </div>
+</div>
+{% endcapture %}
+
+{% include subnav-columns.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Column options</h1>
+    <h2 class="subtitle">
+      Design different <strong>types</strong> of column layouts
+    </h2>
+
+    {% include anchor.html name="Multiline" %}
+
+    <div class="content">
+      <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
+    </div>
+
+    <div class="columns is-multiline is-mobile">
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-info"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-half">
+        <p class="bd-notification is-info"><code>is-half</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-info">Auto</p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_multiline }}{% endhighlight %}
+
+    {% include anchor.html name="Gapless" %}
+
+    <div class="content">
+      <p>
+        If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:
+      </p>
+    </div>
+
+    <div class="columns is-gapless">
+      <div class="column">
+        <p class="bd-notification is-info">First column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Second column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Third column</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Fourth column</p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_gapless }}{% endhighlight %}
+
+    <div class="content">
+      <p>You can combine it with the <code>is-multiline</code> modifier:</p>
+    </div>
+
+    <div class="columns is-multiline is-mobile is-gapless">
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-info"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-half">
+        <p class="bd-notification is-info"><code>is-half</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-success"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-warning"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-danger"><code>is-one-quarter</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-info">Auto</p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
+
+    {% include anchor.html name="Narrow column" %}
+
+    <div class="content">
+      <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-narrow">
+        <div class="box" style="width: 200px;">
+          <p class="title is-5">Narrow column</p>
+          <p class="subtitle">This column is only 200px wide.</p>
+        </div>
+      </div>
+      <div class="column">
+        <div class="box">
+          <p class="title is-5">Flexible column</p>
+          <p class="subtitle">This column will take up the remaining space available.</p>
+        </div>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_narrow }}{% endhighlight %}
+
+    <div class="content">
+      <p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
+      <ul>
+        <li>
+          <code>is-narrow-mobile</code>
+        </li>
+        <li>
+          <code>is-narrow-tablet</code>
+        </li>
+        <li>
+          <code>is-narrow-desktop</code>
+        </li>
+      </ul>
+    </div>
+  </div>
+</section>

diff --git a/docs/documentation/columns/responsiveness.html b/docs/documentation/columns/responsiveness.html
new file mode 100644 (file)
index 0000000..70e37bc
--- /dev/null
+++ b/docs/documentation/columns/responsiveness.html
@@ -0,0 +1,143 @@
+---
+title: Columns responsiveness
+layout: documentation
+doc-tab: columns
+doc-subtab: responsiveness
+---
+
+{% capture columns_mobile %}
+<div class="columns is-mobile">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+</div>
+{% endcapture %}
+
+{% capture columns_desktop %}
+<div class="columns is-desktop">
+  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+</div>
+{% endcapture %}
+
+{% capture columns_multiple_breakpoints %}
+<div class="columns is-mobile">
+  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+    <code>is-half-mobile</code><br>
+    <code>is-one-third-tablet</code><br>
+    <code>is-one-quarter-desktop</code>
+  </div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+  <div class="column">1</div>
+</div>
+{% endcapture %}
+
+{% include subnav-columns.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Columns responsiveness</h1>
+    <h2 class="subtitle">
+      Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>
+    </h2>
+
+    {% include anchor.html name="Mobile columns" %}
+
+    <div class="content">
+      <p>
+        By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.
+        <br>
+        If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:
+      </p>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column">
+        <p class="bd-notification is-info">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">2</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">3</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">4</p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_mobile }}{% endhighlight %}
+
+    <div class="message is-info">
+      <p class="message-header">
+        Resize
+      </p>
+      <p class="message-body">
+        If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.
+      </p>
+    </div>
+
+    <div class="content">
+      <p>
+        If you <em>only</em> want columns on <strong>desktop</strong> upwards, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:
+      </p>
+    </div>
+
+    <div class="columns is-desktop">
+      <div class="column">
+        <p class="bd-notification is-info">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">2</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">3</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">4</p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_desktop }}{% endhighlight %}
+
+    {% include anchor.html name="Different column sizes per breakpoint" %}
+
+    <div class="content">
+      <p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+        <p class="bd-notification is-info">
+          <code>is-half-mobile</code><br>
+          <code>is-one-third-tablet</code><br>
+          <code>is-one-quarter-desktop</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">1</p>
+      </div>
+    </div>
+
+    <div class="message is-info">
+      <p class="message-header">Resize</p>
+      <p class="message-body">If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.</p>
+    </div>
+
+    {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/columns/sizes.html b/docs/documentation/columns/sizes.html
new file mode 100644 (file)
index 0000000..28bf0ef
--- /dev/null
+++ b/docs/documentation/columns/sizes.html
@@ -0,0 +1,433 @@
+---
+title: Column sizes
+layout: documentation
+doc-tab: columns
+doc-subtab: sizes
+---
+
+{% capture columns_sizes %}
+<div class="columns">
+  <div class="column is-three-quarters">is-three-quarters</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
+
+<div class="columns">
+  <div class="column is-two-thirds">is-two-thirds</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
+
+<div class="columns">
+  <div class="column is-half">is-half</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-third">is-one-third</div>
+  <div class="column">Auto</div>
+  <div class="column">Auto</div>
+</div>
+
+<div class="columns">
+  <div class="column is-one-quarter">is-one-quarter</div>
+  <div class="column">Auto</div>
+</div>
+{% endcapture %}
+
+{% capture columns_offset %}
+<div class="columns is-mobile">
+  <div class="column is-half is-offset-one-quarter"></div>
+</div>
+
+<div class="columns is-mobile">
+  <div class="column is-4 is-offset-8"></div>
+</div>
+
+<div class="columns is-mobile">
+  <div class="column is-11 is-offset-1"></div>
+</div>
+{% endcapture %}
+
+{% include subnav-columns.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Column sizes</h1>
+    <h2 class="subtitle">
+      Define the <strong>size</strong> of each column <strong>individually</strong>
+    </h2>
+
+    <hr>
+
+    <div class="content">
+      <p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
+      <ul>
+        <li>
+          <code>is-three-quarters</code>
+        </li>
+        <li>
+          <code>is-two-thirds</code>
+        </li>
+        <li>
+          <code>is-half</code>
+        </li>
+        <li>
+          <code>is-one-third</code>
+        </li>
+        <li>
+          <code>is-one-quarter</code>
+        </li>
+      </ul>
+      <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-three-quarters">
+        <p class="bd-notification is-info">
+          <code class="html">is-three-quarters</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Auto</p>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-two-thirds">
+        <p class="bd-notification is-info">
+          <code class="html">is-two-thirds</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Auto</p>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <p class="bd-notification is-info">
+          <code class="html">is-half</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-danger">Auto</p>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p class="bd-notification is-info">
+          <code class="html">is-one-third</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Auto</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning">Auto</p>
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-quarter">
+        <p class="bd-notification is-info">
+          <code class="html">is-one-quarter</code>
+        </p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success">Auto</p>
+      </div>
+    </div>
+
+    <div class="highlight-full">
+      {% highlight html %}{{ columns_sizes }}{% endhighlight %}
+    </div>
+
+    {% include anchor.html name="12 columns system" %}
+
+    <div class="content">
+      <p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
+      <ul>
+        <li><code>is-2</code></li>
+        <li><code>is-3</code></li>
+        <li><code>is-4</code></li>
+        <li><code>is-5</code></li>
+        <li><code>is-6</code></li>
+        <li><code>is-7</code></li>
+        <li><code>is-8</code></li>
+        <li><code>is-9</code></li>
+        <li><code>is-10</code></li>
+        <li><code>is-11</code></li>
+      </ul>
+    </div>
+
+    <div class="message is-info">
+      <p class="message-header">Naming convention</p>
+      <p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-2">
+        <p class="bd-notification is-info"><code>is-2</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-3">
+        <p class="bd-notification is-info"><code>is-3</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-4">
+        <p class="bd-notification is-info"><code>is-4</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-5">
+        <p class="bd-notification is-info"><code>is-5</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-6">
+        <p class="bd-notification is-info"><code>is-6</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-7">
+        <p class="bd-notification is-info"><code>is-7</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-8">
+        <p class="bd-notification is-info"><code>is-8</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-9">
+        <p class="bd-notification is-info"><code>is-9</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-10">
+        <p class="bd-notification is-info"><code>is-10</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-success has-text-centered">1</p>
+      </div>
+    </div>
+    <div class="columns">
+      <div class="column is-11">
+        <p class="bd-notification is-info"><code>is-11</code></p>
+      </div>
+      <div class="column">
+        <p class="bd-notification is-warning has-text-centered">1</p>
+      </div>
+    </div>
+
+    {% include anchor.html name="Offset" %}
+
+    <div class="content">
+      <p>
+        While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
+      </p>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-half is-offset-one-quarter">
+        <p class="bd-notification is-info">
+          <code class="html">is-half</code><br>
+          <code class="html">is-offset-one-quarter</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-4 is-offset-8">
+        <p class="bd-notification is-info">
+          <code class="html">is-4</code><br>
+          <code class="html">is-offset-8</code>
+        </p>
+      </div>
+    </div>
+
+    <div class="columns is-mobile">
+      <div class="column is-11 is-offset-1">
+        <p class="bd-notification is-info">
+          <code class="html">is-11</code><br>
+          <code class="html">is-offset-1</code>
+        </p>
+      </div>
+    </div>
+
+    {% highlight html %}{{ columns_offset }}{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/components/breadcrumb.html b/docs/documentation/components/breadcrumb.html
index e5e2f0cf26204456dccc33908c32b3a8635d351f..73c69bf99dec452acbdc3aca20601d9f73511773 100644 (file)
--- a/docs/documentation/components/breadcrumb.html
+++ b/docs/documentation/components/breadcrumb.html
@@ -232,7 +232,7 @@ variables:
 
     {% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="content">
       <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>

diff --git a/docs/documentation/components/message.html b/docs/documentation/components/message.html
index 304fd1211d829e8ddd10e66116dfcb64f799540e..1692547be607f357614c078504105b6802d0e590 100644 (file)
--- a/docs/documentation/components/message.html
+++ b/docs/documentation/components/message.html
@@ -210,7 +210,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-half">
@@ -236,7 +236,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column is-half">

diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html
index 652e1ebd65ccac248b5d15c51ea1ddb09d8d0821..37e0cf6f5b1727cfa03603cb42eb69e994f94b7e 100644 (file)
--- a/docs/documentation/components/navbar.html
+++ b/docs/documentation/components/navbar.html
@@ -597,7 +597,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% highlight html %}{{navbar_example}}{% endhighlight %}
 
-    {% include heading.html name="Navbar brand" %}
+    {% include anchor.html name="Navbar brand" %}
 
     <div class="content">
       <p>
@@ -633,7 +633,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </p>
     </div>
 
-    {% include heading.html name="Navbar burger" %}
+    {% include anchor.html name="Navbar burger" %}
 
     <div class="content">
       <p>
@@ -665,7 +665,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </div>
     </div>
 
-    {% include heading.html name="Navbar menu" %}
+    {% include anchor.html name="Navbar menu" %}
 
     <div class="content">
       <p>
@@ -716,7 +716,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </div>
     </div>
 
-    {% include heading.html name="Navbar start and navbar end" %}
+    {% include anchor.html name="Navbar start and navbar end" %}
 
     <div class="content">
       <p>
@@ -740,7 +740,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
 
-    {% include heading.html name="Navbar item" %}
+    {% include anchor.html name="Navbar item" %}
 
     <div class="content">
       <p>
@@ -790,7 +790,7 @@ document.addEventListener('DOMContentLoaded', function () {
       </ul>
     </div>
 
-    {% include heading.html name="Transparent navbar" %}
+    {% include anchor.html name="Transparent navbar" %}
 
     <div class="content">
       <p>
@@ -804,7 +804,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
     {% highlight html %}{{navbar_transparent_example}}{% endhighlight %}
 
-    {% include heading.html name="Dropdown menu" %}
+    {% include anchor.html name="Dropdown menu" %}
 
     <div class="content">
       <p>

diff --git a/docs/documentation/components/tabs.html b/docs/documentation/components/tabs.html
index 9f56a32a51749a57eaae05fc71cf165915ac261c..dd387ee43cd7d13de4ca5da153b50a178308628b 100644 (file)
--- a/docs/documentation/components/tabs.html
+++ b/docs/documentation/components/tabs.html
@@ -418,7 +418,7 @@ variables:
     </div>
     {% highlight html %}{{tabs_icons_example}}{% endhighlight %}
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
     <div class="content">
       <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
     </div>

diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html
index f3f1286d95544e4817db638133c64aa78312fabb..d80ec7eb06fa0df87c161c25c65daca670e2d8e6 100644 (file)
--- a/docs/documentation/elements/button.html
+++ b/docs/documentation/elements/button.html
@@ -417,7 +417,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column">
@@ -437,7 +437,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column">

diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html
index 2cdd9346828d8dc2b84900864c8104852936f171..21456eba81452b2d83ac0c74b5e879c1f2450ee4 100644 (file)
--- a/docs/documentation/elements/content.html
+++ b/docs/documentation/elements/content.html
@@ -170,7 +170,7 @@ variables:
 
     {% highlight html %}{{content_example}}{% endhighlight %}
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="content">
       <p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>

diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html
index f214d32280c956972c853edd43dac04fec0b5a37..c512230886be1a9306453c6e1cfa7ab2f7599def 100644 (file)
--- a/docs/documentation/elements/delete.html
+++ b/docs/documentation/elements/delete.html
@@ -77,7 +77,7 @@ doc-subtab: delete
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column">

diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index 34e6e030916d6e2b697501af11ee6c1a33f61a9b..e3a76926bae8a13b9bfef4b00ff4c8030cb0d783 100644 (file)
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -52,7 +52,7 @@ variables:
       <p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="content">
       <p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html
index 309b1b2a0ef7f777d88cbefa428f05dd39638c20..a23e56fd19923bc4c778bc81467e05ecf20cece0 100644 (file)
--- a/docs/documentation/elements/notification.html
+++ b/docs/documentation/elements/notification.html
@@ -84,7 +84,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column">

diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html
index 01d4a4465a4b0742abfe79aee1ac833fdbd15131..7cc0a0b95ae95a4a48853a7caa2713d694fe0dca 100644 (file)
--- a/docs/documentation/elements/progress.html
+++ b/docs/documentation/elements/progress.html
@@ -51,14 +51,14 @@ variables:
     </div>
     {% highlight html %}{{ progress }}{% endhighlight %}
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="bd-example">
       {{ progress_colors }}
     </div>
     {% highlight html %}{{ progress_colors }}{% endhighlight %}
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="bd-example">
       {{ progress_sizes }}

diff --git a/docs/documentation/elements/tag.html b/docs/documentation/elements/tag.html
index 6ffaf8e4ee5faef72b9e16f01e04aa0f9146d1f1..7bce6bfd67455d4db44c822da81697cad20dc81f 100644 (file)
--- a/docs/documentation/elements/tag.html
+++ b/docs/documentation/elements/tag.html
@@ -214,7 +214,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-4">
@@ -270,7 +270,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column is-4">
@@ -293,7 +293,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Modifiers" %}
+    {% include anchor.html name="Modifiers" %}
 
     <div class="columns">
       <div class="column is-4">
@@ -319,7 +319,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Combinations" %}
+    {% include anchor.html name="Combinations" %}
 
     <div class="columns">
       <div class="column is-4">
@@ -350,7 +350,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="List of tags" %}
+    {% include anchor.html name="List of tags" %}
 
     <div class="tags has-addons">
       <span class="tag is-success">New!</span>

diff --git a/docs/documentation/elements/title.html b/docs/documentation/elements/title.html
index 936a4a164735a4f22a875a07205650110e303e06..782812015e3815771c9b5ed3078998b7a47482c4 100644 (file)
--- a/docs/documentation/elements/title.html
+++ b/docs/documentation/elements/title.html
@@ -107,7 +107,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column">

diff --git a/docs/documentation/form/file.html b/docs/documentation/form/file.html
index ce6b3c521844227b593aafeb89054734a0a61c23..db85ab8dbc97e58238611402362150f100ba01c2 100644 (file)
--- a/docs/documentation/form/file.html
+++ b/docs/documentation/form/file.html
@@ -602,7 +602,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Modifiers" %}
+    {% include anchor.html name="Modifiers" %}
 
     <div class="columns">
       <div class="column">
@@ -684,7 +684,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column">
@@ -709,7 +709,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="content">
       <p>
@@ -772,7 +772,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Alignment" %}
+    {% include anchor.html name="Alignment" %}
 
     <div class="content">
       <p>
@@ -810,7 +810,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="JavaScript" %}
+    {% include anchor.html name="JavaScript" %}
 
     <div class="content">
       <p>

diff --git a/docs/documentation/form/input.html b/docs/documentation/form/input.html
index 01328e0e417ffe7c24166f7fc66cffd9f1c4d4bc..925415bc60a42428e63ab6f9c3466f7787787f28 100644 (file)
--- a/docs/documentation/form/input.html
+++ b/docs/documentation/form/input.html
@@ -256,7 +256,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-half">
@@ -267,7 +267,7 @@ variables:
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column is-half">

diff --git a/docs/documentation/form/select.html b/docs/documentation/form/select.html
index f508dfc53296a215747627202bc1ac1db3c6e3df..c8ca399eab04a245ac4310f3851a58c95467dfbb 100644 (file)
--- a/docs/documentation/form/select.html
+++ b/docs/documentation/form/select.html
@@ -320,7 +320,7 @@ doc-subtab: select
       </div>
     {% endif %}
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-half">
@@ -331,7 +331,7 @@ doc-subtab: select
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column is-half">

diff --git a/docs/documentation/form/textarea.html b/docs/documentation/form/textarea.html
index b570df058a0c31072808f49125a6f021c5d28afc..3998f39ad42ccec761f41d26f9e95a7bd69977cf 100644 (file)
--- a/docs/documentation/form/textarea.html
+++ b/docs/documentation/form/textarea.html
@@ -171,7 +171,7 @@ doc-subtab: textarea
       </div>
     </div>
 
-    {% include heading.html name="Colors" %}
+    {% include anchor.html name="Colors" %}
 
     <div class="columns">
       <div class="column is-half">
@@ -182,7 +182,7 @@ doc-subtab: textarea
       </div>
     </div>
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="columns">
       <div class="column is-half">

diff --git a/docs/documentation/grid/columns.html b/docs/documentation/grid/columns.html
index 5b23dc7d19d772ac55a962fcc1be22f83b25f9f1..491f796a7911d0bcabb1244a940233368d1cbead 100644 (file)
--- a/docs/documentation/grid/columns.html
+++ b/docs/documentation/grid/columns.html
@@ -313,7 +313,7 @@ doc-subtab: columns
       <p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
     </div>
 
-    <div class="columns">
+    <div class="columns is-variable">
       <div class="column">
         <p class="bd-notification is-info">First column</p>
       </div>
@@ -330,7 +330,7 @@ doc-subtab: columns
 
     {% highlight html %}{{ columns }}{% endhighlight %}
 
-    {% include heading.html name="Sizes" %}
+    {% include anchor.html name="Sizes" %}
 
     <div class="content">
       <p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
@@ -655,7 +655,7 @@ doc-subtab: columns
       </div>
     </div>
 
-    {% include heading.html name="Offset" %}
+    {% include anchor.html name="Offset" %}
 
     <div class="content">
       <p>
@@ -692,7 +692,7 @@ doc-subtab: columns
 
     {% highlight html %}{{ columns_offset }}{% endhighlight %}
 
-    {% include heading.html name="Centering columns" %}
+    {% include anchor.html name="Centering columns" %}
 
     <div class="content">
       <p>
@@ -719,31 +719,31 @@ doc-subtab: columns
 
     <div class="columns is-mobile is-multiline is-centered">
       <div class="column is-narrow">
-        <p class="bd-notification is-info">
+        <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
           <code class="html">is-narrow</code><br>
           First Column
         </p>
       </div>
       <div class="column is-narrow">
-        <p class="bd-notification is-success">
+        <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
           <code class="html">is-narrow</code><br>
           Our Second Column
         </p>
       </div>
       <div class="column is-narrow">
-        <p class="bd-notification is-danger">
+        <p class="bd-notification is-danger" style="padding: 1.25rem 1.5rem;">
           <code class="html">is-narrow</code><br>
           Third Column
         </p>
       </div>
       <div class="column is-narrow">
-        <p class="bd-notification is-info">
+        <p class="bd-notification is-info" style="padding: 1.25rem 1.5rem;">
           <code class="html">is-narrow</code><br>
           The Fourth Column
         </p>
       </div>
       <div class="column is-narrow">
-        <p class="bd-notification is-success">
+        <p class="bd-notification is-success" style="padding: 1.25rem 1.5rem;">
           <code class="html">is-narrow</code><br>
           Fifth Column
         </p>
@@ -752,7 +752,7 @@ doc-subtab: columns
 
     {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
 
-    {% include heading.html name="Responsiveness" %}
+    {% include anchor.html name="Responsiveness" %}
 
     <div class="content">
       <p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
@@ -827,7 +827,7 @@ doc-subtab: columns
     </div>
     {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
 
-    {% include heading.html name="Nesting" %}
+    {% include anchor.html name="Nesting" %}
 
     <div class="content">
       <p>
@@ -888,7 +888,7 @@ doc-subtab: columns
 
     {% highlight html %}{{ columns_nesting }}{% endhighlight %}
 
-    {% include heading.html name="Multiline" %}
+    {% include anchor.html name="Multiline" %}
 
     <div class="content">
       <p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
@@ -925,7 +925,7 @@ doc-subtab: columns
 
     {% highlight html %}{{ columns_multiline }}{% endhighlight %}
 
-    {% include heading.html name="Gapless" %}
+    {% include anchor.html name="Gapless" %}
 
     <div class="content">
       <p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
@@ -979,7 +979,7 @@ doc-subtab: columns
     </div>
     {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
 
-    {% include heading.html name="Narrow column" %}
+    {% include anchor.html name="Narrow column" %}
 
     <div class="content">
       <p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>

diff --git a/docs/documentation/layout/tiles.html b/docs/documentation/layout/tiles.html
new file mode 100644 (file)
index 0000000..1a5d276
--- /dev/null
+++ b/docs/documentation/layout/tiles.html
@@ -0,0 +1,897 @@
+---
+title: Tiles powered by Flexbox
+layout: documentation
+doc-tab: layout
+doc-subtab: tiles
+---
+
+{% include subnav-layout.html %}
+
+<section class="section">
+  <div class="container">
+    <h1 class="title">Tiles</h1>
+    <h2 class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
+
+    <hr>
+
+    <div class="content">
+      <p>To build intricate 2-dimensional layouts, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
+    </div>
+
+{% highlight html %}
+<div class="tile">
+  <!-- The magical tile element! -->
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Example</h3>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child notification is-primary">
+              <p class="title">Vertical...</p>
+              <p class="subtitle">Top tile</p>
+            </article>
+            <article class="tile is-child notification is-warning">
+              <p class="title">...tiles</p>
+              <p class="subtitle">Bottom tile</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child notification is-info">
+              <p class="title">Middle tile</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child notification is-danger">
+            <p class="title">Wide tile</p>
+            <p class="subtitle">Aligned with the right tile</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-success">
+          <div class="content">
+            <p class="title">Tall tile</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child notification is-primary">
+          <p class="title">Vertical...</p>
+          <p class="subtitle">Top tile</p>
+        </article>
+        <article class="tile is-child notification is-warning">
+          <p class="title">...tiles</p>
+          <p class="subtitle">Bottom tile</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child notification is-info">
+          <p class="title">Middle tile</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child notification is-danger">
+        <p class="title">Wide tile</p>
+        <p class="subtitle">Aligned with the right tile</p>
+        <div class="content">
+          <!-- Content -->
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child notification is-success">
+      <div class="content">
+        <p class="title">Tall tile</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <!-- Content -->
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Modifiers</h3>
+
+    <div class="content">
+      <p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
+      <ul>
+        <li>
+          <strong>3 contextual</strong> modifiers
+          <ul>
+            <li><code>is-ancestor</code></li>
+            <li><code>is-parent</code></li>
+            <li><code>is-child</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>1 directional</strong> modifier
+          <ul>
+            <li><code>is-vertical</code></li>
+          </ul>
+        </li>
+        <li>
+          <strong>12 horizontal size</strong> modifiers
+          <ul>
+            <li>from <code>is-1</code></li>
+            <li>to <code>is-12</code></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <hr>
+
+    <h3 class="title">How it works: Nesting</h3>
+    <div class="content">
+      <p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <!-- All other tile elemnts -->
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile">
+    <!-- Add content or other tiles -->
+  </div>
+  <div class="tile">
+    <!-- Add content or other tiles -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>
+          You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
+          <br>
+          For example, <code>is-4</code> will take up 1/3 of the horizontal space:
+        </p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4">
+    <!-- 1/3 -->
+  </div>
+  <div class="tile">
+    <!-- This tile will take the rest: 2/3 -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical">
+    <div class="tile">
+      <!-- Top tile -->
+    </div>
+    <div class="tile">
+      <!-- Bottom tile -->
+    </div>
+  </div>
+  <div class="tile">
+    <!-- This tile will take up the whole vertical space -->
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="columns">
+      <div class="column is-one-third">
+        <div class="content">
+          <p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
+          <ul>
+            <li>add <em>any</em> class you want, like <code>box</code></li>
+            <li>add the <code>is-child</code> modifier on the tile</li>
+            <li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
+          </ul>
+        </div>
+      </div>
+      <div class="column is-two-thirds">
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical is-parent">
+    <div class="tile is-child box">
+      <p class="title">One</p>
+    </div>
+    <div class="tile is-child box">
+      <p class="title">Two</p>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <div class="tile is-child box">
+      <p class="title">Three</p>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+      </div>
+    </div>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-4 is-vertical is-parent">
+        <div class="tile is-child box">
+          <p class="title">One</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+        <div class="tile is-child box">
+          <p class="title">Two</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <div class="tile is-child box">
+          <p class="title">Three</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-4 is-vertical is-parent">
+    <div class="tile is-child box">
+      <p class="title">One</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+    <div class="tile is-child box">
+      <p class="title">Two</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <div class="tile is-child box">
+      <p class="title">Three</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+      <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+      <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+    </div>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">Nesting requirements</h3>
+
+    <article class="message is-danger">
+      <div class="message-header">
+        3 levels deep at least...
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>You need at least <strong>3 levels</strong> of hierarchy:</p>
+{% highlight markdown %}
+tile is-ancestor
+|
+└───tile is-parent
+    |
+    └───tile is-child
+{% endhighlight %}
+        </div>
+      </div>
+    </article>
+
+    <article class="message is-success">
+      <div class="message-header">
+        ...but more levels if you want!
+      </div>
+      <div class="message-body">
+        <div class="content">
+          <p>You can, however, nest tiles deeper than that, and mix it up!</p>
+{% highlight markdown %}
+tile is-ancestor
+|
+├───tile is-vertical is-8
+|   |
+|   ├───tile
+|   |   |
+|   |   ├───tile is-parent is-vertical
+|   |   |   ├───tile is-child
+|   |   |   └───tile is-child
+|   |   |
+|   |   └───tile is-parent
+|   |       └───tile is-child
+|   |
+|   └───tile is-parent
+|       └───tile is-child
+|
+└───tile is-parent
+    └───tile is-child
+{% endhighlight %}
+        </div>
+      </div>
+    </article>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Top box</p>
+            </article>
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Bottom box</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Middle box</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Wide column</p>
+            <p class="subtitle">Aligned with the right column</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Tall column</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <!-- Put any content you want -->
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <!-- Put any content you want -->
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <!-- Put any content you want -->
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">3 columns</h3>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Hello World</p>
+          <p class="subtitle">What is up?</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Foo</p>
+          <p class="subtitle">Bar</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Third column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-8">
+        <div class="tile">
+          <div class="tile is-parent is-vertical">
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Top box</p>
+            </article>
+            <article class="tile is-child box">
+              <p class="title">Vertical tiles</p>
+              <p class="subtitle">Bottom box</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Middle box</p>
+              <p class="subtitle">With an image</p>
+              <figure class="image is-4by3">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
+              </figure>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Wide column</p>
+            <p class="subtitle">Aligned with the right column</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+            </div>
+          </article>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Tall column</p>
+            <p class="subtitle">With even more content</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Side column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent is-8">
+        <article class="tile is-child box">
+          <p class="title">Main column</p>
+          <p class="subtitle">With some content</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Hello World</p>
+      <p class="subtitle">What is up?</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Foo</p>
+      <p class="subtitle">Bar</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Third column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-8">
+    <div class="tile">
+      <div class="tile is-parent is-vertical">
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Top box</p>
+        </article>
+        <article class="tile is-child box">
+          <p class="title">Vertical tiles</p>
+          <p class="subtitle">Bottom box</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Middle box</p>
+          <p class="subtitle">With an image</p>
+          <figure class="image is-4by3">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
+          </figure>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-parent">
+      <article class="tile is-child box">
+        <p class="title">Wide column</p>
+        <p class="subtitle">Aligned with the right column</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+        </div>
+      </article>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Tall column</p>
+        <p class="subtitle">With even more content</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Side column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-8">
+    <article class="tile is-child box">
+      <p class="title">Main column</p>
+      <p class="subtitle">With some content</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+
+    <hr>
+
+    <h3 class="title">4 columns</h3>
+
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">One</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Two</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Three</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Four</p>
+          <p class="subtitle">Subtitle</p>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-vertical is-9">
+        <div class="tile">
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Five</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              </div>
+            </article>
+          </div>
+          <div class="tile is-8 is-vertical">
+            <div class="tile">
+              <div class="tile is-parent">
+                <article class="tile is-child box">
+                  <p class="title">Six</p>
+                  <p class="subtitle">Subtitle</p>
+                </article>
+              </div>
+              <div class="tile is-parent">
+                <article class="tile is-child box">
+                  <p class="title">Seven</p>
+                  <p class="subtitle">Subtitle</p>
+                </article>
+              </div>
+            </div>
+            <div class="tile is-parent">
+              <article class="tile is-child box">
+                <p class="title">Eight</p>
+                <p class="subtitle">Subtitle</p>
+              </article>
+            </div>
+          </div>
+        </div>
+        <div class="tile">
+          <div class="tile is-8 is-parent">
+            <article class="tile is-child box">
+              <p class="title">Nine</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+              </div>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Ten</p>
+              <p class="subtitle">Subtitle</p>
+              <div class="content">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <div class="content">
+            <p class="title">Eleven</p>
+            <p class="subtitle">Subtitle</p>
+            <div class="content">
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+              <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+            </div>
+          </div>
+        </article>
+      </div>
+    </div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Twelve</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent is-6">
+        <article class="tile is-child box">
+          <p class="title">Thirteen</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Fourteen</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+
+{% highlight html %}
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">One</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Two</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Three</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Four</p>
+      <p class="subtitle">Subtitle</p>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-vertical is-9">
+    <div class="tile">
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Five</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-8 is-vertical">
+        <div class="tile">
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Six</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+          <div class="tile is-parent">
+            <article class="tile is-child box">
+              <p class="title">Seven</p>
+              <p class="subtitle">Subtitle</p>
+            </article>
+          </div>
+        </div>
+        <div class="tile is-parent">
+          <article class="tile is-child box">
+            <p class="title">Eight</p>
+            <p class="subtitle">Subtitle</p>
+          </article>
+        </div>
+      </div>
+    </div>
+    <div class="tile">
+      <div class="tile is-8 is-parent">
+        <article class="tile is-child box">
+          <p class="title">Nine</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+      <div class="tile is-parent">
+        <article class="tile is-child box">
+          <p class="title">Ten</p>
+          <p class="subtitle">Subtitle</p>
+          <div class="content">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+          </div>
+        </article>
+      </div>
+    </div>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <div class="content">
+        <p class="title">Eleven</p>
+        <p class="subtitle">Subtitle</p>
+        <div class="content">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
+          <p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
+        </div>
+      </div>
+    </article>
+  </div>
+</div>
+
+<div class="tile is-ancestor">
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Twelve</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent is-6">
+    <article class="tile is-child box">
+      <p class="title">Thirteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
+      </div>
+    </article>
+  </div>
+  <div class="tile is-parent">
+    <article class="tile is-child box">
+      <p class="title">Fourteen</p>
+      <p class="subtitle">Subtitle</p>
+      <div class="content">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
+      </div>
+    </article>
+  </div>
+</div>
+{% endhighlight %}
+  </div>
+</section>

diff --git a/docs/documentation/overview/start.html b/docs/documentation/overview/start.html
index 07d6cbf9eecbb1049dcfe00291455c87c1d8dae5..e7d9802ba7b8a56c48a9eea3ec278793a6d7ca1f 100644 (file)
--- a/docs/documentation/overview/start.html
+++ b/docs/documentation/overview/start.html
@@ -81,7 +81,7 @@ doc-subtab: start
       </div>
     </div>
 
-    {% include heading.html name="Starter template" %}
+    {% include anchor.html name="Starter template" %}
 
     <div class="content">
       <p>

diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index b562160275f67a78c5ce3394774490a1164b5d31..c30e8e18a4dc9264e6c2212e66a8e9a35dfb49bf 100644 (file)
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -249,7 +249,7 @@ derived_variables:
       </p>
     </div>
 
-    {% include heading.html name="Initial variables" %}
+    {% include anchor.html name="Initial variables" %}
 
     <div class="content">
       <p>
@@ -281,7 +281,7 @@ derived_variables:
       {% endfor %}
     </table>
 
-    {% include heading.html name="Derived variables" %}
+    {% include anchor.html name="Derived variables" %}
 
     <div class="content">
       <p>

diff --git a/docs/lib/main.js b/docs/lib/main.js
index b0b45c1d261f3b456ed68a538da1fa9c1e41f770..4df846248559237137de7f5e83ce94a45aca7480 100644 (file)
--- a/docs/lib/main.js
+++ b/docs/lib/main.js
@@ -105,8 +105,8 @@ document.addEventListener('DOMContentLoaded', function () {
 
   if ($highlights.length > 0) {
     $highlights.forEach(function ($el) {
-      var copy = '<button class="bd-copy">Copy</button>';
-      var expand = '<button class="bd-expand">Expand</button>';
+      var copy = '<button class="button is-small bd-copy">Copy</button>';
+      var expand = '<button class="button is-small bd-expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copy);
 
       if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
@@ -125,11 +125,11 @@ document.addEventListener('DOMContentLoaded', function () {
 
     $highlightButtons.forEach(function ($el) {
       $el.addEventListener('mouseenter', function () {
-        $el.parentNode.style.boxShadow = '0 0 0 1px #ed6c63';
+        $el.parentNode.classList.add('bd-is-hovering');
       });
 
       $el.addEventListener('mouseleave', function () {
-        $el.parentNode.style.boxShadow = 'none';
+        $el.parentNode.classList.remove('bd-is-hovering');
       });
     });
 

diff --git a/sass/grid/columns.sass b/sass/grid/columns.sass
index d579c9333f4207d411bbede89c3aa54dc6ee52f4..3263449d0c6bd3d83b18ad0c229d4518d55966ec 100755 (executable)
--- a/sass/grid/columns.sass
+++ b/sass/grid/columns.sass
@@ -5,8 +5,7 @@ $column-gap: 0.75rem !default
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
-  padding-left: $column-gap
-  padding-right: $column-gap
+  padding: $column-gap
   .columns.is-mobile > &.is-narrow
     flex: none
   .columns.is-mobile > &.is-full
@@ -283,44 +282,31 @@ $column-gap: 0.75rem !default
 .columns
   margin-left: (-$column-gap)
   margin-right: (-$column-gap)
-  // margin-top: (-$column-gap)
+  margin-top: (-$column-gap)
+  &:last-child
+    margin-bottom: (-$column-gap)
   &:not(:last-child)
-    margin-bottom: 1.5rem
-  // &:last-child
-  //   margin-bottom: (-$column-gap * 2)
-  // &:not(:last-child)
-  //   margin-bottom: $column-gap * 2
+    margin-bottom: calc(1.5rem - #{$column-gap})
+  // .columns
+  //   margin-top: 1.5rem
   // Modifiers
   &.is-centered
     justify-content: center
   &.is-gapless
+    margin-bottom: 0
     margin-left: 0
     margin-right: 0
     & > .column
       margin: 0
       padding: 0 !important
-  // &.is-grid
-  //   +tablet
-  //     flex-wrap: wrap
-  //     & > .column
-  //       max-width: 33.3333%
-  //       padding: $column-gap
-  //       width: 33.3333%
-  //       & + .column
-  //         margin-left: 0
+    &:not(:last-child)
+      margin-bottom: 1.5rem
+    &:last-child
+      margin-bottom: 0
   &.is-mobile
     display: flex
   &.is-multiline
     flex-wrap: wrap
-    & > .column
-      padding-bottom: $column-gap
-      padding-top: $column-gap
-    &:not(.is-gapless)
-      margin-top: (-$column-gap)
-      &:last-child
-        margin-bottom: (-$column-gap)
-      &:not(:last-child)
-        margin-bottom: calc(1.5rem - #{$column-gap})
   &.is-vcentered
     align-items: center
   // Responsiveness
@@ -331,3 +317,14 @@ $column-gap: 0.75rem !default
     // Modifiers
     &.is-desktop
       display: flex
+
+.columns.is-variable
+  --columnGap: 0.75rem
+  margin-left: calc(-1 * var(--columnGap))
+  margin-right: calc(-1 * var(--columnGap))
+  .column
+    padding-left: var(--columnGap)
+    padding-right: var(--columnGap)
+  @for $i from 0 through 12
+    &.is-#{$i}
+      --columnGap: $i * 0.25rem