From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Thu, 22 Sep 2016 22:23:30 +0000 (+0100)
Subject: Add grid modules
X-Git-Tag: 0.2.0~7
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2673f2b0f009ff8d6a4789b78cf9eb9c6b21a014;p=thirdparty%2Fbulma.git

Add grid modules
---

diff --git a/bulma.sass b/bulma.sass
index 091d8e907..bfe4defdc 100644
--- a/bulma.sass
+++ b/bulma.sass
@@ -3,4 +3,5 @@
 @import "sass/base/base.sass"
 @import "sass/elements/elements.sass"
 @import "sass/components/components.sass"
+@import "sass/grid/grid.sass"
 @import "sass/layout/layout.sass"
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 515a23fc0..2b028cce7 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2987,1090 +2987,1090 @@ a.box:active {
   border-radius: 5px;
 }
 
-@keyframes spin-around {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
+.highlight {
+  background-color: #fdf6e3;
+  color: #586e75;
 }
 
-.column {
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  padding: 10px;
+.highlight .c {
+  color: #93a1a1;
 }
 
-.columns.is-mobile > .column.is-narrow {
-  flex: none;
+.highlight .err,
+.highlight .g {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-full {
-  flex: none;
-  width: 100%;
+.highlight .k {
+  color: #859900;
 }
 
-.columns.is-mobile > .column.is-three-quarters {
-  flex: none;
-  width: 75%;
+.highlight .l,
+.highlight .n {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-two-thirds {
-  flex: none;
-  width: 66.6666%;
+.highlight .o {
+  color: #859900;
 }
 
-.columns.is-mobile > .column.is-half {
-  flex: none;
-  width: 50%;
+.highlight .x {
+  color: #cb4b16;
 }
 
-.columns.is-mobile > .column.is-one-third {
-  flex: none;
-  width: 33.3333%;
+.highlight .p {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-one-quarter {
-  flex: none;
-  width: 25%;
+.highlight .cm {
+  color: #93a1a1;
 }
 
-.columns.is-mobile > .column.is-offset-three-quarters {
-  margin-left: 75%;
+.highlight .cp {
+  color: #859900;
 }
 
-.columns.is-mobile > .column.is-offset-two-thirds {
-  margin-left: 66.6666%;
+.highlight .c1 {
+  color: #93a1a1;
 }
 
-.columns.is-mobile > .column.is-offset-half {
-  margin-left: 50%;
+.highlight .cs {
+  color: #859900;
 }
 
-.columns.is-mobile > .column.is-offset-one-third {
-  margin-left: 33.3333%;
+.highlight .gd {
+  color: #2aa198;
 }
 
-.columns.is-mobile > .column.is-offset-one-quarter {
-  margin-left: 25%;
+.highlight .ge {
+  color: #586e75;
+  font-style: italic;
 }
 
-.columns.is-mobile > .column.is-1 {
-  flex: none;
-  width: 8.33333%;
+.highlight .gr {
+  color: #dc322f;
 }
 
-.columns.is-mobile > .column.is-offset-1 {
-  margin-left: 8.33333%;
+.highlight .gh {
+  color: #cb4b16;
 }
 
-.columns.is-mobile > .column.is-2 {
-  flex: none;
-  width: 16.66667%;
+.highlight .gi {
+  color: #859900;
 }
 
-.columns.is-mobile > .column.is-offset-2 {
-  margin-left: 16.66667%;
+.highlight .go,
+.highlight .gp {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-3 {
-  flex: none;
-  width: 25%;
+.highlight .gs {
+  color: #586e75;
+  font-weight: bold;
 }
 
-.columns.is-mobile > .column.is-offset-3 {
-  margin-left: 25%;
+.highlight .gu {
+  color: #cb4b16;
 }
 
-.columns.is-mobile > .column.is-4 {
-  flex: none;
-  width: 33.33333%;
+.highlight .gt {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-offset-4 {
-  margin-left: 33.33333%;
+.highlight .kc {
+  color: #cb4b16;
 }
 
-.columns.is-mobile > .column.is-5 {
-  flex: none;
-  width: 41.66667%;
+.highlight .kd {
+  color: #268bd2;
 }
 
-.columns.is-mobile > .column.is-offset-5 {
-  margin-left: 41.66667%;
+.highlight .kn,
+.highlight .kp {
+  color: #859900;
 }
 
-.columns.is-mobile > .column.is-6 {
-  flex: none;
-  width: 50%;
+.highlight .kr {
+  color: #268bd2;
 }
 
-.columns.is-mobile > .column.is-offset-6 {
-  margin-left: 50%;
+.highlight .kt {
+  color: #dc322f;
 }
 
-.columns.is-mobile > .column.is-7 {
-  flex: none;
-  width: 58.33333%;
+.highlight .ld {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-offset-7 {
-  margin-left: 58.33333%;
+.highlight .m,
+.highlight .s {
+  color: #2aa198;
 }
 
-.columns.is-mobile > .column.is-8 {
-  flex: none;
-  width: 66.66667%;
+.highlight .na {
+  color: #B58900;
 }
 
-.columns.is-mobile > .column.is-offset-8 {
-  margin-left: 66.66667%;
+.highlight .nb {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-9 {
-  flex: none;
-  width: 75%;
+.highlight .nc {
+  color: #268bd2;
 }
 
-.columns.is-mobile > .column.is-offset-9 {
-  margin-left: 75%;
+.highlight .no {
+  color: #cb4b16;
 }
 
-.columns.is-mobile > .column.is-10 {
-  flex: none;
-  width: 83.33333%;
+.highlight .nd {
+  color: #268bd2;
 }
 
-.columns.is-mobile > .column.is-offset-10 {
-  margin-left: 83.33333%;
+.highlight .ni,
+.highlight .ne {
+  color: #cb4b16;
 }
 
-.columns.is-mobile > .column.is-11 {
-  flex: none;
-  width: 91.66667%;
+.highlight .nf {
+  color: #268bd2;
 }
 
-.columns.is-mobile > .column.is-offset-11 {
-  margin-left: 91.66667%;
+.highlight .nl,
+.highlight .nn,
+.highlight .nx,
+.highlight .py {
+  color: #586e75;
 }
 
-.columns.is-mobile > .column.is-12 {
-  flex: none;
-  width: 100%;
+.highlight .nt,
+.highlight .nv {
+  color: #268bd2;
 }
 
-.columns.is-mobile > .column.is-offset-12 {
-  margin-left: 100%;
+.highlight .ow {
+  color: #859900;
 }
 
-@media screen and (max-width: 768px) {
-  .column.is-narrow-mobile {
-    flex: none;
-  }
-  .column.is-full-mobile {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters-mobile {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds-mobile {
-    flex: none;
-    width: 66.6666%;
-  }
-  .column.is-half-mobile {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-one-third-mobile {
-    flex: none;
-    width: 33.3333%;
-  }
-  .column.is-one-quarter-mobile {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-three-quarters-mobile {
-    margin-left: 75%;
-  }
-  .column.is-offset-two-thirds-mobile {
-    margin-left: 66.6666%;
-  }
-  .column.is-offset-half-mobile {
-    margin-left: 50%;
-  }
-  .column.is-offset-one-third-mobile {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter-mobile {
-    margin-left: 25%;
-  }
-  .column.is-1-mobile {
-    flex: none;
-    width: 8.33333%;
-  }
-  .column.is-offset-1-mobile {
-    margin-left: 8.33333%;
-  }
-  .column.is-2-mobile {
-    flex: none;
-    width: 16.66667%;
-  }
-  .column.is-offset-2-mobile {
-    margin-left: 16.66667%;
-  }
-  .column.is-3-mobile {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3-mobile {
-    margin-left: 25%;
-  }
-  .column.is-4-mobile {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-offset-4-mobile {
-    margin-left: 33.33333%;
-  }
-  .column.is-5-mobile {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-offset-5-mobile {
-    margin-left: 41.66667%;
-  }
-  .column.is-6-mobile {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6-mobile {
-    margin-left: 50%;
-  }
-  .column.is-7-mobile {
-    flex: none;
-    width: 58.33333%;
-  }
-  .column.is-offset-7-mobile {
-    margin-left: 58.33333%;
-  }
-  .column.is-8-mobile {
-    flex: none;
-    width: 66.66667%;
-  }
-  .column.is-offset-8-mobile {
-    margin-left: 66.66667%;
-  }
-  .column.is-9-mobile {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9-mobile {
-    margin-left: 75%;
-  }
-  .column.is-10-mobile {
-    flex: none;
-    width: 83.33333%;
-  }
-  .column.is-offset-10-mobile {
-    margin-left: 83.33333%;
-  }
-  .column.is-11-mobile {
-    flex: none;
-    width: 91.66667%;
+.highlight .w {
+  color: #586e75;
+}
+
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .mo {
+  color: #2aa198;
+}
+
+.highlight .sb {
+  color: #93a1a1;
+}
+
+.highlight .sc {
+  color: #2aa198;
+}
+
+.highlight .sd {
+  color: #586e75;
+}
+
+.highlight .s2 {
+  color: #2aa198;
+}
+
+.highlight .se {
+  color: #cb4b16;
+}
+
+.highlight .sh {
+  color: #586e75;
+}
+
+.highlight .si,
+.highlight .sx {
+  color: #2aa198;
+}
+
+.highlight .sr {
+  color: #dc322f;
+}
+
+.highlight .s1,
+.highlight .ss {
+  color: #2aa198;
+}
+
+.highlight .bp,
+.highlight .vc,
+.highlight .vg,
+.highlight .vi {
+  color: #268bd2;
+}
+
+.highlight .il {
+  color: #2aa198;
+}
+
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
   }
-  .column.is-offset-11-mobile {
-    margin-left: 91.66667%;
+  to {
+    transform: rotate(359deg);
   }
-  .column.is-12-mobile {
-    flex: none;
-    width: 100%;
+}
+
+.level-item .title,
+.level-item .subtitle {
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .level-item:not(:last-child) {
+    margin-bottom: 10px;
   }
-  .column.is-offset-12-mobile {
-    margin-left: 100%;
+}
+
+.level-left .level-item:not(:last-child),
+.level-right .level-item:not(:last-child) {
+  margin-right: 10px;
+}
+
+.level-left .level-item.is-flexible,
+.level-right .level-item.is-flexible {
+  flex-grow: 1;
+}
+
+@media screen and (max-width: 768px) {
+  .level-left + .level-right {
+    margin-top: 20px;
   }
 }
 
 @media screen and (min-width: 769px) {
-  .column.is-narrow, .column.is-narrow-tablet {
-    flex: none;
-  }
-  .column.is-full, .column.is-full-tablet {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters, .column.is-three-quarters-tablet {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds, .column.is-two-thirds-tablet {
-    flex: none;
-    width: 66.6666%;
+  .level-left {
+    align-items: center;
+    display: flex;
   }
-  .column.is-half, .column.is-half-tablet {
-    flex: none;
-    width: 50%;
+}
+
+@media screen and (min-width: 769px) {
+  .level-right {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
   }
-  .column.is-one-third, .column.is-one-third-tablet {
-    flex: none;
-    width: 33.3333%;
+}
+
+.level {
+  align-items: center;
+  justify-content: space-between;
+}
+
+.level:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.level code {
+  border-radius: 3px;
+}
+
+.level img {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.level.is-mobile {
+  display: flex;
+}
+
+.level.is-mobile > .level-item:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.level.is-mobile > .level-item:not(.is-narrow) {
+  flex-grow: 1;
+}
+
+@media screen and (min-width: 769px) {
+  .level {
+    display: flex;
   }
-  .column.is-one-quarter, .column.is-one-quarter-tablet {
-    flex: none;
-    width: 25%;
+  .level > .level-item:not(.is-narrow) {
+    flex-grow: 1;
   }
-  .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
-    margin-left: 75%;
+}
+
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
   }
-  .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet {
-    margin-left: 66.6666%;
+  to {
+    transform: rotate(359deg);
   }
-  .column.is-offset-half, .column.is-offset-half-tablet {
-    margin-left: 50%;
+}
+
+.media-number {
+  background-color: whitesmoke;
+  border-radius: 290486px;
+  display: inline-block;
+  font-size: 18px;
+  height: 32px;
+  line-height: 24px;
+  min-width: 32px;
+  padding: 4px 8px;
+  text-align: center;
+  vertical-align: top;
+}
+
+@media screen and (max-width: 768px) {
+  .media-number {
+    margin-bottom: 10px;
   }
-  .column.is-offset-one-third, .column.is-offset-one-third-tablet {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet {
-    margin-left: 25%;
-  }
-  .column.is-1, .column.is-1-tablet {
-    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 {
-    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 {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3, .column.is-offset-3-tablet {
-    margin-left: 25%;
-  }
-  .column.is-4, .column.is-4-tablet {
-    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 {
-    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 {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6, .column.is-offset-6-tablet {
-    margin-left: 50%;
-  }
-  .column.is-7, .column.is-7-tablet {
-    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 {
-    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 {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9, .column.is-offset-9-tablet {
-    margin-left: 75%;
-  }
-  .column.is-10, .column.is-10-tablet {
-    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 {
-    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 {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-offset-12, .column.is-offset-12-tablet {
-    margin-left: 100%;
+}
+
+@media screen and (min-width: 769px) {
+  .media-number {
+    margin-right: 10px;
   }
 }
 
-@media screen and (min-width: 980px) {
-  .column.is-narrow-desktop {
-    flex: none;
-  }
-  .column.is-full-desktop {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters-desktop {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds-desktop {
-    flex: none;
-    width: 66.6666%;
-  }
-  .column.is-half-desktop {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-one-third-desktop {
-    flex: none;
-    width: 33.3333%;
-  }
-  .column.is-one-quarter-desktop {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-three-quarters-desktop {
-    margin-left: 75%;
-  }
-  .column.is-offset-two-thirds-desktop {
-    margin-left: 66.6666%;
-  }
-  .column.is-offset-half-desktop {
-    margin-left: 50%;
-  }
-  .column.is-offset-one-third-desktop {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter-desktop {
-    margin-left: 25%;
-  }
-  .column.is-1-desktop {
-    flex: none;
-    width: 8.33333%;
-  }
-  .column.is-offset-1-desktop {
-    margin-left: 8.33333%;
-  }
-  .column.is-2-desktop {
-    flex: none;
-    width: 16.66667%;
-  }
-  .column.is-offset-2-desktop {
-    margin-left: 16.66667%;
-  }
-  .column.is-3-desktop {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3-desktop {
-    margin-left: 25%;
-  }
-  .column.is-4-desktop {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-offset-4-desktop {
-    margin-left: 33.33333%;
-  }
-  .column.is-5-desktop {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-offset-5-desktop {
-    margin-left: 41.66667%;
-  }
-  .column.is-6-desktop {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6-desktop {
-    margin-left: 50%;
-  }
-  .column.is-7-desktop {
-    flex: none;
-    width: 58.33333%;
-  }
-  .column.is-offset-7-desktop {
-    margin-left: 58.33333%;
-  }
-  .column.is-8-desktop {
-    flex: none;
-    width: 66.66667%;
-  }
-  .column.is-offset-8-desktop {
-    margin-left: 66.66667%;
-  }
-  .column.is-9-desktop {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9-desktop {
-    margin-left: 75%;
-  }
-  .column.is-10-desktop {
-    flex: none;
-    width: 83.33333%;
-  }
-  .column.is-offset-10-desktop {
-    margin-left: 83.33333%;
-  }
-  .column.is-11-desktop {
-    flex: none;
-    width: 91.66667%;
-  }
-  .column.is-offset-11-desktop {
-    margin-left: 91.66667%;
-  }
-  .column.is-12-desktop {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-offset-12-desktop {
-    margin-left: 100%;
-  }
+.media-left {
+  margin-right: 10px;
 }
 
-@media screen and (min-width: 1180px) {
-  .column.is-narrow-widescreen {
-    flex: none;
-  }
-  .column.is-full-widescreen {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters-widescreen {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds-widescreen {
-    flex: none;
-    width: 66.6666%;
-  }
-  .column.is-half-widescreen {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-one-third-widescreen {
-    flex: none;
-    width: 33.3333%;
-  }
-  .column.is-one-quarter-widescreen {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-three-quarters-widescreen {
-    margin-left: 75%;
-  }
-  .column.is-offset-two-thirds-widescreen {
-    margin-left: 66.6666%;
-  }
-  .column.is-offset-half-widescreen {
-    margin-left: 50%;
-  }
-  .column.is-offset-one-third-widescreen {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter-widescreen {
-    margin-left: 25%;
-  }
-  .column.is-1-widescreen {
-    flex: none;
-    width: 8.33333%;
-  }
-  .column.is-offset-1-widescreen {
-    margin-left: 8.33333%;
-  }
-  .column.is-2-widescreen {
-    flex: none;
-    width: 16.66667%;
-  }
-  .column.is-offset-2-widescreen {
-    margin-left: 16.66667%;
-  }
-  .column.is-3-widescreen {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3-widescreen {
-    margin-left: 25%;
-  }
-  .column.is-4-widescreen {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-offset-4-widescreen {
-    margin-left: 33.33333%;
-  }
-  .column.is-5-widescreen {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-offset-5-widescreen {
-    margin-left: 41.66667%;
-  }
-  .column.is-6-widescreen {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6-widescreen {
-    margin-left: 50%;
-  }
-  .column.is-7-widescreen {
-    flex: none;
-    width: 58.33333%;
-  }
-  .column.is-offset-7-widescreen {
-    margin-left: 58.33333%;
-  }
-  .column.is-8-widescreen {
-    flex: none;
-    width: 66.66667%;
-  }
-  .column.is-offset-8-widescreen {
-    margin-left: 66.66667%;
-  }
-  .column.is-9-widescreen {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9-widescreen {
-    margin-left: 75%;
-  }
-  .column.is-10-widescreen {
-    flex: none;
-    width: 83.33333%;
-  }
-  .column.is-offset-10-widescreen {
-    margin-left: 83.33333%;
-  }
-  .column.is-11-widescreen {
-    flex: none;
-    width: 91.66667%;
-  }
-  .column.is-offset-11-widescreen {
-    margin-left: 91.66667%;
-  }
-  .column.is-12-widescreen {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-offset-12-widescreen {
-    margin-left: 100%;
+.media-right {
+  margin-left: 10px;
+}
+
+.media-content {
+  flex-grow: 1;
+  flex-shrink: 1;
+  text-align: left;
+}
+
+.media {
+  align-items: flex-start;
+  display: flex;
+  text-align: left;
+}
+
+.media .content:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.media .media {
+  border-top: 1px solid rgba(219, 219, 219, 0.5);
+  display: flex;
+  padding-top: 10px;
+}
+
+.media .media .content:not(:last-child),
+.media .media .control:not(:last-child) {
+  margin-bottom: 5px;
+}
+
+.media .media .media {
+  padding-top: 5px;
+}
+
+.media .media .media + .media {
+  margin-top: 5px;
+}
+
+.media + .media {
+  border-top: 1px solid rgba(219, 219, 219, 0.5);
+  margin-top: 10px;
+  padding-top: 10px;
+}
+
+.media.is-large + .media {
+  margin-top: 20px;
+  padding-top: 20px;
+}
+
+@media screen and (min-width: 769px) {
+  .media.is-large .media-number {
+    margin-right: 20px;
   }
 }
 
-.columns {
-  margin-left: -10px;
-  margin-right: -10px;
-  margin-top: -10px;
+.menu-nav a {
+  display: block;
+  padding: 5px 10px;
 }
 
-.columns:last-child {
-  margin-bottom: -10px;
+.menu-list a {
+  border-radius: 2px;
+  color: #7a7a7a;
+  display: block;
+  padding: 5px 10px;
 }
 
-.columns:not(:last-child) {
-  margin-bottom: 10px;
+.menu-list a:hover {
+  background-color: whitesmoke;
+  color: #11e4c4;
 }
 
-.columns.is-centered {
-  justify-content: center;
+.menu-list a.is-active {
+  background-color: #11e4c4;
+  color: white;
 }
 
-.columns.is-gapless {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
+.menu-list li ul {
+  border-left: 1px solid #dbdbdb;
+  margin: 10px;
+  padding-left: 10px;
 }
 
-.columns.is-gapless:last-child {
-  margin-bottom: 0;
+.menu-label {
+  color: #b5b5b5;
+  font-size: 11px;
+  letter-spacing: 1px;
+  margin-bottom: 5px;
+  text-transform: uppercase;
 }
 
-.columns.is-gapless:not(:last-child) {
+.menu-label:not(:first-child) {
+  margin-top: 20px;
+}
+
+.message-body {
+  border: 1px solid #dbdbdb;
+  border-radius: 3px;
+  padding: 12px 15px;
+}
+
+.message-body strong {
+  color: inherit;
+}
+
+.message-header {
+  background-color: #7a7a7a;
+  border-radius: 3px 3px 0 0;
+  color: white;
+  padding: 7px 10px;
+}
+
+.message-header strong {
+  color: inherit;
+}
+
+.message-header + .message-body {
+  border-radius: 0 0 3px 3px;
+  border-top: none;
+}
+
+.message {
+  background-color: whitesmoke;
+  border-radius: 3px;
+}
+
+.message:not(:last-child) {
   margin-bottom: 20px;
 }
 
-.columns.is-gapless > .column {
-  margin: 0;
-  padding: 0;
+.message.is-white {
+  background-color: white;
 }
 
-@media screen and (min-width: 769px) {
-  .columns.is-grid {
-    flex-wrap: wrap;
-  }
-  .columns.is-grid > .column {
-    max-width: 33.3333%;
-    padding: 10px;
-    width: 33.3333%;
+.message.is-white .message-header {
+  background-color: white;
+  color: #121212;
+}
+
+.message.is-white .message-body {
+  border-color: white;
+  color: #666666;
+}
+
+.message.is-black {
+  background-color: whitesmoke;
+}
+
+.message.is-black .message-header {
+  background-color: #121212;
+  color: white;
+}
+
+.message.is-black .message-body {
+  border-color: #121212;
+  color: gray;
+}
+
+.message.is-light {
+  background-color: whitesmoke;
+}
+
+.message.is-light .message-header {
+  background-color: whitesmoke;
+  color: #7a7a7a;
+}
+
+.message.is-light .message-body {
+  border-color: whitesmoke;
+  color: #666666;
+}
+
+.message.is-dark {
+  background-color: whitesmoke;
+}
+
+.message.is-dark .message-header {
+  background-color: #7a7a7a;
+  color: whitesmoke;
+}
+
+.message.is-dark .message-body {
+  border-color: #7a7a7a;
+  color: gray;
+}
+
+.message.is-primary {
+  background-color: #ecfefb;
+}
+
+.message.is-primary .message-header {
+  background-color: #11e4c4;
+  color: white;
+}
+
+.message.is-primary .message-body {
+  border-color: #11e4c4;
+  color: gray;
+}
+
+.message.is-info {
+  background-color: #ebf2ff;
+}
+
+.message.is-info .message-header {
+  background-color: #0f6bff;
+  color: white;
+}
+
+.message.is-info .message-body {
+  border-color: #0f6bff;
+  color: gray;
+}
+
+.message.is-success {
+  background-color: #ecfef2;
+}
+
+.message.is-success .message-header {
+  background-color: #20ee68;
+  color: white;
+}
+
+.message.is-success .message-body {
+  border-color: #20ee68;
+  color: gray;
+}
+
+.message.is-warning {
+  background-color: #fffbeb;
+}
+
+.message.is-warning .message-header {
+  background-color: #ffcf0f;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.message.is-warning .message-body {
+  border-color: #ffcf0f;
+  color: gray;
+}
+
+.message.is-danger {
+  background-color: #ffebef;
+}
+
+.message.is-danger .message-header {
+  background-color: #ff0f3f;
+  color: white;
+}
+
+.message.is-danger .message-body {
+  border-color: #ff0f3f;
+  color: gray;
+}
+
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
   }
-  .columns.is-grid > .column + .column {
-    margin-left: 0;
+  to {
+    transform: rotate(359deg);
   }
 }
 
-.columns.is-mobile {
-  display: flex;
-}
-
-.columns.is-multiline {
-  flex-wrap: wrap;
+.modal-background {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: rgba(18, 18, 18, 0.86);
 }
 
-.columns.is-vcentered {
-  align-items: center;
+.modal-content,
+.modal-card {
+  margin: 0 20px;
+  max-height: calc(100vh - 160px);
+  overflow: auto;
+  position: relative;
+  width: 100%;
 }
 
 @media screen and (min-width: 769px) {
-  .columns:not(.is-desktop) {
-    display: flex;
+  .modal-content,
+  .modal-card {
+    margin: 0 auto;
+    max-height: calc(100vh - 40px);
+    width: 640px;
   }
 }
 
-@media screen and (min-width: 980px) {
-  .columns.is-desktop {
-    display: flex;
-  }
+.modal-close {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-color: rgba(18, 18, 18, 0.2);
+  border: none;
+  border-radius: 290486px;
+  cursor: pointer;
+  display: inline-block;
+  height: 24px;
+  position: relative;
+  vertical-align: top;
+  width: 24px;
+  background: none;
+  height: 40px;
+  position: fixed;
+  right: 20px;
+  top: 20px;
+  width: 40px;
 }
 
-.tile {
-  align-items: stretch;
-  flex-basis: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-height: min-content;
+.modal-close:before, .modal-close:after {
+  background-color: white;
+  content: "";
+  display: block;
+  height: 2px;
+  left: 50%;
+  margin-left: -25%;
+  margin-top: -1px;
+  position: absolute;
+  top: 50%;
+  width: 50%;
 }
 
-.tile.is-ancestor {
-  margin-left: -10px;
-  margin-right: -10px;
-  margin-top: -10px;
+.modal-close:before {
+  transform: rotate(45deg);
 }
 
-.tile.is-ancestor:last-child {
-  margin-bottom: -10px;
+.modal-close:after {
+  transform: rotate(-45deg);
 }
 
-.tile.is-ancestor:not(:last-child) {
-  margin-bottom: 10px;
+.modal-close:hover {
+  background-color: rgba(18, 18, 18, 0.5);
 }
 
-.tile.is-child {
-  margin: 0 !important;
+.modal-close.is-small {
+  height: 16px;
+  width: 16px;
 }
 
-.tile.is-parent {
-  padding: 10px;
+.modal-close.is-medium {
+  height: 32px;
+  width: 32px;
 }
 
-.tile.is-vertical {
+.modal-close.is-large {
+  height: 40px;
+  width: 40px;
+}
+
+.modal-card {
+  display: flex;
   flex-direction: column;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
 }
 
-.tile.is-vertical > .tile.is-child:not(:last-child) {
-  margin-bottom: 20px !important;
+.modal-card-head,
+.modal-card-foot {
+  align-items: center;
+  background-color: whitesmoke;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  padding: 20px;
+  position: relative;
 }
 
-@media screen and (min-width: 769px) {
-  .tile:not(.is-child) {
-    display: flex;
-  }
-  .tile.is-1 {
-    flex: none;
-    width: 8.33333%;
-  }
-  .tile.is-2 {
-    flex: none;
-    width: 16.66667%;
-  }
-  .tile.is-3 {
-    flex: none;
-    width: 25%;
-  }
-  .tile.is-4 {
-    flex: none;
-    width: 33.33333%;
-  }
-  .tile.is-5 {
-    flex: none;
-    width: 41.66667%;
-  }
-  .tile.is-6 {
-    flex: none;
-    width: 50%;
-  }
-  .tile.is-7 {
-    flex: none;
-    width: 58.33333%;
-  }
-  .tile.is-8 {
-    flex: none;
-    width: 66.66667%;
-  }
-  .tile.is-9 {
-    flex: none;
-    width: 75%;
-  }
-  .tile.is-10 {
-    flex: none;
-    width: 83.33333%;
-  }
-  .tile.is-11 {
-    flex: none;
-    width: 91.66667%;
-  }
-  .tile.is-12 {
-    flex: none;
-    width: 100%;
-  }
+.modal-card-head {
+  border-bottom: 1px solid #dbdbdb;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
-.highlight {
-  background-color: #fdf6e3;
-  color: #586e75;
+.modal-card-title {
+  color: #242424;
+  flex-grow: 1;
+  flex-shrink: 0;
+  font-size: 24px;
+  line-height: 1;
 }
 
-.highlight .c {
-  color: #93a1a1;
+.modal-card-foot {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-top: 1px solid #dbdbdb;
 }
 
-.highlight .err,
-.highlight .g {
-  color: #586e75;
+.modal-card-foot .button:not(:last-child) {
+  margin-right: 10px;
 }
 
-.highlight .k {
-  color: #859900;
+.modal-card-body {
+  background-color: white;
+  flex-grow: 1;
+  flex-shrink: 1;
+  overflow: auto;
+  padding: 20px;
 }
 
-.highlight .l,
-.highlight .n {
-  color: #586e75;
+.modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+  position: fixed;
+  z-index: 1986;
 }
 
-.highlight .o {
-  color: #859900;
+.modal.is-active {
+  display: flex;
 }
 
-.highlight .x {
-  color: #cb4b16;
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }
 
-.highlight .p {
-  color: #586e75;
+.nav-toggle {
+  cursor: pointer;
+  display: block;
+  height: 50px;
+  position: relative;
+  width: 50px;
 }
 
-.highlight .cm {
-  color: #93a1a1;
+.nav-toggle span {
+  background-color: #7a7a7a;
+  display: block;
+  height: 1px;
+  left: 50%;
+  margin-left: -7px;
+  position: absolute;
+  top: 50%;
+  transition: none 86ms ease-out;
+  transition-property: background, left, opacity, transform;
+  width: 15px;
 }
 
-.highlight .cp {
-  color: #859900;
+.nav-toggle span:nth-child(1) {
+  margin-top: -6px;
 }
 
-.highlight .c1 {
-  color: #93a1a1;
+.nav-toggle span:nth-child(2) {
+  margin-top: -1px;
 }
 
-.highlight .cs {
-  color: #859900;
+.nav-toggle span:nth-child(3) {
+  margin-top: 4px;
 }
 
-.highlight .gd {
-  color: #2aa198;
+.nav-toggle:hover {
+  background-color: whitesmoke;
 }
 
-.highlight .ge {
-  color: #586e75;
-  font-style: italic;
+.nav-toggle.is-active span {
+  background-color: #11e4c4;
 }
 
-.highlight .gr {
-  color: #dc322f;
+.nav-toggle.is-active span:nth-child(1) {
+  margin-left: -5px;
+  transform: rotate(45deg);
+  transform-origin: left top;
 }
 
-.highlight .gh {
-  color: #cb4b16;
+.nav-toggle.is-active span:nth-child(2) {
+  opacity: 0;
 }
 
-.highlight .gi {
-  color: #859900;
+.nav-toggle.is-active span:nth-child(3) {
+  margin-left: -5px;
+  transform: rotate(-45deg);
+  transform-origin: left bottom;
 }
 
-.highlight .go,
-.highlight .gp {
-  color: #586e75;
+@media screen and (min-width: 769px) {
+  .nav-toggle {
+    display: none;
+  }
 }
 
-.highlight .gs {
-  color: #586e75;
-  font-weight: bold;
+.nav-item {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 10px;
 }
 
-.highlight .gu {
-  color: #cb4b16;
+.nav-item a {
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
-.highlight .gt {
-  color: #586e75;
+.nav-item img {
+  max-height: 24px;
 }
 
-.highlight .kc {
-  color: #cb4b16;
+.nav-item .button + .button {
+  margin-left: 10px;
 }
 
-.highlight .kd {
-  color: #268bd2;
+.nav-item .tag:first-child {
+  margin-right: 5px;
 }
 
-.highlight .kn,
-.highlight .kp {
-  color: #859900;
+.nav-item .tag:last-child {
+  margin-left: 5px;
 }
 
-.highlight .kr {
-  color: #268bd2;
+@media screen and (max-width: 768px) {
+  .nav-item {
+    justify-content: flex-start;
+  }
 }
 
-.highlight .kt {
-  color: #dc322f;
+.nav-item a,
+a.nav-item {
+  color: #7a7a7a;
 }
 
-.highlight .ld {
-  color: #586e75;
+.nav-item a:hover,
+a.nav-item:hover {
+  color: #242424;
 }
 
-.highlight .m,
-.highlight .s {
-  color: #2aa198;
+.nav-item a.is-active,
+a.nav-item.is-active {
+  color: #242424;
 }
 
-.highlight .na {
-  color: #B58900;
+.nav-item a.is-tab,
+a.nav-item.is-tab {
+  border-bottom: 1px solid transparent;
+  border-top: 1px solid transparent;
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
-.highlight .nb {
-  color: #586e75;
+.nav-item a.is-tab:hover,
+a.nav-item.is-tab:hover {
+  border-bottom: 1px solid #11e4c4;
+  border-top: 1px solid transparent;
 }
 
-.highlight .nc {
-  color: #268bd2;
+.nav-item a.is-tab.is-active,
+a.nav-item.is-tab.is-active {
+  border-bottom: 3px solid #11e4c4;
+  border-top: 3px solid transparent;
+  color: #11e4c4;
 }
 
-.highlight .no {
-  color: #cb4b16;
+@media screen and (max-width: 768px) {
+  .nav-menu {
+    background-color: white;
+    box-shadow: 0 4px 7px rgba(18, 18, 18, 0.1);
+    left: 0;
+    display: none;
+    right: 0;
+    top: 100%;
+    position: absolute;
+  }
+  .nav-menu .nav-item {
+    border-top: 1px solid rgba(219, 219, 219, 0.5);
+    padding: 10px;
+  }
+  .nav-menu.is-active {
+    display: block;
+  }
 }
 
-.highlight .nd {
-  color: #268bd2;
+@media screen and (min-width: 769px) and (max-width: 979px) {
+  .nav-menu {
+    padding-right: 20px;
+  }
 }
 
-.highlight .ni,
-.highlight .ne {
-  color: #cb4b16;
+.nav-left {
+  align-items: stretch;
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
-.highlight .nf {
-  color: #268bd2;
+.nav-center {
+  align-items: stretch;
+  display: flex;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.highlight .nl,
-.highlight .nn,
-.highlight .nx,
-.highlight .py {
-  color: #586e75;
+@media screen and (min-width: 769px) {
+  .nav-right {
+    align-items: stretch;
+    display: flex;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    justify-content: flex-end;
+  }
 }
 
-.highlight .nt,
-.highlight .nv {
-  color: #268bd2;
+.nav {
+  align-items: stretch;
+  background-color: white;
+  display: flex;
+  min-height: 50px;
+  position: relative;
+  text-align: center;
+  z-index: 2;
 }
 
-.highlight .ow {
-  color: #859900;
+.nav > .container {
+  align-items: stretch;
+  display: flex;
+  min-height: 50px;
+  width: 100%;
 }
 
-.highlight .w {
-  color: #586e75;
+.nav > .container > .nav-left > .nav-item:first-child:not(.is-tab) {
+  padding-left: 0;
 }
 
-.highlight .mf,
-.highlight .mh,
-.highlight .mi,
-.highlight .mo {
-  color: #2aa198;
+.nav > .container > .nav-right > .nav-item:last-child:not(.is-tab) {
+  padding-right: 0;
 }
 
-.highlight .sb {
-  color: #93a1a1;
+.container > .nav > .nav-left > .nav-item:first-child:not(.is-tab) {
+  padding-left: 0;
 }
 
-.highlight .sc {
-  color: #2aa198;
+.container > .nav > .nav-right > .nav-item:last-child:not(.is-tab) {
+  padding-right: 0;
 }
 
-.highlight .sd {
-  color: #586e75;
+.nav.has-shadow {
+  box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1);
 }
 
-.highlight .s2 {
-  color: #2aa198;
+@media screen and (max-width: 979px) {
+  .nav > .container > .nav-left > .nav-item.is-brand:first-child,
+  .container > .nav > .nav-left > .nav-item.is-brand:first-child {
+    padding-left: 20px;
+  }
 }
 
-.highlight .se {
-  color: #cb4b16;
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }
 
-.highlight .sh {
-  color: #586e75;
+.pagination {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  text-align: center;
 }
 
-.highlight .si,
-.highlight .sx {
-  color: #2aa198;
+.pagination a {
+  display: block;
+  min-width: 32px;
+  padding: 3px 8px;
 }
 
-.highlight .sr {
-  color: #dc322f;
+.pagination span {
+  color: #b5b5b5;
+  display: block;
+  margin: 0 4px;
 }
 
-.highlight .s1,
-.highlight .ss {
-  color: #2aa198;
+.pagination li {
+  margin: 0 2px;
+}
+
+.pagination ul {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: center;
 }
 
-.highlight .bp,
-.highlight .vc,
-.highlight .vg,
-.highlight .vi {
-  color: #268bd2;
+@media screen and (max-width: 768px) {
+  .pagination {
+    flex-wrap: wrap;
+  }
+  .pagination > a {
+    width: calc(50% - 5px);
+  }
+  .pagination > a:not(:first-child) {
+    margin-left: 10px;
+  }
+  .pagination li {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+  .pagination ul {
+    margin-top: 10px;
+  }
 }
 
-.highlight .il {
-  color: #2aa198;
+@media screen and (min-width: 769px) {
+  .pagination > a:not(:first-child) {
+    order: 1;
+  }
 }
 
 @keyframes spin-around {
@@ -4082,85 +4082,86 @@ a.box:active {
   }
 }
 
-.level-item .title,
-.level-item .subtitle {
-  margin-bottom: 0;
-}
-
-@media screen and (max-width: 768px) {
-  .level-item:not(:last-child) {
-    margin-bottom: 10px;
-  }
+.panel-icon {
+  display: inline-block;
+  font-size: 14px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  vertical-align: top;
+  width: 16px;
+  color: #b5b5b5;
+  float: left;
+  margin: 0 4px 0 -2px;
 }
 
-.level-left .level-item:not(:last-child),
-.level-right .level-item:not(:last-child) {
-  margin-right: 10px;
+.panel-icon .fa {
+  font-size: inherit;
+  line-height: inherit;
 }
 
-.level-left .level-item.is-flexible,
-.level-right .level-item.is-flexible {
-  flex-grow: 1;
+.panel-heading {
+  background-color: whitesmoke;
+  border-bottom: 1px solid #dbdbdb;
+  border-radius: 4px 4px 0 0;
+  color: #242424;
+  font-size: 18px;
+  font-weight: 300;
+  padding: 10px;
 }
 
-@media screen and (max-width: 768px) {
-  .level-left + .level-right {
-    margin-top: 20px;
-  }
+.panel-list a {
+  color: #7a7a7a;
 }
 
-@media screen and (min-width: 769px) {
-  .level-left {
-    align-items: center;
-    display: flex;
-  }
+.panel-list a:hover {
+  color: #11e4c4;
 }
 
-@media screen and (min-width: 769px) {
-  .level-right {
-    align-items: center;
-    display: flex;
-    justify-content: flex-end;
-  }
+.panel-tabs {
+  display: flex;
+  font-size: 11px;
+  padding: 5px 10px 0;
+  justify-content: center;
 }
 
-.level {
-  align-items: center;
-  justify-content: space-between;
+.panel-tabs a {
+  border-bottom: 1px solid #dbdbdb;
+  margin-bottom: -1px;
+  padding: 5px;
 }
 
-.level:not(:last-child) {
-  margin-bottom: 20px;
+.panel-tabs a.is-active {
+  border-bottom-color: #242424;
+  color: #242424;
 }
 
-.level code {
-  border-radius: 3px;
+.panel-tabs:not(:last-child) {
+  border-bottom: 1px solid #dbdbdb;
 }
 
-.level img {
-  display: inline-block;
-  vertical-align: top;
+.panel-block {
+  color: #242424;
+  display: block;
+  line-height: 16px;
+  padding: 10px;
 }
 
-.level.is-mobile {
-  display: flex;
+.panel-block:not(:last-child) {
+  border-bottom: 1px solid #dbdbdb;
 }
 
-.level.is-mobile > .level-item:not(:last-child) {
-  margin-bottom: 0;
+a.panel-block:hover {
+  background-color: whitesmoke;
 }
 
-.level.is-mobile > .level-item:not(.is-narrow) {
-  flex-grow: 1;
+.panel {
+  border: 1px solid #dbdbdb;
+  border-radius: 5px;
 }
 
-@media screen and (min-width: 769px) {
-  .level {
-    display: flex;
-  }
-  .level > .level-item:not(.is-narrow) {
-    flex-grow: 1;
-  }
+.panel:not(:last-child) {
+  margin-bottom: 20px;
 }
 
 @keyframes spin-around {
@@ -4172,1050 +4173,1058 @@ a.box:active {
   }
 }
 
-.media-number {
-  background-color: whitesmoke;
-  border-radius: 290486px;
-  display: inline-block;
-  font-size: 18px;
-  height: 32px;
+.tabs {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  align-items: stretch;
+  display: flex;
+  justify-content: space-between;
   line-height: 24px;
-  min-width: 32px;
-  padding: 4px 8px;
-  text-align: center;
-  vertical-align: top;
-}
-
-@media screen and (max-width: 768px) {
-  .media-number {
-    margin-bottom: 10px;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .media-number {
-    margin-right: 10px;
-  }
-}
-
-.media-left {
-  margin-right: 10px;
-}
-
-.media-right {
-  margin-left: 10px;
+  overflow: hidden;
+  overflow-x: auto;
+  white-space: nowrap;
 }
 
-.media-content {
-  flex-grow: 1;
-  flex-shrink: 1;
-  text-align: left;
+.tabs:not(:last-child) {
+  margin-bottom: 20px;
 }
 
-.media {
-  align-items: flex-start;
+.tabs a {
+  align-items: center;
+  border-bottom: 1px solid #dbdbdb;
+  color: #7a7a7a;
   display: flex;
-  text-align: left;
+  justify-content: center;
+  margin-bottom: -1px;
+  padding: 6px 12px;
+  vertical-align: top;
 }
 
-.media .content:not(:last-child) {
-  margin-bottom: 10px;
+.tabs a:hover {
+  border-bottom-color: #242424;
+  color: #242424;
 }
 
-.media .media {
-  border-top: 1px solid rgba(219, 219, 219, 0.5);
-  display: flex;
-  padding-top: 10px;
+.tabs li {
+  display: block;
 }
 
-.media .media .content:not(:last-child),
-.media .media .control:not(:last-child) {
-  margin-bottom: 5px;
+.tabs li.is-active a {
+  border-bottom-color: #11e4c4;
+  color: #11e4c4;
 }
 
-.media .media .media {
-  padding-top: 5px;
+.tabs ul {
+  align-items: center;
+  border-bottom: 1px solid #dbdbdb;
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: flex-start;
 }
 
-.media .media .media + .media {
-  margin-top: 5px;
+.tabs ul.is-left {
+  padding-right: 10px;
 }
 
-.media + .media {
-  border-top: 1px solid rgba(219, 219, 219, 0.5);
-  margin-top: 10px;
-  padding-top: 10px;
+.tabs ul.is-center {
+  flex: none;
+  justify-content: center;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
-.media.is-large + .media {
-  margin-top: 20px;
-  padding-top: 20px;
+.tabs ul.is-right {
+  justify-content: flex-end;
+  padding-left: 10px;
 }
 
-@media screen and (min-width: 769px) {
-  .media.is-large .media-number {
-    margin-right: 20px;
-  }
+.tabs .icon:first-child {
+  margin-right: 8px;
 }
 
-.menu-nav a {
-  display: block;
-  padding: 5px 10px;
+.tabs .icon:last-child {
+  margin-left: 8px;
 }
 
-.menu-list a {
-  border-radius: 2px;
-  color: #7a7a7a;
-  display: block;
-  padding: 5px 10px;
+.tabs.is-centered ul {
+  justify-content: center;
 }
 
-.menu-list a:hover {
-  background-color: whitesmoke;
-  color: #11e4c4;
+.tabs.is-right ul {
+  justify-content: flex-end;
 }
 
-.menu-list a.is-active {
-  background-color: #11e4c4;
-  color: white;
+.tabs.is-boxed a {
+  border: 1px solid transparent;
+  border-radius: 3px 3px 0 0;
+  padding-bottom: 5px;
+  padding-top: 5px;
 }
 
-.menu-list li ul {
-  border-left: 1px solid #dbdbdb;
-  margin: 10px;
-  padding-left: 10px;
+.tabs.is-boxed a:hover {
+  background-color: whitesmoke;
+  border-bottom-color: #dbdbdb;
 }
 
-.menu-label {
-  color: #b5b5b5;
-  font-size: 11px;
-  letter-spacing: 1px;
-  margin-bottom: 5px;
-  text-transform: uppercase;
+.tabs.is-boxed li.is-active a {
+  background-color: white;
+  border-color: #dbdbdb;
+  border-bottom-color: transparent !important;
 }
 
-.menu-label:not(:first-child) {
-  margin-top: 20px;
+.tabs.is-fullwidth li {
+  flex-grow: 1;
+  flex-shrink: 0;
 }
 
-.message-body {
+.tabs.is-toggle a {
   border: 1px solid #dbdbdb;
-  border-radius: 3px;
-  padding: 12px 15px;
+  margin-bottom: 0;
+  padding-bottom: 5px;
+  padding-top: 5px;
+  position: relative;
 }
 
-.message-body strong {
-  color: inherit;
+.tabs.is-toggle a:hover {
+  background-color: whitesmoke;
+  border-color: #b5b5b5;
+  z-index: 2;
 }
 
-.message-header {
-  background-color: #7a7a7a;
-  border-radius: 3px 3px 0 0;
-  color: white;
-  padding: 7px 10px;
+.tabs.is-toggle li + li {
+  margin-left: -1px;
 }
 
-.message-header strong {
-  color: inherit;
+.tabs.is-toggle li:first-child a {
+  border-radius: 3px 0 0 3px;
 }
 
-.message-header + .message-body {
-  border-radius: 0 0 3px 3px;
-  border-top: none;
+.tabs.is-toggle li:last-child a {
+  border-radius: 0 3px 3px 0;
 }
 
-.message {
-  background-color: whitesmoke;
-  border-radius: 3px;
+.tabs.is-toggle li.is-active a {
+  background-color: #11e4c4;
+  border-color: #11e4c4;
+  color: white;
+  z-index: 1;
 }
 
-.message:not(:last-child) {
-  margin-bottom: 20px;
+.tabs.is-toggle ul {
+  border-bottom: none;
 }
 
-.message.is-white {
-  background-color: white;
+.tabs.is-small {
+  font-size: 11px;
 }
 
-.message.is-white .message-header {
-  background-color: white;
-  color: #121212;
+.tabs.is-small a {
+  padding: 2px 8px;
 }
 
-.message.is-white .message-body {
-  border-color: white;
-  color: #666666;
+.tabs.is-small.is-boxed a, .tabs.is-small.is-toggle a {
+  padding-bottom: 1px;
+  padding-top: 1px;
 }
 
-.message.is-black {
-  background-color: whitesmoke;
+.tabs.is-medium {
+  font-size: 18px;
 }
 
-.message.is-black .message-header {
-  background-color: #121212;
-  color: white;
+.tabs.is-medium a {
+  padding: 10px 16px;
 }
 
-.message.is-black .message-body {
-  border-color: #121212;
-  color: gray;
+.tabs.is-medium.is-boxed a, .tabs.is-medium.is-toggle a {
+  padding-bottom: 9px;
+  padding-top: 9px;
 }
 
-.message.is-light {
-  background-color: whitesmoke;
+.tabs.is-large {
+  font-size: 28px;
 }
 
-.message.is-light .message-header {
-  background-color: whitesmoke;
-  color: #7a7a7a;
+.tabs.is-large a {
+  padding: 14px 20px;
 }
 
-.message.is-light .message-body {
-  border-color: whitesmoke;
-  color: #666666;
+.tabs.is-large.is-boxed a, .tabs.is-large.is-toggle a {
+  padding-bottom: 13px;
+  padding-top: 13px;
 }
 
-.message.is-dark {
-  background-color: whitesmoke;
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }
 
-.message.is-dark .message-header {
-  background-color: #7a7a7a;
-  color: whitesmoke;
+.column {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 10px;
 }
 
-.message.is-dark .message-body {
-  border-color: #7a7a7a;
-  color: gray;
+.columns.is-mobile > .column.is-narrow {
+  flex: none;
 }
 
-.message.is-primary {
-  background-color: #ecfefb;
+.columns.is-mobile > .column.is-full {
+  flex: none;
+  width: 100%;
 }
 
-.message.is-primary .message-header {
-  background-color: #11e4c4;
-  color: white;
+.columns.is-mobile > .column.is-three-quarters {
+  flex: none;
+  width: 75%;
 }
 
-.message.is-primary .message-body {
-  border-color: #11e4c4;
-  color: gray;
+.columns.is-mobile > .column.is-two-thirds {
+  flex: none;
+  width: 66.6666%;
 }
 
-.message.is-info {
-  background-color: #ebf2ff;
+.columns.is-mobile > .column.is-half {
+  flex: none;
+  width: 50%;
 }
 
-.message.is-info .message-header {
-  background-color: #0f6bff;
-  color: white;
+.columns.is-mobile > .column.is-one-third {
+  flex: none;
+  width: 33.3333%;
 }
 
-.message.is-info .message-body {
-  border-color: #0f6bff;
-  color: gray;
+.columns.is-mobile > .column.is-one-quarter {
+  flex: none;
+  width: 25%;
 }
 
-.message.is-success {
-  background-color: #ecfef2;
+.columns.is-mobile > .column.is-offset-three-quarters {
+  margin-left: 75%;
 }
 
-.message.is-success .message-header {
-  background-color: #20ee68;
-  color: white;
+.columns.is-mobile > .column.is-offset-two-thirds {
+  margin-left: 66.6666%;
 }
 
-.message.is-success .message-body {
-  border-color: #20ee68;
-  color: gray;
+.columns.is-mobile > .column.is-offset-half {
+  margin-left: 50%;
 }
 
-.message.is-warning {
-  background-color: #fffbeb;
+.columns.is-mobile > .column.is-offset-one-third {
+  margin-left: 33.3333%;
 }
 
-.message.is-warning .message-header {
-  background-color: #ffcf0f;
-  color: rgba(0, 0, 0, 0.7);
+.columns.is-mobile > .column.is-offset-one-quarter {
+  margin-left: 25%;
 }
 
-.message.is-warning .message-body {
-  border-color: #ffcf0f;
-  color: gray;
+.columns.is-mobile > .column.is-1 {
+  flex: none;
+  width: 8.33333%;
 }
 
-.message.is-danger {
-  background-color: #ffebef;
+.columns.is-mobile > .column.is-offset-1 {
+  margin-left: 8.33333%;
 }
 
-.message.is-danger .message-header {
-  background-color: #ff0f3f;
-  color: white;
+.columns.is-mobile > .column.is-2 {
+  flex: none;
+  width: 16.66667%;
 }
 
-.message.is-danger .message-body {
-  border-color: #ff0f3f;
-  color: gray;
+.columns.is-mobile > .column.is-offset-2 {
+  margin-left: 16.66667%;
 }
 
-@keyframes spin-around {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
+.columns.is-mobile > .column.is-3 {
+  flex: none;
+  width: 25%;
 }
 
-.modal-background {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  background-color: rgba(18, 18, 18, 0.86);
+.columns.is-mobile > .column.is-offset-3 {
+  margin-left: 25%;
 }
 
-.modal-content,
-.modal-card {
-  margin: 0 20px;
-  max-height: calc(100vh - 160px);
-  overflow: auto;
-  position: relative;
-  width: 100%;
+.columns.is-mobile > .column.is-4 {
+  flex: none;
+  width: 33.33333%;
 }
 
-@media screen and (min-width: 769px) {
-  .modal-content,
-  .modal-card {
-    margin: 0 auto;
-    max-height: calc(100vh - 40px);
-    width: 640px;
-  }
+.columns.is-mobile > .column.is-offset-4 {
+  margin-left: 33.33333%;
 }
 
-.modal-close {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  background-color: rgba(18, 18, 18, 0.2);
-  border: none;
-  border-radius: 290486px;
-  cursor: pointer;
-  display: inline-block;
-  height: 24px;
-  position: relative;
-  vertical-align: top;
-  width: 24px;
-  background: none;
-  height: 40px;
-  position: fixed;
-  right: 20px;
-  top: 20px;
-  width: 40px;
+.columns.is-mobile > .column.is-5 {
+  flex: none;
+  width: 41.66667%;
 }
 
-.modal-close:before, .modal-close:after {
-  background-color: white;
-  content: "";
-  display: block;
-  height: 2px;
-  left: 50%;
-  margin-left: -25%;
-  margin-top: -1px;
-  position: absolute;
-  top: 50%;
+.columns.is-mobile > .column.is-offset-5 {
+  margin-left: 41.66667%;
+}
+
+.columns.is-mobile > .column.is-6 {
+  flex: none;
   width: 50%;
 }
 
-.modal-close:before {
-  transform: rotate(45deg);
+.columns.is-mobile > .column.is-offset-6 {
+  margin-left: 50%;
 }
 
-.modal-close:after {
-  transform: rotate(-45deg);
+.columns.is-mobile > .column.is-7 {
+  flex: none;
+  width: 58.33333%;
 }
 
-.modal-close:hover {
-  background-color: rgba(18, 18, 18, 0.5);
+.columns.is-mobile > .column.is-offset-7 {
+  margin-left: 58.33333%;
 }
 
-.modal-close.is-small {
-  height: 16px;
-  width: 16px;
+.columns.is-mobile > .column.is-8 {
+  flex: none;
+  width: 66.66667%;
 }
 
-.modal-close.is-medium {
-  height: 32px;
-  width: 32px;
+.columns.is-mobile > .column.is-offset-8 {
+  margin-left: 66.66667%;
 }
 
-.modal-close.is-large {
-  height: 40px;
-  width: 40px;
+.columns.is-mobile > .column.is-9 {
+  flex: none;
+  width: 75%;
 }
 
-.modal-card {
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - 40px);
-  overflow: hidden;
+.columns.is-mobile > .column.is-offset-9 {
+  margin-left: 75%;
 }
 
-.modal-card-head,
-.modal-card-foot {
-  align-items: center;
-  background-color: whitesmoke;
-  display: flex;
-  flex-shrink: 0;
-  justify-content: flex-start;
-  padding: 20px;
-  position: relative;
+.columns.is-mobile > .column.is-10 {
+  flex: none;
+  width: 83.33333%;
 }
 
-.modal-card-head {
-  border-bottom: 1px solid #dbdbdb;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+.columns.is-mobile > .column.is-offset-10 {
+  margin-left: 83.33333%;
 }
 
-.modal-card-title {
-  color: #242424;
-  flex-grow: 1;
-  flex-shrink: 0;
-  font-size: 24px;
-  line-height: 1;
+.columns.is-mobile > .column.is-11 {
+  flex: none;
+  width: 91.66667%;
 }
 
-.modal-card-foot {
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-  border-top: 1px solid #dbdbdb;
+.columns.is-mobile > .column.is-offset-11 {
+  margin-left: 91.66667%;
 }
 
-.modal-card-foot .button:not(:last-child) {
-  margin-right: 10px;
+.columns.is-mobile > .column.is-12 {
+  flex: none;
+  width: 100%;
 }
 
-.modal-card-body {
-  background-color: white;
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: auto;
-  padding: 20px;
+.columns.is-mobile > .column.is-offset-12 {
+  margin-left: 100%;
 }
 
-.modal {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  align-items: center;
-  display: none;
-  justify-content: center;
-  overflow: hidden;
-  position: fixed;
-  z-index: 1986;
+@media screen and (max-width: 768px) {
+  .column.is-narrow-mobile {
+    flex: none;
+  }
+  .column.is-full-mobile {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-three-quarters-mobile {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds-mobile {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half-mobile {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-one-third-mobile {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-one-quarter-mobile {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-three-quarters-mobile {
+    margin-left: 75%;
+  }
+  .column.is-offset-two-thirds-mobile {
+    margin-left: 66.6666%;
+  }
+  .column.is-offset-half-mobile {
+    margin-left: 50%;
+  }
+  .column.is-offset-one-third-mobile {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-one-quarter-mobile {
+    margin-left: 25%;
+  }
+  .column.is-1-mobile {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-offset-1-mobile {
+    margin-left: 8.33333%;
+  }
+  .column.is-2-mobile {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-offset-2-mobile {
+    margin-left: 16.66667%;
+  }
+  .column.is-3-mobile {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3-mobile {
+    margin-left: 25%;
+  }
+  .column.is-4-mobile {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-offset-4-mobile {
+    margin-left: 33.33333%;
+  }
+  .column.is-5-mobile {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-offset-5-mobile {
+    margin-left: 41.66667%;
+  }
+  .column.is-6-mobile {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6-mobile {
+    margin-left: 50%;
+  }
+  .column.is-7-mobile {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-offset-7-mobile {
+    margin-left: 58.33333%;
+  }
+  .column.is-8-mobile {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-offset-8-mobile {
+    margin-left: 66.66667%;
+  }
+  .column.is-9-mobile {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9-mobile {
+    margin-left: 75%;
+  }
+  .column.is-10-mobile {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-offset-10-mobile {
+    margin-left: 83.33333%;
+  }
+  .column.is-11-mobile {
+    flex: none;
+    width: 91.66667%;
+  }
+  .column.is-offset-11-mobile {
+    margin-left: 91.66667%;
+  }
+  .column.is-12-mobile {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-offset-12-mobile {
+    margin-left: 100%;
+  }
 }
 
-.modal.is-active {
-  display: flex;
+@media screen and (min-width: 769px) {
+  .column.is-narrow, .column.is-narrow-tablet {
+    flex: none;
+  }
+  .column.is-full, .column.is-full-tablet {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-three-quarters, .column.is-three-quarters-tablet {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds, .column.is-two-thirds-tablet {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half, .column.is-half-tablet {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-one-third, .column.is-one-third-tablet {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-one-quarter, .column.is-one-quarter-tablet {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
+    margin-left: 75%;
+  }
+  .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet {
+    margin-left: 66.6666%;
+  }
+  .column.is-offset-half, .column.is-offset-half-tablet {
+    margin-left: 50%;
+  }
+  .column.is-offset-one-third, .column.is-offset-one-third-tablet {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet {
+    margin-left: 25%;
+  }
+  .column.is-1, .column.is-1-tablet {
+    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 {
+    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 {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3, .column.is-offset-3-tablet {
+    margin-left: 25%;
+  }
+  .column.is-4, .column.is-4-tablet {
+    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 {
+    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 {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6, .column.is-offset-6-tablet {
+    margin-left: 50%;
+  }
+  .column.is-7, .column.is-7-tablet {
+    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 {
+    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 {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9, .column.is-offset-9-tablet {
+    margin-left: 75%;
+  }
+  .column.is-10, .column.is-10-tablet {
+    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 {
+    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 {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-offset-12, .column.is-offset-12-tablet {
+    margin-left: 100%;
+  }
 }
 
-@keyframes spin-around {
-  from {
-    transform: rotate(0deg);
+@media screen and (min-width: 980px) {
+  .column.is-narrow-desktop {
+    flex: none;
+  }
+  .column.is-full-desktop {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-three-quarters-desktop {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds-desktop {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half-desktop {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-one-third-desktop {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-one-quarter-desktop {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-three-quarters-desktop {
+    margin-left: 75%;
+  }
+  .column.is-offset-two-thirds-desktop {
+    margin-left: 66.6666%;
+  }
+  .column.is-offset-half-desktop {
+    margin-left: 50%;
+  }
+  .column.is-offset-one-third-desktop {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-one-quarter-desktop {
+    margin-left: 25%;
+  }
+  .column.is-1-desktop {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-offset-1-desktop {
+    margin-left: 8.33333%;
+  }
+  .column.is-2-desktop {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-offset-2-desktop {
+    margin-left: 16.66667%;
+  }
+  .column.is-3-desktop {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3-desktop {
+    margin-left: 25%;
+  }
+  .column.is-4-desktop {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-offset-4-desktop {
+    margin-left: 33.33333%;
+  }
+  .column.is-5-desktop {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-offset-5-desktop {
+    margin-left: 41.66667%;
+  }
+  .column.is-6-desktop {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6-desktop {
+    margin-left: 50%;
+  }
+  .column.is-7-desktop {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-offset-7-desktop {
+    margin-left: 58.33333%;
+  }
+  .column.is-8-desktop {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-offset-8-desktop {
+    margin-left: 66.66667%;
+  }
+  .column.is-9-desktop {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9-desktop {
+    margin-left: 75%;
   }
-  to {
-    transform: rotate(359deg);
+  .column.is-10-desktop {
+    flex: none;
+    width: 83.33333%;
   }
-}
-
-.nav-toggle {
-  cursor: pointer;
-  display: block;
-  height: 50px;
-  position: relative;
-  width: 50px;
-}
-
-.nav-toggle span {
-  background-color: #7a7a7a;
-  display: block;
-  height: 1px;
-  left: 50%;
-  margin-left: -7px;
-  position: absolute;
-  top: 50%;
-  transition: none 86ms ease-out;
-  transition-property: background, left, opacity, transform;
-  width: 15px;
-}
-
-.nav-toggle span:nth-child(1) {
-  margin-top: -6px;
-}
-
-.nav-toggle span:nth-child(2) {
-  margin-top: -1px;
-}
-
-.nav-toggle span:nth-child(3) {
-  margin-top: 4px;
-}
-
-.nav-toggle:hover {
-  background-color: whitesmoke;
-}
-
-.nav-toggle.is-active span {
-  background-color: #11e4c4;
-}
-
-.nav-toggle.is-active span:nth-child(1) {
-  margin-left: -5px;
-  transform: rotate(45deg);
-  transform-origin: left top;
-}
-
-.nav-toggle.is-active span:nth-child(2) {
-  opacity: 0;
-}
-
-.nav-toggle.is-active span:nth-child(3) {
-  margin-left: -5px;
-  transform: rotate(-45deg);
-  transform-origin: left bottom;
-}
-
-@media screen and (min-width: 769px) {
-  .nav-toggle {
-    display: none;
+  .column.is-offset-10-desktop {
+    margin-left: 83.33333%;
   }
-}
-
-.nav-item {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  padding: 10px;
-}
-
-.nav-item a {
-  flex-grow: 1;
-  flex-shrink: 0;
-}
-
-.nav-item img {
-  max-height: 24px;
-}
-
-.nav-item .button + .button {
-  margin-left: 10px;
-}
-
-.nav-item .tag:first-child {
-  margin-right: 5px;
-}
-
-.nav-item .tag:last-child {
-  margin-left: 5px;
-}
-
-@media screen and (max-width: 768px) {
-  .nav-item {
-    justify-content: flex-start;
+  .column.is-11-desktop {
+    flex: none;
+    width: 91.66667%;
   }
-}
-
-.nav-item a,
-a.nav-item {
-  color: #7a7a7a;
-}
-
-.nav-item a:hover,
-a.nav-item:hover {
-  color: #242424;
-}
-
-.nav-item a.is-active,
-a.nav-item.is-active {
-  color: #242424;
-}
-
-.nav-item a.is-tab,
-a.nav-item.is-tab {
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.nav-item a.is-tab:hover,
-a.nav-item.is-tab:hover {
-  border-bottom: 1px solid #11e4c4;
-  border-top: 1px solid transparent;
-}
-
-.nav-item a.is-tab.is-active,
-a.nav-item.is-tab.is-active {
-  border-bottom: 3px solid #11e4c4;
-  border-top: 3px solid transparent;
-  color: #11e4c4;
-}
-
-@media screen and (max-width: 768px) {
-  .nav-menu {
-    background-color: white;
-    box-shadow: 0 4px 7px rgba(18, 18, 18, 0.1);
-    left: 0;
-    display: none;
-    right: 0;
-    top: 100%;
-    position: absolute;
+  .column.is-offset-11-desktop {
+    margin-left: 91.66667%;
   }
-  .nav-menu .nav-item {
-    border-top: 1px solid rgba(219, 219, 219, 0.5);
-    padding: 10px;
+  .column.is-12-desktop {
+    flex: none;
+    width: 100%;
   }
-  .nav-menu.is-active {
-    display: block;
+  .column.is-offset-12-desktop {
+    margin-left: 100%;
   }
 }
 
-@media screen and (min-width: 769px) and (max-width: 979px) {
-  .nav-menu {
-    padding-right: 20px;
+@media screen and (min-width: 1180px) {
+  .column.is-narrow-widescreen {
+    flex: none;
   }
-}
-
-.nav-left {
-  align-items: stretch;
-  display: flex;
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 0;
-  justify-content: flex-start;
-  overflow: hidden;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.nav-center {
-  align-items: stretch;
-  display: flex;
-  justify-content: center;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media screen and (min-width: 769px) {
-  .nav-right {
-    align-items: stretch;
-    display: flex;
-    flex-basis: 0;
-    flex-grow: 1;
-    flex-shrink: 0;
-    justify-content: flex-end;
+  .column.is-full-widescreen {
+    flex: none;
+    width: 100%;
   }
-}
-
-.nav {
-  align-items: stretch;
-  background-color: white;
-  display: flex;
-  min-height: 50px;
-  position: relative;
-  text-align: center;
-  z-index: 2;
-}
-
-.nav > .container {
-  align-items: stretch;
-  display: flex;
-  min-height: 50px;
-  width: 100%;
-}
-
-.nav > .container > .nav-left > .nav-item:first-child:not(.is-tab) {
-  padding-left: 0;
-}
-
-.nav > .container > .nav-right > .nav-item:last-child:not(.is-tab) {
-  padding-right: 0;
-}
-
-.container > .nav > .nav-left > .nav-item:first-child:not(.is-tab) {
-  padding-left: 0;
-}
-
-.container > .nav > .nav-right > .nav-item:last-child:not(.is-tab) {
-  padding-right: 0;
-}
-
-.nav.has-shadow {
-  box-shadow: 0 2px 3px rgba(18, 18, 18, 0.1);
-}
-
-@media screen and (max-width: 979px) {
-  .nav > .container > .nav-left > .nav-item.is-brand:first-child,
-  .container > .nav > .nav-left > .nav-item.is-brand:first-child {
-    padding-left: 20px;
+  .column.is-three-quarters-widescreen {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds-widescreen {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half-widescreen {
+    flex: none;
+    width: 50%;
   }
-}
-
-@keyframes spin-around {
-  from {
-    transform: rotate(0deg);
+  .column.is-one-third-widescreen {
+    flex: none;
+    width: 33.3333%;
   }
-  to {
-    transform: rotate(359deg);
+  .column.is-one-quarter-widescreen {
+    flex: none;
+    width: 25%;
   }
-}
-
-.pagination {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-}
-
-.pagination a {
-  display: block;
-  min-width: 32px;
-  padding: 3px 8px;
-}
-
-.pagination span {
-  color: #b5b5b5;
-  display: block;
-  margin: 0 4px;
-}
-
-.pagination li {
-  margin: 0 2px;
-}
-
-.pagination ul {
-  align-items: center;
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 0;
-  justify-content: center;
-}
-
-@media screen and (max-width: 768px) {
-  .pagination {
-    flex-wrap: wrap;
+  .column.is-offset-three-quarters-widescreen {
+    margin-left: 75%;
   }
-  .pagination > a {
-    width: calc(50% - 5px);
+  .column.is-offset-two-thirds-widescreen {
+    margin-left: 66.6666%;
   }
-  .pagination > a:not(:first-child) {
-    margin-left: 10px;
+  .column.is-offset-half-widescreen {
+    margin-left: 50%;
   }
-  .pagination li {
-    flex-grow: 1;
-    flex-shrink: 0;
+  .column.is-offset-one-third-widescreen {
+    margin-left: 33.3333%;
   }
-  .pagination ul {
-    margin-top: 10px;
+  .column.is-offset-one-quarter-widescreen {
+    margin-left: 25%;
   }
-}
-
-@media screen and (min-width: 769px) {
-  .pagination > a:not(:first-child) {
-    order: 1;
+  .column.is-1-widescreen {
+    flex: none;
+    width: 8.33333%;
   }
-}
-
-@keyframes spin-around {
-  from {
-    transform: rotate(0deg);
+  .column.is-offset-1-widescreen {
+    margin-left: 8.33333%;
   }
-  to {
-    transform: rotate(359deg);
+  .column.is-2-widescreen {
+    flex: none;
+    width: 16.66667%;
   }
-}
-
-.panel-icon {
-  display: inline-block;
-  font-size: 14px;
-  height: 16px;
-  line-height: 16px;
-  text-align: center;
-  vertical-align: top;
-  width: 16px;
-  color: #b5b5b5;
-  float: left;
-  margin: 0 4px 0 -2px;
-}
-
-.panel-icon .fa {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.panel-heading {
-  background-color: whitesmoke;
-  border-bottom: 1px solid #dbdbdb;
-  border-radius: 4px 4px 0 0;
-  color: #242424;
-  font-size: 18px;
-  font-weight: 300;
-  padding: 10px;
-}
-
-.panel-list a {
-  color: #7a7a7a;
-}
-
-.panel-list a:hover {
-  color: #11e4c4;
-}
-
-.panel-tabs {
-  display: flex;
-  font-size: 11px;
-  padding: 5px 10px 0;
-  justify-content: center;
-}
-
-.panel-tabs a {
-  border-bottom: 1px solid #dbdbdb;
-  margin-bottom: -1px;
-  padding: 5px;
-}
-
-.panel-tabs a.is-active {
-  border-bottom-color: #242424;
-  color: #242424;
-}
-
-.panel-tabs:not(:last-child) {
-  border-bottom: 1px solid #dbdbdb;
-}
-
-.panel-block {
-  color: #242424;
-  display: block;
-  line-height: 16px;
-  padding: 10px;
-}
-
-.panel-block:not(:last-child) {
-  border-bottom: 1px solid #dbdbdb;
-}
-
-a.panel-block:hover {
-  background-color: whitesmoke;
-}
-
-.panel {
-  border: 1px solid #dbdbdb;
-  border-radius: 5px;
-}
-
-.panel:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-@keyframes spin-around {
-  from {
-    transform: rotate(0deg);
+  .column.is-offset-2-widescreen {
+    margin-left: 16.66667%;
   }
-  to {
-    transform: rotate(359deg);
+  .column.is-3-widescreen {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3-widescreen {
+    margin-left: 25%;
+  }
+  .column.is-4-widescreen {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-offset-4-widescreen {
+    margin-left: 33.33333%;
+  }
+  .column.is-5-widescreen {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-offset-5-widescreen {
+    margin-left: 41.66667%;
+  }
+  .column.is-6-widescreen {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6-widescreen {
+    margin-left: 50%;
+  }
+  .column.is-7-widescreen {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-offset-7-widescreen {
+    margin-left: 58.33333%;
+  }
+  .column.is-8-widescreen {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-offset-8-widescreen {
+    margin-left: 66.66667%;
+  }
+  .column.is-9-widescreen {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9-widescreen {
+    margin-left: 75%;
+  }
+  .column.is-10-widescreen {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-offset-10-widescreen {
+    margin-left: 83.33333%;
+  }
+  .column.is-11-widescreen {
+    flex: none;
+    width: 91.66667%;
+  }
+  .column.is-offset-11-widescreen {
+    margin-left: 91.66667%;
+  }
+  .column.is-12-widescreen {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-offset-12-widescreen {
+    margin-left: 100%;
   }
 }
 
-.tabs {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  align-items: stretch;
-  display: flex;
-  justify-content: space-between;
-  line-height: 24px;
-  overflow: hidden;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-.tabs:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-.tabs a {
-  align-items: center;
-  border-bottom: 1px solid #dbdbdb;
-  color: #7a7a7a;
-  display: flex;
-  justify-content: center;
-  margin-bottom: -1px;
-  padding: 6px 12px;
-  vertical-align: top;
-}
-
-.tabs a:hover {
-  border-bottom-color: #242424;
-  color: #242424;
-}
-
-.tabs li {
-  display: block;
-}
-
-.tabs li.is-active a {
-  border-bottom-color: #11e4c4;
-  color: #11e4c4;
-}
-
-.tabs ul {
-  align-items: center;
-  border-bottom: 1px solid #dbdbdb;
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 0;
-  justify-content: flex-start;
-}
-
-.tabs ul.is-left {
-  padding-right: 10px;
-}
-
-.tabs ul.is-center {
-  flex: none;
-  justify-content: center;
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.tabs ul.is-right {
-  justify-content: flex-end;
-  padding-left: 10px;
+.columns {
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-top: -10px;
 }
 
-.tabs .icon:first-child {
-  margin-right: 8px;
+.columns:last-child {
+  margin-bottom: -10px;
 }
 
-.tabs .icon:last-child {
-  margin-left: 8px;
+.columns:not(:last-child) {
+  margin-bottom: 10px;
 }
 
-.tabs.is-centered ul {
+.columns.is-centered {
   justify-content: center;
 }
 
-.tabs.is-right ul {
-  justify-content: flex-end;
-}
-
-.tabs.is-boxed a {
-  border: 1px solid transparent;
-  border-radius: 3px 3px 0 0;
-  padding-bottom: 5px;
-  padding-top: 5px;
+.columns.is-gapless {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
 }
 
-.tabs.is-boxed a:hover {
-  background-color: whitesmoke;
-  border-bottom-color: #dbdbdb;
+.columns.is-gapless:last-child {
+  margin-bottom: 0;
 }
 
-.tabs.is-boxed li.is-active a {
-  background-color: white;
-  border-color: #dbdbdb;
-  border-bottom-color: transparent !important;
+.columns.is-gapless:not(:last-child) {
+  margin-bottom: 20px;
 }
 
-.tabs.is-fullwidth li {
-  flex-grow: 1;
-  flex-shrink: 0;
+.columns.is-gapless > .column {
+  margin: 0;
+  padding: 0;
 }
 
-.tabs.is-toggle a {
-  border: 1px solid #dbdbdb;
-  margin-bottom: 0;
-  padding-bottom: 5px;
-  padding-top: 5px;
-  position: relative;
+@media screen and (min-width: 769px) {
+  .columns.is-grid {
+    flex-wrap: wrap;
+  }
+  .columns.is-grid > .column {
+    max-width: 33.3333%;
+    padding: 10px;
+    width: 33.3333%;
+  }
+  .columns.is-grid > .column + .column {
+    margin-left: 0;
+  }
 }
 
-.tabs.is-toggle a:hover {
-  background-color: whitesmoke;
-  border-color: #b5b5b5;
-  z-index: 2;
+.columns.is-mobile {
+  display: flex;
 }
 
-.tabs.is-toggle li + li {
-  margin-left: -1px;
+.columns.is-multiline {
+  flex-wrap: wrap;
 }
 
-.tabs.is-toggle li:first-child a {
-  border-radius: 3px 0 0 3px;
+.columns.is-vcentered {
+  align-items: center;
 }
 
-.tabs.is-toggle li:last-child a {
-  border-radius: 0 3px 3px 0;
+@media screen and (min-width: 769px) {
+  .columns:not(.is-desktop) {
+    display: flex;
+  }
 }
 
-.tabs.is-toggle li.is-active a {
-  background-color: #11e4c4;
-  border-color: #11e4c4;
-  color: white;
-  z-index: 1;
+@media screen and (min-width: 980px) {
+  .columns.is-desktop {
+    display: flex;
+  }
 }
 
-.tabs.is-toggle ul {
-  border-bottom: none;
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
 }
 
-.tabs.is-small {
-  font-size: 11px;
+.tile {
+  align-items: stretch;
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-height: min-content;
 }
 
-.tabs.is-small a {
-  padding: 2px 8px;
+.tile.is-ancestor {
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-top: -10px;
 }
 
-.tabs.is-small.is-boxed a, .tabs.is-small.is-toggle a {
-  padding-bottom: 1px;
-  padding-top: 1px;
+.tile.is-ancestor:last-child {
+  margin-bottom: -10px;
 }
 
-.tabs.is-medium {
-  font-size: 18px;
+.tile.is-ancestor:not(:last-child) {
+  margin-bottom: 10px;
 }
 
-.tabs.is-medium a {
-  padding: 10px 16px;
+.tile.is-child {
+  margin: 0 !important;
 }
 
-.tabs.is-medium.is-boxed a, .tabs.is-medium.is-toggle a {
-  padding-bottom: 9px;
-  padding-top: 9px;
+.tile.is-parent {
+  padding: 10px;
 }
 
-.tabs.is-large {
-  font-size: 28px;
+.tile.is-vertical {
+  flex-direction: column;
 }
 
-.tabs.is-large a {
-  padding: 14px 20px;
+.tile.is-vertical > .tile.is-child:not(:last-child) {
+  margin-bottom: 20px !important;
 }
 
-.tabs.is-large.is-boxed a, .tabs.is-large.is-toggle a {
-  padding-bottom: 13px;
-  padding-top: 13px;
+@media screen and (min-width: 769px) {
+  .tile:not(.is-child) {
+    display: flex;
+  }
+  .tile.is-1 {
+    flex: none;
+    width: 8.33333%;
+  }
+  .tile.is-2 {
+    flex: none;
+    width: 16.66667%;
+  }
+  .tile.is-3 {
+    flex: none;
+    width: 25%;
+  }
+  .tile.is-4 {
+    flex: none;
+    width: 33.33333%;
+  }
+  .tile.is-5 {
+    flex: none;
+    width: 41.66667%;
+  }
+  .tile.is-6 {
+    flex: none;
+    width: 50%;
+  }
+  .tile.is-7 {
+    flex: none;
+    width: 58.33333%;
+  }
+  .tile.is-8 {
+    flex: none;
+    width: 66.66667%;
+  }
+  .tile.is-9 {
+    flex: none;
+    width: 75%;
+  }
+  .tile.is-10 {
+    flex: none;
+    width: 83.33333%;
+  }
+  .tile.is-11 {
+    flex: none;
+    width: 91.66667%;
+  }
+  .tile.is-12 {
+    flex: none;
+    width: 100%;
+  }
 }
 
 @keyframes spin-around {
diff --git a/sass/components/components.sass b/sass/components/components.sass
index 9d03779a5..7ea178fa7 100644
--- a/sass/components/components.sass
+++ b/sass/components/components.sass
@@ -1,7 +1,6 @@
 @charset "utf-8"
 
 @import "card"
-@import "grid"
 @import "highlight"
 @import "level"
 @import "media"
diff --git a/sass/components/grid.sass b/sass/grid/columns.sass
similarity index 90%
rename from sass/components/grid.sass
rename to sass/grid/columns.sass
index ff0207665..e3f91aea5 100644
--- a/sass/components/grid.sass
+++ b/sass/grid/columns.sass
@@ -251,35 +251,3 @@
     // Modifiers
     &.is-desktop
       display: flex
-
-.tile
-  align-items: stretch
-  flex-basis: auto
-  flex-grow: 1
-  flex-shrink: 1
-  min-height: min-content
-  // Modifiers
-  &.is-ancestor
-    margin-left: -10px
-    margin-right: -10px
-    margin-top: -10px
-    &:last-child
-      margin-bottom: -10px
-    &:not(:last-child)
-      margin-bottom: 10px
-  &.is-child
-    margin: 0 !important
-  &.is-parent
-    padding: 10px
-  &.is-vertical
-    flex-direction: column
-    & > .tile.is-child:not(:last-child)
-      margin-bottom: 20px !important
-  // Responsiveness
-  +tablet
-    &:not(.is-child)
-      display: flex
-    @for $i from 1 through 12
-      &.is-#{$i}
-        flex: none
-        width: ($i / 12) * 100%
diff --git a/sass/grid/grid.sass b/sass/grid/grid.sass
new file mode 100644
index 000000000..92a4634a8
--- /dev/null
+++ b/sass/grid/grid.sass
@@ -0,0 +1,4 @@
+@charset "utf-8"
+
+@import "columns"
+@import "tiles"
diff --git a/sass/grid/tiles.sass b/sass/grid/tiles.sass
new file mode 100644
index 000000000..f4d5675ee
--- /dev/null
+++ b/sass/grid/tiles.sass
@@ -0,0 +1,34 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
+.tile
+  align-items: stretch
+  flex-basis: auto
+  flex-grow: 1
+  flex-shrink: 1
+  min-height: min-content
+  // Modifiers
+  &.is-ancestor
+    margin-left: -10px
+    margin-right: -10px
+    margin-top: -10px
+    &:last-child
+      margin-bottom: -10px
+    &:not(:last-child)
+      margin-bottom: 10px
+  &.is-child
+    margin: 0 !important
+  &.is-parent
+    padding: 10px
+  &.is-vertical
+    flex-direction: column
+    & > .tile.is-child:not(:last-child)
+      margin-bottom: 20px !important
+  // Responsiveness
+  +tablet
+    &:not(.is-child)
+      display: flex
+    @for $i from 1 through 12
+      &.is-#{$i}
+        flex: none
+        width: ($i / 12) * 100%