@nappr/nappr-styles 0.2.27 → 0.3.0

package/dist/styles.css

@@ -15,6 +15,16 @@
 SOURCE: https://github.com/pierreburel/sass-rem
 
 ------------------------------------ */
+/**
+ *
+ * !!! DO NOT REORDER -> Declarative loading
+ *
+ */
+/**
+ *
+ * !!! DO NOT REORDER -> Declarative loading
+ *
+ */
 :root {
   --nappr-black: #000000;
   --nappr-white: #ffffff;
@@ -67,836 +77,665 @@ SOURCE: https://github.com/pierreburel/sass-rem
 }
 
 .b1 {
-  border-width: 1px;
-  border-width: 0.0625rem;
+  border-width: number-to-pixel(1);
   border-style: solid;
 }
 
 .by1 {
-  border-top-width: 1px;
-  border-top-width: 0.0625rem;
-  border-bottom-width: 1px;
-  border-bottom-width: 0.0625rem;
+  border-top-width: number-to-pixel(1);
+  border-bottom-width: number-to-pixel(1);
   border-style: solid;
 }
 
 .bx1 {
-  border-left-width: 1px;
-  border-left-width: 0.0625rem;
-  border-right-width: 1px;
-  border-right-width: 0.0625rem;
+  border-left-width: number-to-pixel(1);
+  border-right-width: number-to-pixel(1);
   border-style: solid;
 }
 
 .bt1 {
-  border-top-width: 1px;
-  border-top-width: 0.0625rem;
+  border-top-width: number-to-pixel(1);
   border-style: solid;
 }
 
 .bl1 {
-  border-left-width: 1px;
-  border-left-width: 0.0625rem;
+  border-left-width: number-to-pixel(1);
   border-style: solid;
 }
 
 .br1 {
-  border-right-width: 1px;
-  border-right-width: 0.0625rem;
+  border-right-width: number-to-pixel(1);
   border-style: solid;
 }
 
 .bb1 {
-  border-bottom-width: 1px;
-  border-bottom-width: 0.0625rem;
+  border-bottom-width: number-to-pixel(1);
   border-style: solid;
 }
 
 .b2 {
-  border-width: 2px;
-  border-width: 0.125rem;
+  border-width: number-to-pixel(2);
   border-style: solid;
 }
 
 .by2 {
-  border-top-width: 2px;
-  border-top-width: 0.125rem;
-  border-bottom-width: 2px;
-  border-bottom-width: 0.125rem;
+  border-top-width: number-to-pixel(2);
+  border-bottom-width: number-to-pixel(2);
   border-style: solid;
 }
 
 .bx2 {
-  border-left-width: 2px;
-  border-left-width: 0.125rem;
-  border-right-width: 2px;
-  border-right-width: 0.125rem;
+  border-left-width: number-to-pixel(2);
+  border-right-width: number-to-pixel(2);
   border-style: solid;
 }
 
 .bt2 {
-  border-top-width: 2px;
-  border-top-width: 0.125rem;
+  border-top-width: number-to-pixel(2);
   border-style: solid;
 }
 
 .bl2 {
-  border-left-width: 2px;
-  border-left-width: 0.125rem;
+  border-left-width: number-to-pixel(2);
   border-style: solid;
 }
 
 .br2 {
-  border-right-width: 2px;
-  border-right-width: 0.125rem;
+  border-right-width: number-to-pixel(2);
   border-style: solid;
 }
 
 .bb2 {
-  border-bottom-width: 2px;
-  border-bottom-width: 0.125rem;
+  border-bottom-width: number-to-pixel(2);
   border-style: solid;
 }
 
 .b3 {
-  border-width: 3px;
-  border-width: 0.1875rem;
+  border-width: number-to-pixel(3);
   border-style: solid;
 }
 
 .by3 {
-  border-top-width: 3px;
-  border-top-width: 0.1875rem;
-  border-bottom-width: 3px;
-  border-bottom-width: 0.1875rem;
+  border-top-width: number-to-pixel(3);
+  border-bottom-width: number-to-pixel(3);
   border-style: solid;
 }
 
 .bx3 {
-  border-left-width: 3px;
-  border-left-width: 0.1875rem;
-  border-right-width: 3px;
-  border-right-width: 0.1875rem;
+  border-left-width: number-to-pixel(3);
+  border-right-width: number-to-pixel(3);
   border-style: solid;
 }
 
 .bt3 {
-  border-top-width: 3px;
-  border-top-width: 0.1875rem;
+  border-top-width: number-to-pixel(3);
   border-style: solid;
 }
 
 .bl3 {
-  border-left-width: 3px;
-  border-left-width: 0.1875rem;
+  border-left-width: number-to-pixel(3);
   border-style: solid;
 }
 
 .br3 {
-  border-right-width: 3px;
-  border-right-width: 0.1875rem;
+  border-right-width: number-to-pixel(3);
   border-style: solid;
 }
 
 .bb3 {
-  border-bottom-width: 3px;
-  border-bottom-width: 0.1875rem;
+  border-bottom-width: number-to-pixel(3);
   border-style: solid;
 }
 
 .b4 {
-  border-width: 4px;
-  border-width: 0.25rem;
+  border-width: number-to-pixel(4);
   border-style: solid;
 }
 
 .by4 {
-  border-top-width: 4px;
-  border-top-width: 0.25rem;
-  border-bottom-width: 4px;
-  border-bottom-width: 0.25rem;
+  border-top-width: number-to-pixel(4);
+  border-bottom-width: number-to-pixel(4);
   border-style: solid;
 }
 
 .bx4 {
-  border-left-width: 4px;
-  border-left-width: 0.25rem;
-  border-right-width: 4px;
-  border-right-width: 0.25rem;
+  border-left-width: number-to-pixel(4);
+  border-right-width: number-to-pixel(4);
   border-style: solid;
 }
 
 .bt4 {
-  border-top-width: 4px;
-  border-top-width: 0.25rem;
+  border-top-width: number-to-pixel(4);
   border-style: solid;
 }
 
 .bl4 {
-  border-left-width: 4px;
-  border-left-width: 0.25rem;
+  border-left-width: number-to-pixel(4);
   border-style: solid;
 }
 
 .br4 {
-  border-right-width: 4px;
-  border-right-width: 0.25rem;
+  border-right-width: number-to-pixel(4);
   border-style: solid;
 }
 
 .bb4 {
-  border-bottom-width: 4px;
-  border-bottom-width: 0.25rem;
+  border-bottom-width: number-to-pixel(4);
   border-style: solid;
 }
 
 .b5 {
-  border-width: 5px;
-  border-width: 0.3125rem;
+  border-width: number-to-pixel(5);
   border-style: solid;
 }
 
 .by5 {
-  border-top-width: 5px;
-  border-top-width: 0.3125rem;
-  border-bottom-width: 5px;
-  border-bottom-width: 0.3125rem;
+  border-top-width: number-to-pixel(5);
+  border-bottom-width: number-to-pixel(5);
   border-style: solid;
 }
 
 .bx5 {
-  border-left-width: 5px;
-  border-left-width: 0.3125rem;
-  border-right-width: 5px;
-  border-right-width: 0.3125rem;
+  border-left-width: number-to-pixel(5);
+  border-right-width: number-to-pixel(5);
   border-style: solid;
 }
 
 .bt5 {
-  border-top-width: 5px;
-  border-top-width: 0.3125rem;
+  border-top-width: number-to-pixel(5);
   border-style: solid;
 }
 
 .bl5 {
-  border-left-width: 5px;
-  border-left-width: 0.3125rem;
+  border-left-width: number-to-pixel(5);
   border-style: solid;
 }
 
 .br5 {
-  border-right-width: 5px;
-  border-right-width: 0.3125rem;
+  border-right-width: number-to-pixel(5);
   border-style: solid;
 }
 
 .bb5 {
-  border-bottom-width: 5px;
-  border-bottom-width: 0.3125rem;
+  border-bottom-width: number-to-pixel(5);
   border-style: solid;
 }
 
 .b6 {
-  border-width: 6px;
-  border-width: 0.375rem;
+  border-width: number-to-pixel(6);
   border-style: solid;
 }
 
 .by6 {
-  border-top-width: 6px;
-  border-top-width: 0.375rem;
-  border-bottom-width: 6px;
-  border-bottom-width: 0.375rem;
+  border-top-width: number-to-pixel(6);
+  border-bottom-width: number-to-pixel(6);
   border-style: solid;
 }
 
 .bx6 {
-  border-left-width: 6px;
-  border-left-width: 0.375rem;
-  border-right-width: 6px;
-  border-right-width: 0.375rem;
+  border-left-width: number-to-pixel(6);
+  border-right-width: number-to-pixel(6);
   border-style: solid;
 }
 
 .bt6 {
-  border-top-width: 6px;
-  border-top-width: 0.375rem;
+  border-top-width: number-to-pixel(6);
   border-style: solid;
 }
 
 .bl6 {
-  border-left-width: 6px;
-  border-left-width: 0.375rem;
+  border-left-width: number-to-pixel(6);
   border-style: solid;
 }
 
 .br6 {
-  border-right-width: 6px;
-  border-right-width: 0.375rem;
+  border-right-width: number-to-pixel(6);
   border-style: solid;
 }
 
 .bb6 {
-  border-bottom-width: 6px;
-  border-bottom-width: 0.375rem;
+  border-bottom-width: number-to-pixel(6);
   border-style: solid;
 }
 
 .b7 {
-  border-width: 7px;
-  border-width: 0.4375rem;
+  border-width: number-to-pixel(7);
   border-style: solid;
 }
 
 .by7 {
-  border-top-width: 7px;
-  border-top-width: 0.4375rem;
-  border-bottom-width: 7px;
-  border-bottom-width: 0.4375rem;
+  border-top-width: number-to-pixel(7);
+  border-bottom-width: number-to-pixel(7);
   border-style: solid;
 }
 
 .bx7 {
-  border-left-width: 7px;
-  border-left-width: 0.4375rem;
-  border-right-width: 7px;
-  border-right-width: 0.4375rem;
+  border-left-width: number-to-pixel(7);
+  border-right-width: number-to-pixel(7);
   border-style: solid;
 }
 
 .bt7 {
-  border-top-width: 7px;
-  border-top-width: 0.4375rem;
+  border-top-width: number-to-pixel(7);
   border-style: solid;
 }
 
 .bl7 {
-  border-left-width: 7px;
-  border-left-width: 0.4375rem;
+  border-left-width: number-to-pixel(7);
   border-style: solid;
 }
 
 .br7 {
-  border-right-width: 7px;
-  border-right-width: 0.4375rem;
+  border-right-width: number-to-pixel(7);
   border-style: solid;
 }
 
 .bb7 {
-  border-bottom-width: 7px;
-  border-bottom-width: 0.4375rem;
+  border-bottom-width: number-to-pixel(7);
   border-style: solid;
 }
 
 .b8 {
-  border-width: 8px;
-  border-width: 0.5rem;
+  border-width: number-to-pixel(8);
   border-style: solid;
 }
 
 .by8 {
-  border-top-width: 8px;
-  border-top-width: 0.5rem;
-  border-bottom-width: 8px;
-  border-bottom-width: 0.5rem;
+  border-top-width: number-to-pixel(8);
+  border-bottom-width: number-to-pixel(8);
   border-style: solid;
 }
 
 .bx8 {
-  border-left-width: 8px;
-  border-left-width: 0.5rem;
-  border-right-width: 8px;
-  border-right-width: 0.5rem;
+  border-left-width: number-to-pixel(8);
+  border-right-width: number-to-pixel(8);
   border-style: solid;
 }
 
 .bt8 {
-  border-top-width: 8px;
-  border-top-width: 0.5rem;
+  border-top-width: number-to-pixel(8);
   border-style: solid;
 }
 
 .bl8 {
-  border-left-width: 8px;
-  border-left-width: 0.5rem;
+  border-left-width: number-to-pixel(8);
   border-style: solid;
 }
 
 .br8 {
-  border-right-width: 8px;
-  border-right-width: 0.5rem;
+  border-right-width: number-to-pixel(8);
   border-style: solid;
 }
 
 .bb8 {
-  border-bottom-width: 8px;
-  border-bottom-width: 0.5rem;
+  border-bottom-width: number-to-pixel(8);
   border-style: solid;
 }
 
 .b10 {
-  border-width: 10px;
-  border-width: 0.625rem;
+  border-width: number-to-pixel(10);
   border-style: solid;
 }
 
 .by10 {
-  border-top-width: 10px;
-  border-top-width: 0.625rem;
-  border-bottom-width: 10px;
-  border-bottom-width: 0.625rem;
+  border-top-width: number-to-pixel(10);
+  border-bottom-width: number-to-pixel(10);
   border-style: solid;
 }
 
 .bx10 {
-  border-left-width: 10px;
-  border-left-width: 0.625rem;
-  border-right-width: 10px;
-  border-right-width: 0.625rem;
+  border-left-width: number-to-pixel(10);
+  border-right-width: number-to-pixel(10);
   border-style: solid;
 }
 
 .bt10 {
-  border-top-width: 10px;
-  border-top-width: 0.625rem;
+  border-top-width: number-to-pixel(10);
   border-style: solid;
 }
 
 .bl10 {
-  border-left-width: 10px;
-  border-left-width: 0.625rem;
+  border-left-width: number-to-pixel(10);
   border-style: solid;
 }
 
 .br10 {
-  border-right-width: 10px;
-  border-right-width: 0.625rem;
+  border-right-width: number-to-pixel(10);
   border-style: solid;
 }
 
 .bb10 {
-  border-bottom-width: 10px;
-  border-bottom-width: 0.625rem;
+  border-bottom-width: number-to-pixel(10);
   border-style: solid;
 }
 
 .rad2,
 .brad2 {
-  border-radius: 2px;
-  border-radius: 0.125rem;
+  border-radius: number-to-pixel(2);
 }
 
 .radt2,
 .bradt2 {
-  border-top-left-radius: 2px;
-  border-top-left-radius: 0.125rem;
-  border-top-right-radius: 2px;
-  border-top-right-radius: 0.125rem;
+  border-top-left-radius: number-to-pixel(2);
+  border-top-right-radius: number-to-pixel(2);
   border-style: solid;
 }
 
 .radl2,
 .bradl2 {
-  border-top-left-radius: 2px;
-  border-top-left-radius: 0.125rem;
-  border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 0.125rem;
+  border-top-left-radius: number-to-pixel(2);
+  border-bottom-left-radius: number-to-pixel(2);
   border-style: solid;
 }
 
 .radt2,
 .bradt2 {
-  border-top-right-radius: 2px;
-  border-top-right-radius: 0.125rem;
-  border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 0.125rem;
+  border-top-right-radius: number-to-pixel(2);
+  border-bottom-right-radius: number-to-pixel(2);
   border-style: solid;
 }
 
 .radb2,
 .bradb2 {
-  border-bottom-right-radius: 2px;
-  border-bottom-right-radius: 0.125rem;
-  border-bottom-left-radius: 2px;
-  border-bottom-left-radius: 0.125rem;
+  border-bottom-right-radius: number-to-pixel(2);
+  border-bottom-left-radius: number-to-pixel(2);
   border-style: solid;
 }
 
 .rad3,
 .brad3 {
-  border-radius: 3px;
-  border-radius: 0.1875rem;
+  border-radius: number-to-pixel(3);
 }
 
 .radt3,
 .bradt3 {
-  border-top-left-radius: 3px;
-  border-top-left-radius: 0.1875rem;
-  border-top-right-radius: 3px;
-  border-top-right-radius: 0.1875rem;
+  border-top-left-radius: number-to-pixel(3);
+  border-top-right-radius: number-to-pixel(3);
   border-style: solid;
 }
 
 .radl3,
 .bradl3 {
-  border-top-left-radius: 3px;
-  border-top-left-radius: 0.1875rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 0.1875rem;
+  border-top-left-radius: number-to-pixel(3);
+  border-bottom-left-radius: number-to-pixel(3);
   border-style: solid;
 }
 
 .radt3,
 .bradt3 {
-  border-top-right-radius: 3px;
-  border-top-right-radius: 0.1875rem;
-  border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 0.1875rem;
+  border-top-right-radius: number-to-pixel(3);
+  border-bottom-right-radius: number-to-pixel(3);
   border-style: solid;
 }
 
 .radb3,
 .bradb3 {
-  border-bottom-right-radius: 3px;
-  border-bottom-right-radius: 0.1875rem;
-  border-bottom-left-radius: 3px;
-  border-bottom-left-radius: 0.1875rem;
+  border-bottom-right-radius: number-to-pixel(3);
+  border-bottom-left-radius: number-to-pixel(3);
   border-style: solid;
 }
 
 .rad4,
 .brad4 {
-  border-radius: 4px;
-  border-radius: 0.25rem;
+  border-radius: number-to-pixel(4);
 }
 
 .radt4,
 .bradt4 {
-  border-top-left-radius: 4px;
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 4px;
-  border-top-right-radius: 0.25rem;
+  border-top-left-radius: number-to-pixel(4);
+  border-top-right-radius: number-to-pixel(4);
   border-style: solid;
 }
 
 .radl4,
 .bradl4 {
-  border-top-left-radius: 4px;
-  border-top-left-radius: 0.25rem;
-  border-bottom-left-radius: 4px;
-  border-bottom-left-radius: 0.25rem;
+  border-top-left-radius: number-to-pixel(4);
+  border-bottom-left-radius: number-to-pixel(4);
   border-style: solid;
 }
 
 .radt4,
 .bradt4 {
-  border-top-right-radius: 4px;
-  border-top-right-radius: 0.25rem;
-  border-bottom-right-radius: 4px;
-  border-bottom-right-radius: 0.25rem;
+  border-top-right-radius: number-to-pixel(4);
+  border-bottom-right-radius: number-to-pixel(4);
   border-style: solid;
 }
 
 .radb4,
 .bradb4 {
-  border-bottom-right-radius: 4px;
-  border-bottom-right-radius: 0.25rem;
-  border-bottom-left-radius: 4px;
-  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: number-to-pixel(4);
+  border-bottom-left-radius: number-to-pixel(4);
   border-style: solid;
 }
 
 .rad5,
 .brad5 {
-  border-radius: 5px;
-  border-radius: 0.3125rem;
+  border-radius: number-to-pixel(5);
 }
 
 .radt5,
 .bradt5 {
-  border-top-left-radius: 5px;
-  border-top-left-radius: 0.3125rem;
-  border-top-right-radius: 5px;
-  border-top-right-radius: 0.3125rem;
+  border-top-left-radius: number-to-pixel(5);
+  border-top-right-radius: number-to-pixel(5);
   border-style: solid;
 }
 
 .radl5,
 .bradl5 {
-  border-top-left-radius: 5px;
-  border-top-left-radius: 0.3125rem;
-  border-bottom-left-radius: 5px;
-  border-bottom-left-radius: 0.3125rem;
+  border-top-left-radius: number-to-pixel(5);
+  border-bottom-left-radius: number-to-pixel(5);
   border-style: solid;
 }
 
 .radt5,
 .bradt5 {
-  border-top-right-radius: 5px;
-  border-top-right-radius: 0.3125rem;
-  border-bottom-right-radius: 5px;
-  border-bottom-right-radius: 0.3125rem;
+  border-top-right-radius: number-to-pixel(5);
+  border-bottom-right-radius: number-to-pixel(5);
   border-style: solid;
 }
 
 .radb5,
 .bradb5 {
-  border-bottom-right-radius: 5px;
-  border-bottom-right-radius: 0.3125rem;
-  border-bottom-left-radius: 5px;
-  border-bottom-left-radius: 0.3125rem;
+  border-bottom-right-radius: number-to-pixel(5);
+  border-bottom-left-radius: number-to-pixel(5);
   border-style: solid;
 }
 
 .rad6,
 .brad6 {
-  border-radius: 6px;
-  border-radius: 0.375rem;
+  border-radius: number-to-pixel(6);
 }
 
 .radt6,
 .bradt6 {
-  border-top-left-radius: 6px;
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 6px;
-  border-top-right-radius: 0.375rem;
+  border-top-left-radius: number-to-pixel(6);
+  border-top-right-radius: number-to-pixel(6);
   border-style: solid;
 }
 
 .radl6,
 .bradl6 {
-  border-top-left-radius: 6px;
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 6px;
-  border-bottom-left-radius: 0.375rem;
+  border-top-left-radius: number-to-pixel(6);
+  border-bottom-left-radius: number-to-pixel(6);
   border-style: solid;
 }
 
 .radt6,
 .bradt6 {
-  border-top-right-radius: 6px;
-  border-top-right-radius: 0.375rem;
-  border-bottom-right-radius: 6px;
-  border-bottom-right-radius: 0.375rem;
+  border-top-right-radius: number-to-pixel(6);
+  border-bottom-right-radius: number-to-pixel(6);
   border-style: solid;
 }
 
 .radb6,
 .bradb6 {
-  border-bottom-right-radius: 6px;
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 6px;
-  border-bottom-left-radius: 0.375rem;
+  border-bottom-right-radius: number-to-pixel(6);
+  border-bottom-left-radius: number-to-pixel(6);
   border-style: solid;
 }
 
 .rad7,
 .brad7 {
-  border-radius: 7px;
-  border-radius: 0.4375rem;
+  border-radius: number-to-pixel(7);
 }
 
 .radt7,
 .bradt7 {
-  border-top-left-radius: 7px;
-  border-top-left-radius: 0.4375rem;
-  border-top-right-radius: 7px;
-  border-top-right-radius: 0.4375rem;
+  border-top-left-radius: number-to-pixel(7);
+  border-top-right-radius: number-to-pixel(7);
   border-style: solid;
 }
 
 .radl7,
 .bradl7 {
-  border-top-left-radius: 7px;
-  border-top-left-radius: 0.4375rem;
-  border-bottom-left-radius: 7px;
-  border-bottom-left-radius: 0.4375rem;
+  border-top-left-radius: number-to-pixel(7);
+  border-bottom-left-radius: number-to-pixel(7);
   border-style: solid;
 }
 
 .radt7,
 .bradt7 {
-  border-top-right-radius: 7px;
-  border-top-right-radius: 0.4375rem;
-  border-bottom-right-radius: 7px;
-  border-bottom-right-radius: 0.4375rem;
+  border-top-right-radius: number-to-pixel(7);
+  border-bottom-right-radius: number-to-pixel(7);
   border-style: solid;
 }
 
 .radb7,
 .bradb7 {
-  border-bottom-right-radius: 7px;
-  border-bottom-right-radius: 0.4375rem;
-  border-bottom-left-radius: 7px;
-  border-bottom-left-radius: 0.4375rem;
+  border-bottom-right-radius: number-to-pixel(7);
+  border-bottom-left-radius: number-to-pixel(7);
   border-style: solid;
 }
 
 .rad8,
 .brad8 {
-  border-radius: 8px;
-  border-radius: 0.5rem;
+  border-radius: number-to-pixel(8);
 }
 
 .radt8,
 .bradt8 {
-  border-top-left-radius: 8px;
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 8px;
-  border-top-right-radius: 0.5rem;
+  border-top-left-radius: number-to-pixel(8);
+  border-top-right-radius: number-to-pixel(8);
   border-style: solid;
 }
 
 .radl8,
 .bradl8 {
-  border-top-left-radius: 8px;
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 8px;
-  border-bottom-left-radius: 0.5rem;
+  border-top-left-radius: number-to-pixel(8);
+  border-bottom-left-radius: number-to-pixel(8);
   border-style: solid;
 }
 
 .radt8,
 .bradt8 {
-  border-top-right-radius: 8px;
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 8px;
-  border-bottom-right-radius: 0.5rem;
+  border-top-right-radius: number-to-pixel(8);
+  border-bottom-right-radius: number-to-pixel(8);
   border-style: solid;
 }
 
 .radb8,
 .bradb8 {
-  border-bottom-right-radius: 8px;
-  border-bottom-right-radius: 0.5rem;
-  border-bottom-left-radius: 8px;
-  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: number-to-pixel(8);
+  border-bottom-left-radius: number-to-pixel(8);
   border-style: solid;
 }
 
 .rad10,
 .brad10 {
-  border-radius: 10px;
-  border-radius: 0.625rem;
+  border-radius: number-to-pixel(10);
 }
 
 .radt10,
 .bradt10 {
-  border-top-left-radius: 10px;
-  border-top-left-radius: 0.625rem;
-  border-top-right-radius: 10px;
-  border-top-right-radius: 0.625rem;
+  border-top-left-radius: number-to-pixel(10);
+  border-top-right-radius: number-to-pixel(10);
   border-style: solid;
 }
 
 .radl10,
 .bradl10 {
-  border-top-left-radius: 10px;
-  border-top-left-radius: 0.625rem;
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: 0.625rem;
+  border-top-left-radius: number-to-pixel(10);
+  border-bottom-left-radius: number-to-pixel(10);
   border-style: solid;
 }
 
 .radt10,
 .bradt10 {
-  border-top-right-radius: 10px;
-  border-top-right-radius: 0.625rem;
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: 0.625rem;
+  border-top-right-radius: number-to-pixel(10);
+  border-bottom-right-radius: number-to-pixel(10);
   border-style: solid;
 }
 
 .radb10,
 .bradb10 {
-  border-bottom-right-radius: 10px;
-  border-bottom-right-radius: 0.625rem;
-  border-bottom-left-radius: 10px;
-  border-bottom-left-radius: 0.625rem;
+  border-bottom-right-radius: number-to-pixel(10);
+  border-bottom-left-radius: number-to-pixel(10);
   border-style: solid;
 }
 
 .rad12,
 .brad12 {
-  border-radius: 12px;
-  border-radius: 0.75rem;
+  border-radius: number-to-pixel(12);
 }
 
 .radt12,
 .bradt12 {
-  border-top-left-radius: 12px;
-  border-top-left-radius: 0.75rem;
-  border-top-right-radius: 12px;
-  border-top-right-radius: 0.75rem;
+  border-top-left-radius: number-to-pixel(12);
+  border-top-right-radius: number-to-pixel(12);
   border-style: solid;
 }
 
 .radl12,
 .bradl12 {
-  border-top-left-radius: 12px;
-  border-top-left-radius: 0.75rem;
-  border-bottom-left-radius: 12px;
-  border-bottom-left-radius: 0.75rem;
+  border-top-left-radius: number-to-pixel(12);
+  border-bottom-left-radius: number-to-pixel(12);
   border-style: solid;
 }
 
 .radt12,
 .bradt12 {
-  border-top-right-radius: 12px;
-  border-top-right-radius: 0.75rem;
-  border-bottom-right-radius: 12px;
-  border-bottom-right-radius: 0.75rem;
+  border-top-right-radius: number-to-pixel(12);
+  border-bottom-right-radius: number-to-pixel(12);
   border-style: solid;
 }
 
 .radb12,
 .bradb12 {
-  border-bottom-right-radius: 12px;
-  border-bottom-right-radius: 0.75rem;
-  border-bottom-left-radius: 12px;
-  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: number-to-pixel(12);
+  border-bottom-left-radius: number-to-pixel(12);
   border-style: solid;
 }
 
 .rad24,
 .brad24 {
-  border-radius: 24px;
-  border-radius: 1.5rem;
+  border-radius: number-to-pixel(24);
 }
 
 .radt24,
 .bradt24 {
-  border-top-left-radius: 24px;
-  border-top-left-radius: 1.5rem;
-  border-top-right-radius: 24px;
-  border-top-right-radius: 1.5rem;
+  border-top-left-radius: number-to-pixel(24);
+  border-top-right-radius: number-to-pixel(24);
   border-style: solid;
 }
 
 .radl24,
 .bradl24 {
-  border-top-left-radius: 24px;
-  border-top-left-radius: 1.5rem;
-  border-bottom-left-radius: 24px;
-  border-bottom-left-radius: 1.5rem;
+  border-top-left-radius: number-to-pixel(24);
+  border-bottom-left-radius: number-to-pixel(24);
   border-style: solid;
 }
 
 .radt24,
 .bradt24 {
-  border-top-right-radius: 24px;
-  border-top-right-radius: 1.5rem;
-  border-bottom-right-radius: 24px;
-  border-bottom-right-radius: 1.5rem;
+  border-top-right-radius: number-to-pixel(24);
+  border-bottom-right-radius: number-to-pixel(24);
   border-style: solid;
 }
 
 .radb24,
 .bradb24 {
-  border-bottom-right-radius: 24px;
-  border-bottom-right-radius: 1.5rem;
-  border-bottom-left-radius: 24px;
-  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: number-to-pixel(24);
+  border-bottom-left-radius: number-to-pixel(24);
   border-style: solid;
 }
 
@@ -1097,63 +936,51 @@ SOURCE: https://github.com/pierreburel/sass-rem
 * .fs12 -> font-size 12px converted to rem
 */
 .fs6 {
-  font-size: 6px;
-  font-size: 0.375rem;
+  font-size: number-to-pixel(6);
 }
 
 .fs7 {
-  font-size: 7px;
-  font-size: 0.4375rem;
+  font-size: number-to-pixel(7);
 }
 
 .fs8 {
-  font-size: 8px;
-  font-size: 0.5rem;
+  font-size: number-to-pixel(8);
 }
 
 .fs9 {
-  font-size: 9px;
-  font-size: 0.5625rem;
+  font-size: number-to-pixel(9);
 }
 
 .fs10 {
-  font-size: 10px;
-  font-size: 0.625rem;
+  font-size: number-to-pixel(10);
 }
 
 .fs11 {
-  font-size: 11px;
-  font-size: 0.6875rem;
+  font-size: number-to-pixel(11);
 }
 
 .fs12 {
-  font-size: 12px;
-  font-size: 0.75rem;
+  font-size: number-to-pixel(12);
 }
 
 .fs14 {
-  font-size: 14px;
-  font-size: 0.875rem;
+  font-size: number-to-pixel(14);
 }
 
 .fs24 {
-  font-size: 24px;
-  font-size: 1.5rem;
+  font-size: number-to-pixel(24);
 }
 
 .fs26 {
-  font-size: 26px;
-  font-size: 1.625rem;
+  font-size: number-to-pixel(26);
 }
 
 .fs32 {
-  font-size: 32px;
-  font-size: 2rem;
+  font-size: number-to-pixel(32);
 }
 
 .fs40 {
-  font-size: 40px;
-  font-size: 2.5rem;
+  font-size: number-to-pixel(40);
 }
 
 /**
@@ -1163,8 +990,7 @@ SOURCE: https://github.com/pierreburel/sass-rem
 * .ln12 -> line-height 12px converted to rem
 */
 .lh12 {
-  line-height: 12px;
-  line-height: 0.75rem;
+  line-height: number-to-pixel(number-to-pixel(12));
 }
 
 /**
@@ -1176,629 +1002,490 @@ SOURCE: https://github.com/pierreburel/sass-rem
 * .pr12 -> padding right 12px converted to rem
 */
 .m3 {
-  margin: 3px;
-  margin: 0.1875rem;
+  margin: number-to-pixel(3);
 }
 
 .p3 {
-  padding: 3px;
-  padding: 0.1875rem;
+  padding: number-to-pixel(3);
 }
 
 .my3 {
-  margin-top: 3px;
-  margin-top: 0.1875rem;
-  margin-bottom: 3px;
-  margin-bottom: 0.1875rem;
+  margin-top: number-to-pixel(3);
+  margin-bottom: number-to-pixel(3);
 }
 
 .py3 {
-  padding-top: 3px;
-  padding-top: 0.1875rem;
-  padding-bottom: 3px;
-  padding-bottom: 0.1875rem;
+  padding-top: number-to-pixel(3);
+  padding-bottom: number-to-pixel(3);
 }
 
 .mx3 {
-  margin-left: 3px;
-  margin-left: 0.1875rem;
-  margin-right: 3px;
-  margin-right: 0.1875rem;
+  margin-left: number-to-pixel(3);
+  margin-right: number-to-pixel(3);
 }
 
 .px3 {
-  padding-left: 3px;
-  padding-left: 0.1875rem;
-  padding-right: 3px;
-  padding-right: 0.1875rem;
+  padding-left: number-to-pixel(3);
+  padding-right: number-to-pixel(3);
 }
 
 .mt3 {
-  margin-top: 3px;
-  margin-top: 0.1875rem;
+  margin-top: number-to-pixel(3);
 }
 
 .pt3 {
-  padding-top: 3px;
-  padding-top: 0.1875rem;
+  padding-top: number-to-pixel(3);
 }
 
 .ml3 {
-  margin-left: 3px;
-  margin-left: 0.1875rem;
+  margin-left: number-to-pixel(3);
 }
 
 .pl3 {
-  padding-left: 3px;
-  padding-left: 0.1875rem;
+  padding-left: number-to-pixel(3);
 }
 
 .mr3 {
-  margin-right: 3px;
-  margin-right: 0.1875rem;
+  margin-right: number-to-pixel(3);
 }
 
 .pr3 {
-  padding-right: 3px;
-  padding-right: 0.1875rem;
+  padding-right: number-to-pixel(3);
 }
 
 .mb3 {
-  margin-bottom: 3px;
-  margin-bottom: 0.1875rem;
+  margin-bottom: number-to-pixel(3);
 }
 
 .pb3 {
-  padding-bottom: 3px;
-  padding-bottom: 0.1875rem;
+  padding-bottom: number-to-pixel(3);
 }
 
 .m6 {
-  margin: 6px;
-  margin: 0.375rem;
+  margin: number-to-pixel(6);
 }
 
 .p6 {
-  padding: 6px;
-  padding: 0.375rem;
+  padding: number-to-pixel(6);
 }
 
 .my6 {
-  margin-top: 6px;
-  margin-top: 0.375rem;
-  margin-bottom: 6px;
-  margin-bottom: 0.375rem;
+  margin-top: number-to-pixel(6);
+  margin-bottom: number-to-pixel(6);
 }
 
 .py6 {
-  padding-top: 6px;
-  padding-top: 0.375rem;
-  padding-bottom: 6px;
-  padding-bottom: 0.375rem;
+  padding-top: number-to-pixel(6);
+  padding-bottom: number-to-pixel(6);
 }
 
 .mx6 {
-  margin-left: 6px;
-  margin-left: 0.375rem;
-  margin-right: 6px;
-  margin-right: 0.375rem;
+  margin-left: number-to-pixel(6);
+  margin-right: number-to-pixel(6);
 }
 
 .px6 {
-  padding-left: 6px;
-  padding-left: 0.375rem;
-  padding-right: 6px;
-  padding-right: 0.375rem;
+  padding-left: number-to-pixel(6);
+  padding-right: number-to-pixel(6);
 }
 
 .mt6 {
-  margin-top: 6px;
-  margin-top: 0.375rem;
+  margin-top: number-to-pixel(6);
 }
 
 .pt6 {
-  padding-top: 6px;
-  padding-top: 0.375rem;
+  padding-top: number-to-pixel(6);
 }
 
 .ml6 {
-  margin-left: 6px;
-  margin-left: 0.375rem;
+  margin-left: number-to-pixel(6);
 }
 
 .pl6 {
-  padding-left: 6px;
-  padding-left: 0.375rem;
+  padding-left: number-to-pixel(6);
 }
 
 .mr6 {
-  margin-right: 6px;
-  margin-right: 0.375rem;
+  margin-right: number-to-pixel(6);
 }
 
 .pr6 {
-  padding-right: 6px;
-  padding-right: 0.375rem;
+  padding-right: number-to-pixel(6);
 }
 
 .mb6 {
-  margin-bottom: 6px;
-  margin-bottom: 0.375rem;
+  margin-bottom: number-to-pixel(6);
 }
 
 .pb6 {
-  padding-bottom: 6px;
-  padding-bottom: 0.375rem;
+  padding-bottom: number-to-pixel(6);
 }
 
 .m9 {
-  margin: 9px;
-  margin: 0.5625rem;
+  margin: number-to-pixel(9);
 }
 
 .p9 {
-  padding: 9px;
-  padding: 0.5625rem;
+  padding: number-to-pixel(9);
 }
 
 .my9 {
-  margin-top: 9px;
-  margin-top: 0.5625rem;
-  margin-bottom: 9px;
-  margin-bottom: 0.5625rem;
+  margin-top: number-to-pixel(9);
+  margin-bottom: number-to-pixel(9);
 }
 
 .py9 {
-  padding-top: 9px;
-  padding-top: 0.5625rem;
-  padding-bottom: 9px;
-  padding-bottom: 0.5625rem;
+  padding-top: number-to-pixel(9);
+  padding-bottom: number-to-pixel(9);
 }
 
 .mx9 {
-  margin-left: 9px;
-  margin-left: 0.5625rem;
-  margin-right: 9px;
-  margin-right: 0.5625rem;
+  margin-left: number-to-pixel(9);
+  margin-right: number-to-pixel(9);
 }
 
 .px9 {
-  padding-left: 9px;
-  padding-left: 0.5625rem;
-  padding-right: 9px;
-  padding-right: 0.5625rem;
+  padding-left: number-to-pixel(9);
+  padding-right: number-to-pixel(9);
 }
 
 .mt9 {
-  margin-top: 9px;
-  margin-top: 0.5625rem;
+  margin-top: number-to-pixel(9);
 }
 
 .pt9 {
-  padding-top: 9px;
-  padding-top: 0.5625rem;
+  padding-top: number-to-pixel(9);
 }
 
 .ml9 {
-  margin-left: 9px;
-  margin-left: 0.5625rem;
+  margin-left: number-to-pixel(9);
 }
 
 .pl9 {
-  padding-left: 9px;
-  padding-left: 0.5625rem;
+  padding-left: number-to-pixel(9);
 }
 
 .mr9 {
-  margin-right: 9px;
-  margin-right: 0.5625rem;
+  margin-right: number-to-pixel(9);
 }
 
 .pr9 {
-  padding-right: 9px;
-  padding-right: 0.5625rem;
+  padding-right: number-to-pixel(9);
 }
 
 .mb9 {
-  margin-bottom: 9px;
-  margin-bottom: 0.5625rem;
+  margin-bottom: number-to-pixel(9);
 }
 
 .pb9 {
-  padding-bottom: 9px;
-  padding-bottom: 0.5625rem;
+  padding-bottom: number-to-pixel(9);
 }
 
 .m12 {
-  margin: 12px;
-  margin: 0.75rem;
+  margin: number-to-pixel(12);
 }
 
 .p12 {
-  padding: 12px;
-  padding: 0.75rem;
+  padding: number-to-pixel(12);
 }
 
 .my12 {
-  margin-top: 12px;
-  margin-top: 0.75rem;
-  margin-bottom: 12px;
-  margin-bottom: 0.75rem;
+  margin-top: number-to-pixel(12);
+  margin-bottom: number-to-pixel(12);
 }
 
 .py12 {
-  padding-top: 12px;
-  padding-top: 0.75rem;
-  padding-bottom: 12px;
-  padding-bottom: 0.75rem;
+  padding-top: number-to-pixel(12);
+  padding-bottom: number-to-pixel(12);
 }
 
 .mx12 {
-  margin-left: 12px;
-  margin-left: 0.75rem;
-  margin-right: 12px;
-  margin-right: 0.75rem;
+  margin-left: number-to-pixel(12);
+  margin-right: number-to-pixel(12);
 }
 
 .px12 {
-  padding-left: 12px;
-  padding-left: 0.75rem;
-  padding-right: 12px;
-  padding-right: 0.75rem;
+  padding-left: number-to-pixel(12);
+  padding-right: number-to-pixel(12);
 }
 
 .mt12 {
-  margin-top: 12px;
-  margin-top: 0.75rem;
+  margin-top: number-to-pixel(12);
 }
 
 .pt12 {
-  padding-top: 12px;
-  padding-top: 0.75rem;
+  padding-top: number-to-pixel(12);
 }
 
 .ml12 {
-  margin-left: 12px;
-  margin-left: 0.75rem;
+  margin-left: number-to-pixel(12);
 }
 
 .pl12 {
-  padding-left: 12px;
-  padding-left: 0.75rem;
+  padding-left: number-to-pixel(12);
 }
 
 .mr12 {
-  margin-right: 12px;
-  margin-right: 0.75rem;
+  margin-right: number-to-pixel(12);
 }
 
 .pr12 {
-  padding-right: 12px;
-  padding-right: 0.75rem;
+  padding-right: number-to-pixel(12);
 }
 
 .mb12 {
-  margin-bottom: 12px;
-  margin-bottom: 0.75rem;
+  margin-bottom: number-to-pixel(12);
 }
 
 .pb12 {
-  padding-bottom: 12px;
-  padding-bottom: 0.75rem;
+  padding-bottom: number-to-pixel(12);
 }
 
 .m18 {
-  margin: 18px;
-  margin: 1.125rem;
+  margin: number-to-pixel(18);
 }
 
 .p18 {
-  padding: 18px;
-  padding: 1.125rem;
+  padding: number-to-pixel(18);
 }
 
 .my18 {
-  margin-top: 18px;
-  margin-top: 1.125rem;
-  margin-bottom: 18px;
-  margin-bottom: 1.125rem;
+  margin-top: number-to-pixel(18);
+  margin-bottom: number-to-pixel(18);
 }
 
 .py18 {
-  padding-top: 18px;
-  padding-top: 1.125rem;
-  padding-bottom: 18px;
-  padding-bottom: 1.125rem;
+  padding-top: number-to-pixel(18);
+  padding-bottom: number-to-pixel(18);
 }
 
 .mx18 {
-  margin-left: 18px;
-  margin-left: 1.125rem;
-  margin-right: 18px;
-  margin-right: 1.125rem;
+  margin-left: number-to-pixel(18);
+  margin-right: number-to-pixel(18);
 }
 
 .px18 {
-  padding-left: 18px;
-  padding-left: 1.125rem;
-  padding-right: 18px;
-  padding-right: 1.125rem;
+  padding-left: number-to-pixel(18);
+  padding-right: number-to-pixel(18);
 }
 
 .mt18 {
-  margin-top: 18px;
-  margin-top: 1.125rem;
+  margin-top: number-to-pixel(18);
 }
 
 .pt18 {
-  padding-top: 18px;
-  padding-top: 1.125rem;
+  padding-top: number-to-pixel(18);
 }
 
 .ml18 {
-  margin-left: 18px;
-  margin-left: 1.125rem;
+  margin-left: number-to-pixel(18);
 }
 
 .pl18 {
-  padding-left: 18px;
-  padding-left: 1.125rem;
+  padding-left: number-to-pixel(18);
 }
 
 .mr18 {
-  margin-right: 18px;
-  margin-right: 1.125rem;
+  margin-right: number-to-pixel(18);
 }
 
 .pr18 {
-  padding-right: 18px;
-  padding-right: 1.125rem;
+  padding-right: number-to-pixel(18);
 }
 
 .mb18 {
-  margin-bottom: 18px;
-  margin-bottom: 1.125rem;
+  margin-bottom: number-to-pixel(18);
 }
 
 .pb18 {
-  padding-bottom: 18px;
-  padding-bottom: 1.125rem;
+  padding-bottom: number-to-pixel(18);
 }
 
 .m24 {
-  margin: 24px;
-  margin: 1.5rem;
+  margin: number-to-pixel(24);
 }
 
 .p24 {
-  padding: 24px;
-  padding: 1.5rem;
+  padding: number-to-pixel(24);
 }
 
 .my24 {
-  margin-top: 24px;
-  margin-top: 1.5rem;
-  margin-bottom: 24px;
-  margin-bottom: 1.5rem;
+  margin-top: number-to-pixel(24);
+  margin-bottom: number-to-pixel(24);
 }
 
 .py24 {
-  padding-top: 24px;
-  padding-top: 1.5rem;
-  padding-bottom: 24px;
-  padding-bottom: 1.5rem;
+  padding-top: number-to-pixel(24);
+  padding-bottom: number-to-pixel(24);
 }
 
 .mx24 {
-  margin-left: 24px;
-  margin-left: 1.5rem;
-  margin-right: 24px;
-  margin-right: 1.5rem;
+  margin-left: number-to-pixel(24);
+  margin-right: number-to-pixel(24);
 }
 
 .px24 {
-  padding-left: 24px;
-  padding-left: 1.5rem;
-  padding-right: 24px;
-  padding-right: 1.5rem;
+  padding-left: number-to-pixel(24);
+  padding-right: number-to-pixel(24);
 }
 
 .mt24 {
-  margin-top: 24px;
-  margin-top: 1.5rem;
+  margin-top: number-to-pixel(24);
 }
 
 .pt24 {
-  padding-top: 24px;
-  padding-top: 1.5rem;
+  padding-top: number-to-pixel(24);
 }
 
 .ml24 {
-  margin-left: 24px;
-  margin-left: 1.5rem;
+  margin-left: number-to-pixel(24);
 }
 
 .pl24 {
-  padding-left: 24px;
-  padding-left: 1.5rem;
+  padding-left: number-to-pixel(24);
 }
 
 .mr24 {
-  margin-right: 24px;
-  margin-right: 1.5rem;
+  margin-right: number-to-pixel(24);
 }
 
 .pr24 {
-  padding-right: 24px;
-  padding-right: 1.5rem;
+  padding-right: number-to-pixel(24);
 }
 
 .mb24 {
-  margin-bottom: 24px;
-  margin-bottom: 1.5rem;
+  margin-bottom: number-to-pixel(24);
 }
 
 .pb24 {
-  padding-bottom: 24px;
-  padding-bottom: 1.5rem;
+  padding-bottom: number-to-pixel(24);
 }
 
 .m26 {
-  margin: 26px;
-  margin: 1.625rem;
+  margin: number-to-pixel(26);
 }
 
 .p26 {
-  padding: 26px;
-  padding: 1.625rem;
+  padding: number-to-pixel(26);
 }
 
 .my26 {
-  margin-top: 26px;
-  margin-top: 1.625rem;
-  margin-bottom: 26px;
-  margin-bottom: 1.625rem;
+  margin-top: number-to-pixel(26);
+  margin-bottom: number-to-pixel(26);
 }
 
 .py26 {
-  padding-top: 26px;
-  padding-top: 1.625rem;
-  padding-bottom: 26px;
-  padding-bottom: 1.625rem;
+  padding-top: number-to-pixel(26);
+  padding-bottom: number-to-pixel(26);
 }
 
 .mx26 {
-  margin-left: 26px;
-  margin-left: 1.625rem;
-  margin-right: 26px;
-  margin-right: 1.625rem;
+  margin-left: number-to-pixel(26);
+  margin-right: number-to-pixel(26);
 }
 
 .px26 {
-  padding-left: 26px;
-  padding-left: 1.625rem;
-  padding-right: 26px;
-  padding-right: 1.625rem;
+  padding-left: number-to-pixel(26);
+  padding-right: number-to-pixel(26);
 }
 
 .mt26 {
-  margin-top: 26px;
-  margin-top: 1.625rem;
+  margin-top: number-to-pixel(26);
 }
 
 .pt26 {
-  padding-top: 26px;
-  padding-top: 1.625rem;
+  padding-top: number-to-pixel(26);
 }
 
 .ml26 {
-  margin-left: 26px;
-  margin-left: 1.625rem;
+  margin-left: number-to-pixel(26);
 }
 
 .pl26 {
-  padding-left: 26px;
-  padding-left: 1.625rem;
+  padding-left: number-to-pixel(26);
 }
 
 .mr26 {
-  margin-right: 26px;
-  margin-right: 1.625rem;
+  margin-right: number-to-pixel(26);
 }
 
 .pr26 {
-  padding-right: 26px;
-  padding-right: 1.625rem;
+  padding-right: number-to-pixel(26);
 }
 
 .mb26 {
-  margin-bottom: 26px;
-  margin-bottom: 1.625rem;
+  margin-bottom: number-to-pixel(26);
 }
 
 .pb26 {
-  padding-bottom: 26px;
-  padding-bottom: 1.625rem;
+  padding-bottom: number-to-pixel(26);
 }
 
 .m48 {
-  margin: 48px;
-  margin: 3rem;
+  margin: number-to-pixel(48);
 }
 
 .p48 {
-  padding: 48px;
-  padding: 3rem;
+  padding: number-to-pixel(48);
 }
 
 .my48 {
-  margin-top: 48px;
-  margin-top: 3rem;
-  margin-bottom: 48px;
-  margin-bottom: 3rem;
+  margin-top: number-to-pixel(48);
+  margin-bottom: number-to-pixel(48);
 }
 
 .py48 {
-  padding-top: 48px;
-  padding-top: 3rem;
-  padding-bottom: 48px;
-  padding-bottom: 3rem;
+  padding-top: number-to-pixel(48);
+  padding-bottom: number-to-pixel(48);
 }
 
 .mx48 {
-  margin-left: 48px;
-  margin-left: 3rem;
-  margin-right: 48px;
-  margin-right: 3rem;
+  margin-left: number-to-pixel(48);
+  margin-right: number-to-pixel(48);
 }
 
 .px48 {
-  padding-left: 48px;
-  padding-left: 3rem;
-  padding-right: 48px;
-  padding-right: 3rem;
+  padding-left: number-to-pixel(48);
+  padding-right: number-to-pixel(48);
 }
 
 .mt48 {
-  margin-top: 48px;
-  margin-top: 3rem;
+  margin-top: number-to-pixel(48);
 }
 
 .pt48 {
-  padding-top: 48px;
-  padding-top: 3rem;
+  padding-top: number-to-pixel(48);
 }
 
 .ml48 {
-  margin-left: 48px;
-  margin-left: 3rem;
+  margin-left: number-to-pixel(48);
 }
 
 .pl48 {
-  padding-left: 48px;
-  padding-left: 3rem;
+  padding-left: number-to-pixel(48);
 }
 
 .mr48 {
-  margin-right: 48px;
-  margin-right: 3rem;
+  margin-right: number-to-pixel(48);
 }
 
 .pr48 {
-  padding-right: 48px;
-  padding-right: 3rem;
+  padding-right: number-to-pixel(48);
 }
 
 .mb48 {
-  margin-bottom: 48px;
-  margin-bottom: 3rem;
+  margin-bottom: number-to-pixel(48);
 }
 
 .pb48 {
-  padding-bottom: 48px;
-  padding-bottom: 3rem;
+  padding-bottom: number-to-pixel(48);
 }
 
+/**
+ *
+ * !!! DO NOT REORDER -> Declarative loading
+ *
+ */
 .is-black {
   color: #000000;
 }
@@ -2364,414 +2051,236 @@ a:active:not(.is-underline) {
   text-decoration: none;
 }
 */
-/* -------------------------------------------------
-
- NEGATES
-
-------------------------------------------------- */
-.no-events {
-  pointer-events: none;
+::-webkit-search-decoration {
+  display: none;
 }
 
-.no-no-events {
-  pointer-events: none !important;
+::-webkit-file-upload-button {
+  background: none;
+  border: 0;
+  padding: 0;
 }
 
-.no-flex-grow {
-  flex: 0 1;
+::placeholder {
+  font-style: italic;
 }
 
-.no-no-flex-grow {
-  flex: 0 1 !important;
+:disabled {
+  cursor: default;
 }
 
-.no-flex-shrink {
-  flex: 1 0;
+.no-click,
+.not-allowed {
+  cursor: not-allowed;
 }
 
-.no-no-flex-shrink {
-  flex: 1 0 !important;
+input,
+label,
+select,
+button,
+textarea {
+  background: none;
+  border: 0;
+  display: inline-block;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  white-space: normal;
 }
 
-.no-float {
-  float: none;
+input,
+select,
+textarea {
+  box-sizing: border-box;
 }
 
-.no-no-float {
-  float: none !important;
+input[type=radio],
+input[type=checkbox] {
+  cursor: pointer;
+  height: 1.1rem;
+  width: 1.1rem;
 }
 
-.no-flex {
-  flex: none;
+input[type=search] {
+  -webkit-appearance: textfield;
+  -webkit-box-sizing: content-box;
 }
 
-.no-no-flex {
-  flex: none !important;
+button,
+input[type=reset],
+input[type=button],
+input[type=submit] {
+  overflow: visible;
+  width: auto;
 }
 
-.no-margin {
-  margin: 0;
+textarea {
+  line-height: 1.2em;
+  min-height: 2.4rem;
+  overflow: auto;
+  resize: vertical;
+  vertical-align: top;
 }
 
-.no-no-margin {
-  margin: 0 !important;
+select[multiple] {
+  vertical-align: top;
 }
 
-.no-padding {
+fieldset {
+  border: 0;
+  display: block;
+  margin: 0;
   padding: 0;
+  width: 100%;
 }
 
-.no-no-padding {
-  padding: 0 !important;
+h1 {
+  font-size: 2.8rem;
+  line-height: 1.1;
 }
 
-.no-border {
-  border: 0;
+h2 {
+  font-size: 2.2rem;
+  line-height: 1.1;
 }
 
-.no-no-border {
-  border: 0 !important;
+h3 {
+  font-size: 1.6rem;
+  line-height: 1.1;
 }
 
-.no-radius {
-  border-radius: 0;
+h4 {
+  font-size: 1.4rem;
+  line-height: 1.1;
 }
 
-.no-no-radius {
-  border-radius: 0 !important;
+h5 {
+  font-size: 1.2rem;
+  line-height: 1.1;
 }
 
-.no-background {
-  background-color: transparent;
+h6 {
+  font-size: 1.1rem;
+  line-height: 1.1;
 }
 
-.no-no-background {
-  background: none !important;
+table {
+  font-size: 12px;
+  border-collapse: collapse;
+  border-spacing: 0;
+  max-width: 100%;
+  min-width: 100%;
+  overflow: scroll;
+  text-align: left;
+  width: 100%;
 }
 
-.no-outline {
-  outline: none;
+table th {
+  font-weight: bold;
 }
 
-.no-no-outline {
-  outline: none !important;
+table th,
+table td {
+  padding: 12px 15px;
+  display: table-cell;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.no-pointer {
-  cursor: default;
+table th:last-child,
+table td:last-child {
+  border-right: 0;
 }
 
-.no-no-pointer {
-  cursor: default !important;
+table caption {
+  caption-side: top;
 }
 
-.no-select {
-  user-select: none;
+a:link, a:visited, a:active {
+  text-decoration: none;
 }
-
-.no-no-select {
-  user-select: none !important;
+a:hover {
+  text-decoration: underline;
 }
 
-.no-underline,
-a.no-underline,
-a.no-underline:hover,
-a.no-underline:active,
-a.no-underline:visited {
-  text-decoration: none;
+.flex-0 {
+  flex: 0;
 }
 
-.no-no-underline,
-a.no-no-underline,
-a.no-no-underline:hover,
-a.no-no-underline:active,
-a.no-no-underline:visited {
-  text-decoration: none !important;
+.flex-1, .rows .row-100,
+.rows .row-80,
+.rows .row-75,
+.rows .row-66,
+.rows .row-50,
+.rows .row-40,
+.rows .row-33,
+.rows .row-25,
+.rows .row-20,
+.rows .row-1of1,
+.rows .row-2of2,
+.rows .row-3of3,
+.rows .row-4of4,
+.rows .row-5of5,
+.rows .row-4of5,
+.rows .row-3of4,
+.rows .row-2of3, .rows .row-60,
+.rows .row-3of5,
+.rows .row-1of2,
+.rows .row-2of4,
+.rows .row-2of5,
+.rows .row-1of3,
+.rows .row-1of4,
+.rows .row-1of5, .rows .row-0, .columns .col-100,
+.columns .col-80,
+.columns .col-75,
+.columns .col-66,
+.columns .col-50,
+.columns .col-40,
+.columns .col-33,
+.columns .col-25,
+.columns .col-20,
+.columns .col-1of1,
+.columns .col-2of2,
+.columns .col-3of3,
+.columns .col-4of4,
+.columns .col-5of5,
+.columns .col-4of5,
+.columns .col-3of4,
+.columns .col-2of3, .columns .col-60,
+.columns .col-3of5,
+.columns .col-1of2,
+.columns .col-2of4,
+.columns .col-2of5,
+.columns .col-1of3,
+.columns .col-1of4,
+.columns .col-1of5, .columns .col-0 {
+  flex: 1;
 }
 
-.no-scroll,
-.no-overflow {
-  overflow: hidden;
+.flex-2 {
+  flex: 2;
 }
 
-.no-no-overflow,
-.no-no-scroll {
-  overflow: hidden !important;
+.flex-3 {
+  flex: 3;
 }
 
-.no-scroll-x {
-  overflow-x: hidden;
+.flex-4 {
+  flex: 4;
 }
 
-.no-no-scroll-x {
-  overflow-x: hidden !important;
+.flex-5 {
+  flex: 5;
 }
 
-.no-scroll-y {
-  overflow-y: hidden;
+.flex-6 {
+  flex: 6;
 }
 
-.no-no-scroll-y {
-  overflow-y: hidden !important;
-}
-
-.nowrap,
-.no-wrap,
-.text-overflow,
-.text-ellipsis {
-  white-space: nowrap;
-}
-
-.no-nowrap,
-.no-no-wrap {
-  white-space: nowrap !important;
-}
-
-.no-margin-padding {
-  margin: 0;
-  padding: 0;
-}
-
-.is-circle {
-  border-radius: 50%;
-}
-
-.v-align-top {
-  vertical-align: top;
-}
-
-.v-align-middle {
-  vertical-align: middle;
-}
-
-.v-align-bottom {
-  vertical-align: bottom;
-}
-
-/* --------------------------------------------
-
- TYPES
-
--------------------------------------------- */
-.is-flex {
-  display: flex;
-}
-
-.is-block {
-  display: block;
-}
-
-.is-inline {
-  display: inline;
-}
-
-.is-inflex,
-.is-inline-flex {
-  display: inline-flex;
-}
-
-.is-inblock,
-.is-inline-block {
-  display: inline-block;
-}
-
-/* --------------------------------------------
-
- POSITIONING
-
--------------------------------------------- */
-.is-relative, .is-scrollbox-wrapper {
-  position: relative;
-}
-
-.is-absolute, .is-scrollbox, .is-scrollbox-x, .is-scrollbox-y, .is-overlay {
-  position: absolute;
-}
-
-.is-fixed, .is-popin,
-.is-popup,
-.is-fixed-overlay {
-  position: fixed;
-}
-
-.is-sticky {
-  position: sticky;
-}
-
-/* --------------------------------------------
-
- ABSOLUTE PLACEMENTS
-
--------------------------------------------- */
-.is-zero-abs, .is-overlay, .is-popin,
-.is-popup,
-.is-fixed-overlay,
-.is-trbl {
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-}
-
-.is-top-left-abs,
-.is-top-left {
-  left: 0;
-  top: 0;
-}
-
-.is-top-right-abs,
-.is-top-right {
-  right: 0;
-  top: 0;
-}
-
-.is-bottom-right-abs,
-.is-bottom-right {
-  bottom: 0;
-  right: 0;
-}
-
-.is-bottom-left-abs,
-.is-bottom-left {
-  bottom: 0;
-  left: 0;
-}
-
-.is-top-to-bottom-abs,
-.is-top-to-bottom,
-.is-popin,
-.is-popup,
-.is-fixed-overlay {
-  bottom: 0;
-  top: 0;
-}
-
-.is-left-to-right-abs,
-.is-left-to-right {
-  left: 0;
-  right: 0;
-}
-
-/* --------------------------------------------
-
- SIZES
-
--------------------------------------------- */
-.is-full-width, .is-full-layout, .is-scrollbox, .is-scrollbox-x, .is-scrollbox-y {
-  max-width: 100%;
-  min-width: 100%;
-  width: 100%;
-}
-
-.is-full-height, .is-full-layout, .is-scrollbox, .is-scrollbox-x, .is-scrollbox-y {
-  height: 100%;
-  max-height: 100%;
-  min-height: 100%;
-}
-
-.is-hidden, .hide::after, .hide::before, .hide {
-  display: none;
-  visibility: hidden;
-}
-
-.is-visible {
-  display: inherit;
-  visibility: inherit;
-}
-
-.hide {
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  max-height: 0;
-  max-width: 0;
-  min-height: 0;
-  min-width: 0;
-  width: 0;
-}
-.hide::before {
-  content: none;
-}
-.hide::after {
-  content: none;
-}
-
-.flex-0 {
-  flex: 0;
-}
-
-.flex-1, .rows .row-0,
-.rows .row-1of5,
-.rows .row-1of4,
-.rows .row-1of3,
-.rows .row-2of5,
-.rows .row-1of2,
-.rows .row-2of4, .rows .row-60,
-.rows .row-3of5,
-.rows .row-2of3,
-.rows .row-3of4,
-.rows .row-4of5, .rows .row-100,
-.rows .row-80,
-.rows .row-75,
-.rows .row-66,
-.rows .row-50,
-.rows .row-40,
-.rows .row-33,
-.rows .row-25,
-.rows .row-20,
-.rows .row-1of1,
-.rows .row-2of2,
-.rows .row-3of3,
-.rows .row-4of4,
-.rows .row-5of5, .columns .col-0,
-.columns .col-1of5,
-.columns .col-1of4,
-.columns .col-1of3,
-.columns .col-2of5,
-.columns .col-1of2,
-.columns .col-2of4, .columns .col-60,
-.columns .col-3of5,
-.columns .col-2of3,
-.columns .col-3of4,
-.columns .col-4of5, .columns .col-100,
-.columns .col-80,
-.columns .col-75,
-.columns .col-66,
-.columns .col-50,
-.columns .col-40,
-.columns .col-33,
-.columns .col-25,
-.columns .col-20,
-.columns .col-1of1,
-.columns .col-2of2,
-.columns .col-3of3,
-.columns .col-4of4,
-.columns .col-5of5 {
-  flex: 1;
-}
-
-.flex-2 {
-  flex: 2;
-}
-
-.flex-3 {
-  flex: 3;
-}
-
-.flex-4 {
-  flex: 4;
-}
-
-.flex-5 {
-  flex: 5;
-}
-
-.flex-6 {
-  flex: 6;
-}
-
-.flex-7 {
-  flex: 7;
+.flex-7 {
+  flex: 7;
 }
 
 .flex-8 {
@@ -2878,615 +2387,793 @@ a.no-no-underline:visited {
   align-self: center;
 }
 
-.clearfix {
-  *zoom: 1;
-}
-.clearfix::after, .clearfix::before {
-  content: ".";
-  display: block;
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  overflow: hidden;
-  visibility: hidden;
-  width: 0;
-}
-.clearfix::after {
-  clear: both;
+.columns .col-100,
+.columns .col-80,
+.columns .col-75,
+.columns .col-66,
+.columns .col-50,
+.columns .col-40,
+.columns .col-33,
+.columns .col-25,
+.columns .col-20,
+.columns .col-1of1,
+.columns .col-2of2,
+.columns .col-3of3,
+.columns .col-4of4,
+.columns .col-5of5 {
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
 }
 
-.clear {
-  clear: both;
+.columns .col-80,
+.columns .col-4of5 {
+  max-width: 78.5%;
+  min-width: 78.5%;
+  width: 78.5%;
 }
 
-.clear-right {
-  clear: right;
+.columns .col-75,
+.columns .col-3of4 {
+  max-width: 73.5%;
+  min-width: 73.5%;
+  width: 73.5%;
 }
 
-.clear-left {
-  clear: left;
+.columns .col-66,
+.columns .col-2of3 {
+  max-width: 65.5%;
+  min-width: 65.5%;
+  width: 65.5%;
 }
 
-.float-left {
-  float: left;
+.columns .col-60,
+.columns .col-3of5 {
+  max-width: 59.5%;
+  min-width: 59.5%;
+  width: 59.5%;
 }
 
-.float-right {
-  float: right;
+.columns .col-50,
+.columns .col-1of2,
+.columns .col-2of4 {
+  max-width: 47.5%;
+  min-width: 47.5%;
+  width: 47.5%;
 }
 
-.scroll-x {
-  overflow-x: scroll;
-  overflow-y: hidden;
+.columns .col-40,
+.columns .col-2of5 {
+  max-width: 38%;
+  min-width: 38%;
+  width: 38%;
 }
 
-.scroll-y {
-  overflow-x: hidden;
-  overflow-y: scroll;
+.columns .col-33,
+.columns .col-1of3 {
+  max-width: 31%;
+  min-width: 31%;
+  width: 31%;
 }
 
-.scroll-x-auto {
-  overflow-x: auto;
-  overflow-y: hidden;
+.columns .col-25,
+.columns .col-1of4 {
+  max-width: 23%;
+  min-width: 23%;
+  width: 23%;
 }
 
-.scroll-y-auto {
-  overflow-x: hidden;
-  overflow-y: auto;
+.columns .col-20,
+.columns .col-1of5 {
+  max-width: 18%;
+  min-width: 18%;
+  width: 18%;
 }
 
-/* ----------------------------------------
-
- SCROLLBOX
-
----------------------------------------- */
-.is-scrollbox, .is-scrollbox-x, .is-scrollbox-y {
-  overflow-x: auto;
-  overflow-y: auto;
+.columns .col-0 {
+  max-width: 0%;
+  min-width: 0%;
+  width: 0%;
 }
 
-.is-scrollbox-y {
-  height: auto;
-  overflow-x: hidden;
-  overflow-y: auto;
+.rows .row-100,
+.rows .row-80,
+.rows .row-75,
+.rows .row-66,
+.rows .row-50,
+.rows .row-40,
+.rows .row-33,
+.rows .row-25,
+.rows .row-20,
+.rows .row-1of1,
+.rows .row-2of2,
+.rows .row-3of3,
+.rows .row-4of4,
+.rows .row-5of5 {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
 }
 
-.is-scrollbox-x {
-  height: auto;
-  overflow-x: auto;
-  overflow-y: hidden;
+.rows .row-80,
+.rows .row-4of5 {
+  height: 78.5%;
+  max-height: 78.5%;
+  min-height: 78.5%;
 }
 
-/* ----------------------------
-
-Alignments
-
----------------------------- */
-.text-left {
-  text-align: left;
+.rows .row-75,
+.rows .row-3of4 {
+  height: 73.5%;
+  max-height: 73.5%;
+  min-height: 73.5%;
 }
 
-.text-right {
-  text-align: right;
+.rows .row-66,
+.rows .row-2of3 {
+  height: 65.5%;
+  max-height: 65.5%;
+  min-height: 65.5%;
 }
 
-.text-center {
-  text-align: center;
+.rows .row-60,
+.rows .row-3of5 {
+  height: 59.5%;
+  max-height: 59.5%;
+  min-height: 59.5%;
 }
 
-.text-justify {
-  text-align: justify;
+.rows .row-50,
+.rows .row-1of2,
+.rows .row-2of4 {
+  height: 47.5%;
+  max-height: 47.5%;
+  min-height: 47.5%;
 }
 
-.text-overflow,
-.text-ellipsis {
-  text-overflow: ellipsis;
+.rows .row-40,
+.rows .row-2of5 {
+  height: 38%;
+  max-height: 38%;
+  min-height: 38%;
 }
 
-/* ----------------------------
-
-Font Weight
-
----------------------------- */
-.is-thin {
-  font-weight: 100;
+.rows .row-33,
+.rows .row-1of3 {
+  height: 31%;
+  max-height: 31%;
+  min-height: 31%;
 }
 
-.is-light {
-  font-weight: 300;
+.rows .row-25,
+.rows .row-1of4 {
+  height: 23%;
+  max-height: 23%;
+  min-height: 23%;
 }
 
-.is-normal,
-.is-regular {
-  font-weight: 400;
+.rows .row-20,
+.rows .row-1of5 {
+  height: 18%;
+  max-height: 18%;
+  min-height: 18%;
 }
 
-.is-medium {
-  font-weight: 500;
+.rows .row-0 {
+  height: 0%;
+  max-height: 0%;
+  min-height: 0%;
 }
 
-.is-semi-bold {
-  font-weight: 600;
+.wrap-1 > *,
+.wrap-2 > *,
+.wrap-3 > *,
+.wrap-4 > *,
+.wrap-5 > * {
+  margin-bottom: 12px;
+  flex: 0 0 auto;
 }
 
-.is-bold {
-  font-weight: 700;
+.wrap-1 > * {
+  width: 100%;
 }
 
-.is-black,
-.is-extra-bold {
-  font-weight: 900;
+.wrap-2 > * {
+  width: 50%;
 }
 
-/* ----------------------------
-
-Font Style
-
----------------------------- */
-.is-italic {
-  font-style: italic;
+.wrap-3 > * {
+  width: 33.333333%;
 }
 
-.is-lowercase {
-  text-transform: lowercase;
+.wrap-4 > * {
+  width: 25%;
 }
 
-.is-uppercase {
-  text-transform: uppercase;
+.wrap-5 > * {
+  width: 12.5%;
 }
 
-.is-capitalize {
-  text-transform: capitalize;
+.square-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
 }
 
-.is-underline {
-  text-decoration: underline;
+.square-grid-2 {
+  margin: 0 1% 1% 0;
+  max-width: 49%;
+  min-width: 49%;
+  width: 49%;
 }
 
-.is-stroked {
-  text-decoration: line-through;
+.square-grid-3 > * {
+  margin: 0 1% 1% 0;
+  max-width: 32%;
+  min-width: 32%;
+  width: 32%;
 }
 
-.is-small-caps {
-  font-variant: small-caps;
+.square-grid-4 > * {
+  margin: 0 1% 1% 0;
+  max-width: 24%;
+  min-width: 24%;
+  width: 24%;
 }
 
-.force-line-break {
-  white-space: normal;
+.square-grid-5 > * {
+  margin: 0 1% 1% 0;
+  max-width: 19%;
+  min-width: 19%;
+  width: 19%;
 }
 
-.margin-auto {
-  margin: 0 auto;
+/* -------------------------------------------------
+
+ NEGATES
+
+------------------------------------------------- */
+.no-events {
+  pointer-events: none;
 }
 
-.margin-x-auto {
-  margin-left: auto;
-  margin-right: auto;
+.no-no-events {
+  pointer-events: none !important;
 }
 
-.margin-y-auto {
-  margin-left: auto;
-  margin-right: auto;
+.no-flex-grow {
+  flex: 0 1;
 }
 
-.use-hand,
-.use-pointer {
-  cursor: pointer;
-  cursor: default;
+.no-no-flex-grow {
+  flex: 0 1 !important;
 }
 
-.use-cursor {
-  cursor: default;
-  cursor: none;
+.no-flex-shrink {
+  flex: 1 0;
 }
 
-.use-move {
-  cursor: move;
-  cursor: default;
+.no-no-flex-shrink {
+  flex: 1 0 !important;
 }
 
-.use-disabled {
-  cursor: not-allowed;
-  cursor: default;
+.no-float {
+  float: none;
 }
 
-::-webkit-search-decoration {
-  display: none;
+.no-no-float {
+  float: none !important;
 }
 
-::-webkit-file-upload-button {
-  background: none;
-  border: 0;
+.no-flex {
+  flex: none;
+}
+
+.no-no-flex {
+  flex: none !important;
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.no-no-margin {
+  margin: 0 !important;
+}
+
+.no-padding {
   padding: 0;
 }
 
-::placeholder {
-  font-style: italic;
+.no-no-padding {
+  padding: 0 !important;
 }
 
-:disabled {
+.no-border {
+  border: 0;
+}
+
+.no-no-border {
+  border: 0 !important;
+}
+
+.no-radius {
+  border-radius: 0;
+}
+
+.no-no-radius {
+  border-radius: 0 !important;
+}
+
+.no-background {
+  background-color: transparent;
+}
+
+.no-no-background {
+  background: none !important;
+}
+
+.no-outline {
+  outline: none;
+}
+
+.no-no-outline {
+  outline: none !important;
+}
+
+.no-pointer {
   cursor: default;
 }
 
-.no-click,
-.not-allowed {
-  cursor: not-allowed;
+.no-no-pointer {
+  cursor: default !important;
 }
 
-input,
-label,
-select,
-button,
-textarea {
-  background: none;
-  border: 0;
-  display: inline-block;
-  line-height: 1;
+.no-select {
+  user-select: none;
+}
+
+.no-no-select {
+  user-select: none !important;
+}
+
+.no-underline,
+a.no-underline,
+a.no-underline:hover,
+a.no-underline:active,
+a.no-underline:visited {
+  text-decoration: none;
+}
+
+.no-no-underline,
+a.no-no-underline,
+a.no-no-underline:hover,
+a.no-no-underline:active,
+a.no-no-underline:visited {
+  text-decoration: none !important;
+}
+
+.no-scroll,
+.no-overflow {
+  overflow: hidden;
+}
+
+.no-no-overflow,
+.no-no-scroll {
+  overflow: hidden !important;
+}
+
+.no-scroll-x {
+  overflow-x: hidden;
+}
+
+.no-no-scroll-x {
+  overflow-x: hidden !important;
+}
+
+.no-scroll-y {
+  overflow-y: hidden;
+}
+
+.no-no-scroll-y {
+  overflow-y: hidden !important;
+}
+
+.nowrap,
+.no-wrap {
+  white-space: nowrap;
+}
+
+.no-nowrap,
+.no-no-wrap {
+  white-space: nowrap !important;
+}
+
+.no-margin-padding {
   margin: 0;
   padding: 0;
+}
+
+.is-circle {
+  border-radius: 50%;
+}
+
+.v-align-top {
+  vertical-align: top;
+}
+
+.v-align-middle {
   vertical-align: middle;
-  white-space: normal;
 }
 
-input,
-select,
-textarea {
-  box-sizing: border-box;
+.v-align-bottom {
+  vertical-align: bottom;
 }
 
-input[type=radio],
-input[type=checkbox] {
-  cursor: pointer;
-  height: 1.1rem;
-  width: 1.1rem;
+/* --------------------------------------------
+
+ TYPES
+
+-------------------------------------------- */
+.is-flex {
+  display: flex;
 }
 
-input[type=search] {
-  -webkit-appearance: textfield;
-  -webkit-box-sizing: content-box;
+.is-block {
+  display: block;
 }
 
-button,
-input[type=reset],
-input[type=button],
-input[type=submit] {
-  overflow: visible;
-  width: auto;
+.is-inline {
+  display: inline;
 }
 
-textarea {
-  line-height: 1.2em;
-  min-height: 2.4rem;
-  overflow: auto;
-  resize: vertical;
-  vertical-align: top;
+.is-inflex,
+.is-inline-flex {
+  display: inline-flex;
 }
 
-select[multiple] {
-  vertical-align: top;
+.is-inblock,
+.is-inline-block {
+  display: inline-block;
 }
 
-fieldset {
-  border: 0;
-  display: block;
-  margin: 0;
-  padding: 0;
-  width: 100%;
+/* --------------------------------------------
+
+ POSITIONING
+
+-------------------------------------------- */
+.is-relative, .is-scrollbox-wrapper {
+  position: relative;
 }
 
-h1 {
-  font-size: 2.8rem;
-  line-height: 1.1;
+.is-absolute, .is-scrollbox, .is-scrollbox-y, .is-scrollbox-x, .is-overlay {
+  position: absolute;
 }
 
-h2 {
-  font-size: 2.2rem;
-  line-height: 1.1;
+.is-fixed, .is-popin,
+.is-popup,
+.is-fixed-overlay {
+  position: fixed;
 }
 
-h3 {
-  font-size: 1.6rem;
-  line-height: 1.1;
+.is-sticky {
+  position: sticky;
 }
 
-h4 {
-  font-size: 1.4rem;
-  line-height: 1.1;
+/* --------------------------------------------
+
+ ABSOLUTE PLACEMENTS
+
+-------------------------------------------- */
+.is-zero-abs, .is-overlay, .is-popin,
+.is-popup,
+.is-fixed-overlay,
+.is-trbl {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
 }
 
-h5 {
-  font-size: 1.2rem;
-  line-height: 1.1;
+.is-top-left-abs,
+.is-top-left {
+  left: 0;
+  top: 0;
 }
 
-h6 {
-  font-size: 1.1rem;
-  line-height: 1.1;
+.is-top-right-abs,
+.is-top-right {
+  right: 0;
+  top: 0;
 }
 
-table {
-  font-size: 12px;
-  font-size: 0.75rem;
-  border-collapse: collapse;
-  border-spacing: 0;
+.is-bottom-right-abs,
+.is-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.is-bottom-left-abs,
+.is-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.is-top-to-bottom-abs,
+.is-top-to-bottom,
+.is-popin,
+.is-popup,
+.is-fixed-overlay {
+  bottom: 0;
+  top: 0;
+}
+
+.is-left-to-right-abs,
+.is-left-to-right {
+  left: 0;
+  right: 0;
+}
+
+/* --------------------------------------------
+
+ SIZES
+
+-------------------------------------------- */
+.is-full-width, .is-full-layout, .is-scrollbox, .is-scrollbox-y, .is-scrollbox-x {
   max-width: 100%;
   min-width: 100%;
-  overflow: scroll;
-  text-align: left;
   width: 100%;
 }
 
-table th {
-  font-weight: bold;
+.is-full-height, .is-full-layout, .is-scrollbox, .is-scrollbox-y, .is-scrollbox-x {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
 }
 
-table th,
-table td {
-  padding: 12px 15px;
-  padding: 0.75rem 0.9375rem;
-  display: table-cell;
+.is-hidden, .hide::after, .hide::before, .hide {
+  display: none;
+  visibility: hidden;
+}
+
+.is-visible {
+  display: inherit;
+  visibility: inherit;
+}
+
+.hide {
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  max-height: 0;
+  max-width: 0;
+  min-height: 0;
+  min-width: 0;
+  width: 0;
+}
+.hide::before {
+  content: none;
+}
+.hide::after {
+  content: none;
+}
+
+.clearfix {
+  *zoom: 1;
+}
+.clearfix::after, .clearfix::before {
+  content: ".";
+  display: block;
+  font-size: 0;
+  height: 0;
+  line-height: 0;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  visibility: hidden;
+  width: 0;
+}
+.clearfix::after {
+  clear: both;
 }
 
-table th:last-child,
-table td:last-child {
-  border-right: 0;
+.clear {
+  clear: both;
 }
 
-table caption {
-  caption-side: top;
+.clear-right {
+  clear: right;
 }
 
-a:link, a:visited, a:active {
-  text-decoration: none;
+.clear-left {
+  clear: left;
 }
-a:hover {
-  text-decoration: underline;
+
+.float-left {
+  float: left;
 }
 
-.columns .col-100,
-.columns .col-80,
-.columns .col-75,
-.columns .col-66,
-.columns .col-50,
-.columns .col-40,
-.columns .col-33,
-.columns .col-25,
-.columns .col-20,
-.columns .col-1of1,
-.columns .col-2of2,
-.columns .col-3of3,
-.columns .col-4of4,
-.columns .col-5of5 {
-  max-width: 100%;
-  min-width: 100%;
-  width: 100%;
+.float-right {
+  float: right;
+}
+
+.scroll-x {
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+.scroll-y {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.scroll-x-auto {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroll-y-auto {
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.columns .col-80,
-.columns .col-4of5 {
-  max-width: 78.5%;
-  min-width: 78.5%;
-  width: 78.5%;
-}
+/* ----------------------------------------
 
-.columns .col-75,
-.columns .col-3of4 {
-  max-width: 73.5%;
-  min-width: 73.5%;
-  width: 73.5%;
+ SCROLLBOX
+
+---------------------------------------- */
+.is-scrollbox, .is-scrollbox-x, .is-scrollbox-y {
+  overflow-x: auto;
+  overflow-y: auto;
 }
 
-.columns .col-66,
-.columns .col-2of3 {
-  max-width: 65.5%;
-  min-width: 65.5%;
-  width: 65.5%;
+.is-scrollbox-y {
+  height: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.columns .col-60,
-.columns .col-3of5 {
-  max-width: 59.5%;
-  min-width: 59.5%;
-  width: 59.5%;
+.is-scrollbox-x {
+  height: auto;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
-.columns .col-50,
-.columns .col-1of2,
-.columns .col-2of4 {
-  max-width: 47.5%;
-  min-width: 47.5%;
-  width: 47.5%;
+/* ----------------------------
+
+Alignments
+
+---------------------------- */
+.text-left {
+  text-align: left;
 }
 
-.columns .col-40,
-.columns .col-2of5 {
-  max-width: 38%;
-  min-width: 38%;
-  width: 38%;
+.text-right {
+  text-align: right;
 }
 
-.columns .col-33,
-.columns .col-1of3 {
-  max-width: 31%;
-  min-width: 31%;
-  width: 31%;
+.text-center {
+  text-align: center;
 }
 
-.columns .col-25,
-.columns .col-1of4 {
-  max-width: 23%;
-  min-width: 23%;
-  width: 23%;
+.text-justify {
+  text-align: justify;
 }
 
-.columns .col-20,
-.columns .col-1of5 {
-  max-width: 18%;
-  min-width: 18%;
-  width: 18%;
+.text-overflow,
+.text-ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
-.columns .col-0 {
-  max-width: 0%;
-  min-width: 0%;
-  width: 0%;
+/* ----------------------------
+
+Font Weight
+
+---------------------------- */
+.is-thin {
+  font-weight: 100;
 }
 
-.rows .row-100,
-.rows .row-80,
-.rows .row-75,
-.rows .row-66,
-.rows .row-50,
-.rows .row-40,
-.rows .row-33,
-.rows .row-25,
-.rows .row-20,
-.rows .row-1of1,
-.rows .row-2of2,
-.rows .row-3of3,
-.rows .row-4of4,
-.rows .row-5of5 {
-  height: 100%;
-  max-height: 100%;
-  min-height: 100%;
+.is-light {
+  font-weight: 300;
 }
 
-.rows .row-80,
-.rows .row-4of5 {
-  height: 78.5%;
-  max-height: 78.5%;
-  min-height: 78.5%;
+.is-normal,
+.is-regular {
+  font-weight: 400;
 }
 
-.rows .row-75,
-.rows .row-3of4 {
-  height: 73.5%;
-  max-height: 73.5%;
-  min-height: 73.5%;
+.is-medium {
+  font-weight: 500;
 }
 
-.rows .row-66,
-.rows .row-2of3 {
-  height: 65.5%;
-  max-height: 65.5%;
-  min-height: 65.5%;
+.is-semi-bold {
+  font-weight: 600;
 }
 
-.rows .row-60,
-.rows .row-3of5 {
-  height: 59.5%;
-  max-height: 59.5%;
-  min-height: 59.5%;
+.is-bold {
+  font-weight: 700;
 }
 
-.rows .row-50,
-.rows .row-1of2,
-.rows .row-2of4 {
-  height: 47.5%;
-  max-height: 47.5%;
-  min-height: 47.5%;
+.is-black,
+.is-extra-bold {
+  font-weight: 900;
 }
 
-.rows .row-40,
-.rows .row-2of5 {
-  height: 38%;
-  max-height: 38%;
-  min-height: 38%;
+/* ----------------------------
+
+Font Style
+
+---------------------------- */
+.is-italic {
+  font-style: italic;
 }
 
-.rows .row-33,
-.rows .row-1of3 {
-  height: 31%;
-  max-height: 31%;
-  min-height: 31%;
+.is-lowercase {
+  text-transform: lowercase;
 }
 
-.rows .row-25,
-.rows .row-1of4 {
-  height: 23%;
-  max-height: 23%;
-  min-height: 23%;
+.is-uppercase {
+  text-transform: uppercase;
 }
 
-.rows .row-20,
-.rows .row-1of5 {
-  height: 18%;
-  max-height: 18%;
-  min-height: 18%;
+.is-capitalize {
+  text-transform: capitalize;
 }
 
-.rows .row-0 {
-  height: 0%;
-  max-height: 0%;
-  min-height: 0%;
+.is-underline {
+  text-decoration: underline;
 }
 
-.wrap-1 > *,
-.wrap-2 > *,
-.wrap-3 > *,
-.wrap-4 > *,
-.wrap-5 > * {
-  margin-bottom: 12px;
-  margin-bottom: 0.75rem;
-  flex: 0 0 auto;
+.is-stroked {
+  text-decoration: line-through;
 }
 
-.wrap-1 > * {
-  width: 100%;
+.is-small-caps {
+  font-variant: small-caps;
 }
 
-.wrap-2 > * {
-  width: 50%;
+.force-line-break {
+  white-space: normal;
 }
 
-.wrap-3 > * {
-  width: 33.333333%;
+.margin-auto {
+  margin: 0 auto;
 }
 
-.wrap-4 > * {
-  width: 25%;
+.margin-x-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.wrap-5 > * {
-  width: 12.5%;
+.margin-y-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.square-grid {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+.use-hand,
+.use-pointer {
+  cursor: pointer;
+  cursor: default;
 }
 
-.square-grid-2 {
-  margin: 0 1% 1% 0;
-  max-width: 49%;
-  min-width: 49%;
-  width: 49%;
+.use-cursor {
+  cursor: default;
+  cursor: none;
 }
 
-.square-grid-3 > * {
-  margin: 0 1% 1% 0;
-  max-width: 32%;
-  min-width: 32%;
-  width: 32%;
+.use-move {
+  cursor: move;
+  cursor: default;
 }
 
-.square-grid-4 > * {
-  margin: 0 1% 1% 0;
-  max-width: 24%;
-  min-width: 24%;
-  width: 24%;
+.use-disabled {
+  cursor: not-allowed;
+  cursor: default;
 }
 
-.square-grid-5 > * {
-  margin: 0 1% 1% 0;
-  max-width: 19%;
-  min-width: 19%;
-  width: 19%;
+.debug * {
+  outline: 1px solid rgba(255, 0, 0, 0.3);
 }
 
 /*# sourceMappingURL=styles.css.map */