From 2f0c87b1c1ebb20f7e2eaaf82faef7ff1b48de02 Mon Sep 17 00:00:00 2001 From: Jimmy Date: Thu, 5 Oct 2017 16:40:21 -0700 Subject: [PATCH 01/16] incorrect base font size on chrome --- index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 2aaef23..bac096f 100644 --- a/index.html +++ b/index.html @@ -62,11 +62,11 @@

General type rules

Headings

-

Heading 1 60/96 px

-

Heading 2 48/80 px

-

Heading 3 36/48 px

-

Heading 4 24/40 px

-
Heading 5 18/32 px
+

Heading 1 60/72 px

+

Heading 2 48/60 px

+

Heading 3 36/36 px

+

Heading 4 24/30 px

+
Heading 5 18/24 px

From ce01d988689be2d86bde5bcb835f60384d797b32 Mon Sep 17 00:00:00 2001
From: Jimmy 
Date: Tue, 10 Oct 2017 17:30:11 -0400
Subject: [PATCH 02/16] using scss to loop the utilities

i see that utilities are being generated with ruby, but i think thats
an extra level of abstraction that makes it harder to read
---
 base.css            | 4795 +++++++++++++++++++++---------------------
 sass/utilities.scss | 4832 +------------------------------------------
 2 files changed, 2411 insertions(+), 7216 deletions(-)

diff --git a/base.css b/base.css
index 10d7adc..4855db3 100644
--- a/base.css
+++ b/base.css
@@ -1079,3616 +1079,3607 @@ ol > li:before {
     color: black; }
 
 /**********************
-  Width classes
+  Utility classes
 **********************/
 .w-0 {
   width: 0rem; }
 
-.w-1 {
-  width: 1rem; }
+.h-0 {
+  height: 0rem; }
 
-.w-2 {
-  width: 2rem; }
+.m-0 {
+  margin: 0rem; }
 
-.w-3 {
-  width: 3rem; }
+.mt-0 {
+  margin-top: 0rem; }
 
-.w-4 {
-  width: 4rem; }
+.mb-0 {
+  margin-bottom: 0rem; }
 
-.w-5 {
-  width: 5rem; }
+.ml-0 {
+  margin-left: 0rem; }
 
-.w-6 {
-  width: 6rem; }
+.mr-0 {
+  margin-right: 0rem; }
 
-.w-7 {
-  width: 7rem; }
+.p-0 {
+  padding: 0rem; }
 
-.w-8 {
-  width: 8rem; }
+.pt-0 {
+  margin-top: 0rem; }
 
-.w-9 {
-  width: 9rem; }
+.pb-0 {
+  padding-bottom: 0rem; }
 
-.w-10 {
-  width: 10rem; }
+.pl-0 {
+  padding-left: 0rem; }
 
-.w-11 {
-  width: 11rem; }
+.pr-0 {
+  padding-right: 0rem; }
 
-.w-12 {
-  width: 12rem; }
+.w-1 {
+  width: 1rem; }
 
-.w-13 {
-  width: 13rem; }
+.h-1 {
+  height: 1rem; }
 
-.w-14 {
-  width: 14rem; }
+.m-1 {
+  margin: 1rem; }
 
-.w-15 {
-  width: 15rem; }
+.mt-1 {
+  margin-top: 1rem; }
 
-.w-16 {
-  width: 16rem; }
+.mb-1 {
+  margin-bottom: 1rem; }
 
-.w-17 {
-  width: 17rem; }
+.ml-1 {
+  margin-left: 1rem; }
 
-.w-18 {
-  width: 18rem; }
+.mr-1 {
+  margin-right: 1rem; }
 
-.w-19 {
-  width: 19rem; }
+.p-1 {
+  padding: 1rem; }
 
-.w-20 {
-  width: 20rem; }
+.pt-1 {
+  margin-top: 1rem; }
 
-.w-21 {
-  width: 21rem; }
+.pb-1 {
+  padding-bottom: 1rem; }
 
-.w-22 {
-  width: 22rem; }
+.pl-1 {
+  padding-left: 1rem; }
 
-.w-23 {
-  width: 23rem; }
+.pr-1 {
+  padding-right: 1rem; }
 
-.w-24 {
-  width: 24rem; }
+.w-2 {
+  width: 2rem; }
 
-.w-25 {
-  width: 25rem; }
+.h-2 {
+  height: 2rem; }
 
-.w-26 {
-  width: 26rem; }
+.m-2 {
+  margin: 2rem; }
 
-.w-27 {
-  width: 27rem; }
+.mt-2 {
+  margin-top: 2rem; }
 
-.w-28 {
-  width: 28rem; }
+.mb-2 {
+  margin-bottom: 2rem; }
 
-.w-29 {
-  width: 29rem; }
+.ml-2 {
+  margin-left: 2rem; }
 
-.w-30 {
-  width: 30rem; }
+.mr-2 {
+  margin-right: 2rem; }
 
-.w-31 {
-  width: 31rem; }
+.p-2 {
+  padding: 2rem; }
 
-.w-32 {
-  width: 32rem; }
+.pt-2 {
+  margin-top: 2rem; }
 
-.w-33 {
-  width: 33rem; }
+.pb-2 {
+  padding-bottom: 2rem; }
 
-.w-34 {
-  width: 34rem; }
+.pl-2 {
+  padding-left: 2rem; }
 
-.w-35 {
-  width: 35rem; }
+.pr-2 {
+  padding-right: 2rem; }
 
-.w-36 {
-  width: 36rem; }
+.w-3 {
+  width: 3rem; }
 
-.w-37 {
-  width: 37rem; }
+.h-3 {
+  height: 3rem; }
 
-.w-38 {
-  width: 38rem; }
+.m-3 {
+  margin: 3rem; }
 
-.w-39 {
-  width: 39rem; }
+.mt-3 {
+  margin-top: 3rem; }
 
-.w-40 {
-  width: 40rem; }
+.mb-3 {
+  margin-bottom: 3rem; }
 
-.w-41 {
-  width: 41rem; }
+.ml-3 {
+  margin-left: 3rem; }
 
-.w-42 {
-  width: 42rem; }
+.mr-3 {
+  margin-right: 3rem; }
 
-.w-43 {
-  width: 43rem; }
+.p-3 {
+  padding: 3rem; }
 
-.w-44 {
-  width: 44rem; }
+.pt-3 {
+  margin-top: 3rem; }
 
-.w-45 {
-  width: 45rem; }
+.pb-3 {
+  padding-bottom: 3rem; }
 
-.w-46 {
-  width: 46rem; }
+.pl-3 {
+  padding-left: 3rem; }
 
-.w-47 {
-  width: 47rem; }
+.pr-3 {
+  padding-right: 3rem; }
 
-.w-48 {
-  width: 48rem; }
+.w-4 {
+  width: 4rem; }
 
-.w-49 {
-  width: 49rem; }
+.h-4 {
+  height: 4rem; }
 
-.w-50 {
-  width: 50rem; }
+.m-4 {
+  margin: 4rem; }
 
-.w-51 {
-  width: 51rem; }
+.mt-4 {
+  margin-top: 4rem; }
 
-.w-52 {
-  width: 52rem; }
+.mb-4 {
+  margin-bottom: 4rem; }
 
-.w-53 {
-  width: 53rem; }
+.ml-4 {
+  margin-left: 4rem; }
 
-.w-54 {
-  width: 54rem; }
+.mr-4 {
+  margin-right: 4rem; }
 
-.w-55 {
-  width: 55rem; }
+.p-4 {
+  padding: 4rem; }
 
-.w-56 {
-  width: 56rem; }
+.pt-4 {
+  margin-top: 4rem; }
 
-.w-57 {
-  width: 57rem; }
+.pb-4 {
+  padding-bottom: 4rem; }
 
-.w-58 {
-  width: 58rem; }
+.pl-4 {
+  padding-left: 4rem; }
 
-.w-59 {
-  width: 59rem; }
+.pr-4 {
+  padding-right: 4rem; }
 
-.w-60 {
-  width: 60rem; }
+.w-5 {
+  width: 5rem; }
 
-.w-61 {
-  width: 61rem; }
+.h-5 {
+  height: 5rem; }
 
-.w-62 {
-  width: 62rem; }
+.m-5 {
+  margin: 5rem; }
 
-.w-63 {
-  width: 63rem; }
+.mt-5 {
+  margin-top: 5rem; }
 
-.w-64 {
-  width: 64rem; }
+.mb-5 {
+  margin-bottom: 5rem; }
 
-.w-65 {
-  width: 65rem; }
+.ml-5 {
+  margin-left: 5rem; }
 
-.w-66 {
-  width: 66rem; }
+.mr-5 {
+  margin-right: 5rem; }
 
-.w-67 {
-  width: 67rem; }
+.p-5 {
+  padding: 5rem; }
 
-.w-68 {
-  width: 68rem; }
+.pt-5 {
+  margin-top: 5rem; }
 
-.w-69 {
-  width: 69rem; }
+.pb-5 {
+  padding-bottom: 5rem; }
 
-.w-70 {
-  width: 70rem; }
+.pl-5 {
+  padding-left: 5rem; }
 
-.w-71 {
-  width: 71rem; }
+.pr-5 {
+  padding-right: 5rem; }
 
-.w-72 {
-  width: 72rem; }
+.w-6 {
+  width: 6rem; }
 
-.w-73 {
-  width: 73rem; }
+.h-6 {
+  height: 6rem; }
 
-.w-74 {
-  width: 74rem; }
+.m-6 {
+  margin: 6rem; }
 
-.w-75 {
-  width: 75rem; }
+.mt-6 {
+  margin-top: 6rem; }
 
-.w-76 {
-  width: 76rem; }
+.mb-6 {
+  margin-bottom: 6rem; }
 
-.w-77 {
-  width: 77rem; }
+.ml-6 {
+  margin-left: 6rem; }
 
-.w-78 {
-  width: 78rem; }
+.mr-6 {
+  margin-right: 6rem; }
 
-.w-79 {
-  width: 79rem; }
+.p-6 {
+  padding: 6rem; }
 
-.w-80 {
-  width: 80rem; }
+.pt-6 {
+  margin-top: 6rem; }
 
-.w-81 {
-  width: 81rem; }
+.pb-6 {
+  padding-bottom: 6rem; }
 
-.w-82 {
-  width: 82rem; }
+.pl-6 {
+  padding-left: 6rem; }
 
-.w-83 {
-  width: 83rem; }
+.pr-6 {
+  padding-right: 6rem; }
 
-.w-84 {
-  width: 84rem; }
+.w-7 {
+  width: 7rem; }
 
-.w-85 {
-  width: 85rem; }
+.h-7 {
+  height: 7rem; }
 
-.w-86 {
-  width: 86rem; }
+.m-7 {
+  margin: 7rem; }
 
-.w-87 {
-  width: 87rem; }
+.mt-7 {
+  margin-top: 7rem; }
 
-.w-88 {
-  width: 88rem; }
+.mb-7 {
+  margin-bottom: 7rem; }
 
-.w-89 {
-  width: 89rem; }
+.ml-7 {
+  margin-left: 7rem; }
 
-.w-90 {
-  width: 90rem; }
+.mr-7 {
+  margin-right: 7rem; }
 
-.w-91 {
-  width: 91rem; }
+.p-7 {
+  padding: 7rem; }
 
-.w-92 {
-  width: 92rem; }
+.pt-7 {
+  margin-top: 7rem; }
 
-.w-93 {
-  width: 93rem; }
+.pb-7 {
+  padding-bottom: 7rem; }
 
-.w-94 {
-  width: 94rem; }
+.pl-7 {
+  padding-left: 7rem; }
 
-.w-95 {
-  width: 95rem; }
+.pr-7 {
+  padding-right: 7rem; }
 
-.w-96 {
-  width: 96rem; }
+.w-8 {
+  width: 8rem; }
 
-.w-97 {
-  width: 97rem; }
+.h-8 {
+  height: 8rem; }
 
-.w-98 {
-  width: 98rem; }
+.m-8 {
+  margin: 8rem; }
 
-.w-99 {
-  width: 99rem; }
+.mt-8 {
+  margin-top: 8rem; }
 
-/**********************
-  Height classes
-**********************/
-.h-0 {
-  height: 0rem; }
+.mb-8 {
+  margin-bottom: 8rem; }
 
-.h-1 {
-  height: 1rem; }
+.ml-8 {
+  margin-left: 8rem; }
 
-.h-2 {
-  height: 2rem; }
+.mr-8 {
+  margin-right: 8rem; }
 
-.h-3 {
-  height: 3rem; }
+.p-8 {
+  padding: 8rem; }
 
-.h-4 {
-  height: 4rem; }
+.pt-8 {
+  margin-top: 8rem; }
 
-.h-5 {
-  height: 5rem; }
+.pb-8 {
+  padding-bottom: 8rem; }
 
-.h-6 {
-  height: 6rem; }
+.pl-8 {
+  padding-left: 8rem; }
 
-.h-7 {
-  height: 7rem; }
+.pr-8 {
+  padding-right: 8rem; }
 
-.h-8 {
-  height: 8rem; }
+.w-9 {
+  width: 9rem; }
 
 .h-9 {
   height: 9rem; }
 
-.h-10 {
-  height: 10rem; }
+.m-9 {
+  margin: 9rem; }
 
-.h-11 {
-  height: 11rem; }
+.mt-9 {
+  margin-top: 9rem; }
 
-.h-12 {
-  height: 12rem; }
+.mb-9 {
+  margin-bottom: 9rem; }
 
-.h-13 {
-  height: 13rem; }
+.ml-9 {
+  margin-left: 9rem; }
 
-.h-14 {
-  height: 14rem; }
+.mr-9 {
+  margin-right: 9rem; }
 
-.h-15 {
-  height: 15rem; }
+.p-9 {
+  padding: 9rem; }
 
-.h-16 {
-  height: 16rem; }
+.pt-9 {
+  margin-top: 9rem; }
 
-.h-17 {
-  height: 17rem; }
+.pb-9 {
+  padding-bottom: 9rem; }
 
-.h-18 {
-  height: 18rem; }
+.pl-9 {
+  padding-left: 9rem; }
 
-.h-19 {
-  height: 19rem; }
+.pr-9 {
+  padding-right: 9rem; }
 
-.h-20 {
-  height: 20rem; }
+.w-10 {
+  width: 10rem; }
 
-.h-21 {
-  height: 21rem; }
+.h-10 {
+  height: 10rem; }
 
-.h-22 {
-  height: 22rem; }
+.m-10 {
+  margin: 10rem; }
 
-.h-23 {
-  height: 23rem; }
+.mt-10 {
+  margin-top: 10rem; }
 
-.h-24 {
-  height: 24rem; }
+.mb-10 {
+  margin-bottom: 10rem; }
 
-.h-25 {
-  height: 25rem; }
+.ml-10 {
+  margin-left: 10rem; }
 
-.h-26 {
-  height: 26rem; }
+.mr-10 {
+  margin-right: 10rem; }
 
-.h-27 {
-  height: 27rem; }
+.p-10 {
+  padding: 10rem; }
 
-.h-28 {
-  height: 28rem; }
+.pt-10 {
+  margin-top: 10rem; }
 
-.h-29 {
-  height: 29rem; }
+.pb-10 {
+  padding-bottom: 10rem; }
 
-.h-30 {
-  height: 30rem; }
+.pl-10 {
+  padding-left: 10rem; }
 
-.h-31 {
-  height: 31rem; }
+.pr-10 {
+  padding-right: 10rem; }
 
-.h-32 {
-  height: 32rem; }
+.w-11 {
+  width: 11rem; }
 
-.h-33 {
-  height: 33rem; }
+.h-11 {
+  height: 11rem; }
 
-.h-34 {
-  height: 34rem; }
+.m-11 {
+  margin: 11rem; }
 
-.h-35 {
-  height: 35rem; }
+.mt-11 {
+  margin-top: 11rem; }
 
-.h-36 {
-  height: 36rem; }
+.mb-11 {
+  margin-bottom: 11rem; }
 
-.h-37 {
-  height: 37rem; }
+.ml-11 {
+  margin-left: 11rem; }
 
-.h-38 {
-  height: 38rem; }
+.mr-11 {
+  margin-right: 11rem; }
 
-.h-39 {
-  height: 39rem; }
+.p-11 {
+  padding: 11rem; }
 
-.h-40 {
-  height: 40rem; }
+.pt-11 {
+  margin-top: 11rem; }
 
-.h-41 {
-  height: 41rem; }
+.pb-11 {
+  padding-bottom: 11rem; }
 
-.h-42 {
-  height: 42rem; }
+.pl-11 {
+  padding-left: 11rem; }
 
-.h-43 {
-  height: 43rem; }
+.pr-11 {
+  padding-right: 11rem; }
 
-.h-44 {
-  height: 44rem; }
+.w-12 {
+  width: 12rem; }
 
-.h-45 {
-  height: 45rem; }
+.h-12 {
+  height: 12rem; }
 
-.h-46 {
-  height: 46rem; }
+.m-12 {
+  margin: 12rem; }
 
-.h-47 {
-  height: 47rem; }
+.mt-12 {
+  margin-top: 12rem; }
 
-.h-48 {
-  height: 48rem; }
+.mb-12 {
+  margin-bottom: 12rem; }
 
-.h-49 {
-  height: 49rem; }
+.ml-12 {
+  margin-left: 12rem; }
 
-.h-50 {
-  height: 50rem; }
+.mr-12 {
+  margin-right: 12rem; }
 
-.h-51 {
-  height: 51rem; }
+.p-12 {
+  padding: 12rem; }
 
-.h-52 {
-  height: 52rem; }
+.pt-12 {
+  margin-top: 12rem; }
 
-.h-53 {
-  height: 53rem; }
+.pb-12 {
+  padding-bottom: 12rem; }
 
-.h-54 {
-  height: 54rem; }
+.pl-12 {
+  padding-left: 12rem; }
 
-.h-55 {
-  height: 55rem; }
+.pr-12 {
+  padding-right: 12rem; }
 
-.h-56 {
-  height: 56rem; }
+.w-13 {
+  width: 13rem; }
 
-.h-57 {
-  height: 57rem; }
+.h-13 {
+  height: 13rem; }
 
-.h-58 {
-  height: 58rem; }
+.m-13 {
+  margin: 13rem; }
 
-.h-59 {
-  height: 59rem; }
+.mt-13 {
+  margin-top: 13rem; }
 
-.h-60 {
-  height: 60rem; }
+.mb-13 {
+  margin-bottom: 13rem; }
 
-.h-61 {
-  height: 61rem; }
+.ml-13 {
+  margin-left: 13rem; }
 
-.h-62 {
-  height: 62rem; }
+.mr-13 {
+  margin-right: 13rem; }
 
-.h-63 {
-  height: 63rem; }
+.p-13 {
+  padding: 13rem; }
 
-.h-64 {
-  height: 64rem; }
+.pt-13 {
+  margin-top: 13rem; }
 
-.h-65 {
-  height: 65rem; }
+.pb-13 {
+  padding-bottom: 13rem; }
 
-.h-66 {
-  height: 66rem; }
+.pl-13 {
+  padding-left: 13rem; }
 
-.h-67 {
-  height: 67rem; }
+.pr-13 {
+  padding-right: 13rem; }
 
-.h-68 {
-  height: 68rem; }
+.w-14 {
+  width: 14rem; }
 
-.h-69 {
-  height: 69rem; }
+.h-14 {
+  height: 14rem; }
 
-.h-70 {
-  height: 70rem; }
+.m-14 {
+  margin: 14rem; }
 
-.h-71 {
-  height: 71rem; }
+.mt-14 {
+  margin-top: 14rem; }
 
-.h-72 {
-  height: 72rem; }
+.mb-14 {
+  margin-bottom: 14rem; }
 
-.h-73 {
-  height: 73rem; }
+.ml-14 {
+  margin-left: 14rem; }
 
-.h-74 {
-  height: 74rem; }
+.mr-14 {
+  margin-right: 14rem; }
 
-.h-75 {
-  height: 75rem; }
+.p-14 {
+  padding: 14rem; }
 
-.h-76 {
-  height: 76rem; }
+.pt-14 {
+  margin-top: 14rem; }
 
-.h-77 {
-  height: 77rem; }
+.pb-14 {
+  padding-bottom: 14rem; }
 
-.h-78 {
-  height: 78rem; }
+.pl-14 {
+  padding-left: 14rem; }
 
-.h-79 {
-  height: 79rem; }
+.pr-14 {
+  padding-right: 14rem; }
 
-.h-80 {
-  height: 80rem; }
+.w-15 {
+  width: 15rem; }
 
-.h-81 {
-  height: 81rem; }
+.h-15 {
+  height: 15rem; }
 
-.h-82 {
-  height: 82rem; }
+.m-15 {
+  margin: 15rem; }
 
-.h-83 {
-  height: 83rem; }
+.mt-15 {
+  margin-top: 15rem; }
 
-.h-84 {
-  height: 84rem; }
+.mb-15 {
+  margin-bottom: 15rem; }
 
-.h-85 {
-  height: 85rem; }
+.ml-15 {
+  margin-left: 15rem; }
 
-.h-86 {
-  height: 86rem; }
+.mr-15 {
+  margin-right: 15rem; }
 
-.h-87 {
-  height: 87rem; }
+.p-15 {
+  padding: 15rem; }
 
-.h-88 {
-  height: 88rem; }
+.pt-15 {
+  margin-top: 15rem; }
 
-.h-89 {
-  height: 89rem; }
+.pb-15 {
+  padding-bottom: 15rem; }
 
-.h-90 {
-  height: 90rem; }
+.pl-15 {
+  padding-left: 15rem; }
 
-.h-91 {
-  height: 91rem; }
+.pr-15 {
+  padding-right: 15rem; }
 
-.h-92 {
-  height: 92rem; }
+.w-16 {
+  width: 16rem; }
 
-.h-93 {
-  height: 93rem; }
+.h-16 {
+  height: 16rem; }
 
-.h-94 {
-  height: 94rem; }
+.m-16 {
+  margin: 16rem; }
 
-.h-95 {
-  height: 95rem; }
+.mt-16 {
+  margin-top: 16rem; }
 
-.h-96 {
-  height: 96rem; }
+.mb-16 {
+  margin-bottom: 16rem; }
 
-.h-97 {
-  height: 97rem; }
+.ml-16 {
+  margin-left: 16rem; }
 
-.h-98 {
-  height: 98rem; }
+.mr-16 {
+  margin-right: 16rem; }
 
-.h-99 {
-  height: 99rem; }
+.p-16 {
+  padding: 16rem; }
 
-/**********************
-  Margin classes
-**********************/
-.ml-0 {
-  margin-left: 0rem; }
+.pt-16 {
+  margin-top: 16rem; }
 
-.ml-1 {
-  margin-left: 1rem; }
+.pb-16 {
+  padding-bottom: 16rem; }
 
-.ml-2 {
-  margin-left: 2rem; }
+.pl-16 {
+  padding-left: 16rem; }
 
-.ml-3 {
-  margin-left: 3rem; }
+.pr-16 {
+  padding-right: 16rem; }
 
-.ml-4 {
-  margin-left: 4rem; }
+.w-17 {
+  width: 17rem; }
 
-.ml-5 {
-  margin-left: 5rem; }
+.h-17 {
+  height: 17rem; }
 
-.ml-6 {
-  margin-left: 6rem; }
+.m-17 {
+  margin: 17rem; }
 
-.ml-7 {
-  margin-left: 7rem; }
+.mt-17 {
+  margin-top: 17rem; }
 
-.ml-8 {
-  margin-left: 8rem; }
+.mb-17 {
+  margin-bottom: 17rem; }
 
-.ml-9 {
-  margin-left: 9rem; }
+.ml-17 {
+  margin-left: 17rem; }
 
-.ml-10 {
-  margin-left: 10rem; }
+.mr-17 {
+  margin-right: 17rem; }
 
-.ml-11 {
-  margin-left: 11rem; }
+.p-17 {
+  padding: 17rem; }
 
-.ml-12 {
-  margin-left: 12rem; }
+.pt-17 {
+  margin-top: 17rem; }
 
-.ml-13 {
-  margin-left: 13rem; }
+.pb-17 {
+  padding-bottom: 17rem; }
 
-.ml-14 {
-  margin-left: 14rem; }
+.pl-17 {
+  padding-left: 17rem; }
 
-.ml-15 {
-  margin-left: 15rem; }
+.pr-17 {
+  padding-right: 17rem; }
 
-.ml-16 {
-  margin-left: 16rem; }
+.w-18 {
+  width: 18rem; }
 
-.ml-17 {
-  margin-left: 17rem; }
+.h-18 {
+  height: 18rem; }
 
-.ml-18 {
-  margin-left: 18rem; }
+.m-18 {
+  margin: 18rem; }
 
-.ml-19 {
-  margin-left: 19rem; }
+.mt-18 {
+  margin-top: 18rem; }
 
-.ml-20 {
-  margin-left: 20rem; }
+.mb-18 {
+  margin-bottom: 18rem; }
 
-.ml-21 {
-  margin-left: 21rem; }
+.ml-18 {
+  margin-left: 18rem; }
 
-.ml-22 {
-  margin-left: 22rem; }
+.mr-18 {
+  margin-right: 18rem; }
 
-.ml-23 {
-  margin-left: 23rem; }
+.p-18 {
+  padding: 18rem; }
 
-.ml-24 {
-  margin-left: 24rem; }
+.pt-18 {
+  margin-top: 18rem; }
 
-.ml-25 {
-  margin-left: 25rem; }
+.pb-18 {
+  padding-bottom: 18rem; }
 
-.ml-26 {
-  margin-left: 26rem; }
+.pl-18 {
+  padding-left: 18rem; }
 
-.ml-27 {
-  margin-left: 27rem; }
+.pr-18 {
+  padding-right: 18rem; }
 
-.ml-28 {
-  margin-left: 28rem; }
+.w-19 {
+  width: 19rem; }
 
-.ml-29 {
-  margin-left: 29rem; }
+.h-19 {
+  height: 19rem; }
 
-.ml-30 {
-  margin-left: 30rem; }
+.m-19 {
+  margin: 19rem; }
 
-.ml-31 {
-  margin-left: 31rem; }
+.mt-19 {
+  margin-top: 19rem; }
 
-.ml-32 {
-  margin-left: 32rem; }
+.mb-19 {
+  margin-bottom: 19rem; }
 
-.ml-33 {
-  margin-left: 33rem; }
+.ml-19 {
+  margin-left: 19rem; }
 
-.ml-34 {
-  margin-left: 34rem; }
+.mr-19 {
+  margin-right: 19rem; }
 
-.ml-35 {
-  margin-left: 35rem; }
+.p-19 {
+  padding: 19rem; }
 
-.ml-36 {
-  margin-left: 36rem; }
+.pt-19 {
+  margin-top: 19rem; }
 
-.ml-37 {
-  margin-left: 37rem; }
+.pb-19 {
+  padding-bottom: 19rem; }
 
-.ml-38 {
-  margin-left: 38rem; }
+.pl-19 {
+  padding-left: 19rem; }
 
-.ml-39 {
-  margin-left: 39rem; }
+.pr-19 {
+  padding-right: 19rem; }
 
-.ml-40 {
-  margin-left: 40rem; }
+.w-20 {
+  width: 20rem; }
 
-.ml-41 {
-  margin-left: 41rem; }
+.h-20 {
+  height: 20rem; }
 
-.ml-42 {
-  margin-left: 42rem; }
+.m-20 {
+  margin: 20rem; }
 
-.ml-43 {
-  margin-left: 43rem; }
+.mt-20 {
+  margin-top: 20rem; }
 
-.ml-44 {
-  margin-left: 44rem; }
+.mb-20 {
+  margin-bottom: 20rem; }
 
-.ml-45 {
-  margin-left: 45rem; }
+.ml-20 {
+  margin-left: 20rem; }
 
-.ml-46 {
-  margin-left: 46rem; }
+.mr-20 {
+  margin-right: 20rem; }
 
-.ml-47 {
-  margin-left: 47rem; }
+.p-20 {
+  padding: 20rem; }
 
-.ml-48 {
-  margin-left: 48rem; }
+.pt-20 {
+  margin-top: 20rem; }
 
-.ml-49 {
-  margin-left: 49rem; }
+.pb-20 {
+  padding-bottom: 20rem; }
 
-.ml-50 {
-  margin-left: 50rem; }
+.pl-20 {
+  padding-left: 20rem; }
 
-.ml-51 {
-  margin-left: 51rem; }
+.pr-20 {
+  padding-right: 20rem; }
 
-.ml-52 {
-  margin-left: 52rem; }
+.w-21 {
+  width: 21rem; }
 
-.ml-53 {
-  margin-left: 53rem; }
+.h-21 {
+  height: 21rem; }
 
-.ml-54 {
-  margin-left: 54rem; }
+.m-21 {
+  margin: 21rem; }
 
-.ml-55 {
-  margin-left: 55rem; }
+.mt-21 {
+  margin-top: 21rem; }
 
-.ml-56 {
-  margin-left: 56rem; }
+.mb-21 {
+  margin-bottom: 21rem; }
 
-.ml-57 {
-  margin-left: 57rem; }
+.ml-21 {
+  margin-left: 21rem; }
 
-.ml-58 {
-  margin-left: 58rem; }
+.mr-21 {
+  margin-right: 21rem; }
 
-.ml-59 {
-  margin-left: 59rem; }
+.p-21 {
+  padding: 21rem; }
 
-.ml-60 {
-  margin-left: 60rem; }
+.pt-21 {
+  margin-top: 21rem; }
 
-.ml-61 {
-  margin-left: 61rem; }
+.pb-21 {
+  padding-bottom: 21rem; }
 
-.ml-62 {
-  margin-left: 62rem; }
+.pl-21 {
+  padding-left: 21rem; }
 
-.ml-63 {
-  margin-left: 63rem; }
+.pr-21 {
+  padding-right: 21rem; }
 
-.ml-64 {
-  margin-left: 64rem; }
+.w-22 {
+  width: 22rem; }
 
-.ml-65 {
-  margin-left: 65rem; }
+.h-22 {
+  height: 22rem; }
 
-.ml-66 {
-  margin-left: 66rem; }
+.m-22 {
+  margin: 22rem; }
 
-.ml-67 {
-  margin-left: 67rem; }
+.mt-22 {
+  margin-top: 22rem; }
 
-.ml-68 {
-  margin-left: 68rem; }
+.mb-22 {
+  margin-bottom: 22rem; }
 
-.ml-69 {
-  margin-left: 69rem; }
+.ml-22 {
+  margin-left: 22rem; }
 
-.ml-70 {
-  margin-left: 70rem; }
+.mr-22 {
+  margin-right: 22rem; }
 
-.ml-71 {
-  margin-left: 71rem; }
+.p-22 {
+  padding: 22rem; }
 
-.ml-72 {
-  margin-left: 72rem; }
+.pt-22 {
+  margin-top: 22rem; }
 
-.ml-73 {
-  margin-left: 73rem; }
+.pb-22 {
+  padding-bottom: 22rem; }
 
-.ml-74 {
-  margin-left: 74rem; }
+.pl-22 {
+  padding-left: 22rem; }
 
-.ml-75 {
-  margin-left: 75rem; }
+.pr-22 {
+  padding-right: 22rem; }
 
-.ml-76 {
-  margin-left: 76rem; }
+.w-23 {
+  width: 23rem; }
 
-.ml-77 {
-  margin-left: 77rem; }
+.h-23 {
+  height: 23rem; }
 
-.ml-78 {
-  margin-left: 78rem; }
+.m-23 {
+  margin: 23rem; }
 
-.ml-79 {
-  margin-left: 79rem; }
+.mt-23 {
+  margin-top: 23rem; }
 
-.ml-80 {
-  margin-left: 80rem; }
+.mb-23 {
+  margin-bottom: 23rem; }
 
-.ml-81 {
-  margin-left: 81rem; }
+.ml-23 {
+  margin-left: 23rem; }
 
-.ml-82 {
-  margin-left: 82rem; }
+.mr-23 {
+  margin-right: 23rem; }
 
-.ml-83 {
-  margin-left: 83rem; }
+.p-23 {
+  padding: 23rem; }
 
-.ml-84 {
-  margin-left: 84rem; }
+.pt-23 {
+  margin-top: 23rem; }
 
-.ml-85 {
-  margin-left: 85rem; }
+.pb-23 {
+  padding-bottom: 23rem; }
 
-.ml-86 {
-  margin-left: 86rem; }
+.pl-23 {
+  padding-left: 23rem; }
 
-.ml-87 {
-  margin-left: 87rem; }
+.pr-23 {
+  padding-right: 23rem; }
 
-.ml-88 {
-  margin-left: 88rem; }
+.w-24 {
+  width: 24rem; }
 
-.ml-89 {
-  margin-left: 89rem; }
+.h-24 {
+  height: 24rem; }
 
-.ml-90 {
-  margin-left: 90rem; }
+.m-24 {
+  margin: 24rem; }
 
-.ml-91 {
-  margin-left: 91rem; }
+.mt-24 {
+  margin-top: 24rem; }
 
-.ml-92 {
-  margin-left: 92rem; }
+.mb-24 {
+  margin-bottom: 24rem; }
 
-.ml-93 {
-  margin-left: 93rem; }
+.ml-24 {
+  margin-left: 24rem; }
 
-.ml-94 {
-  margin-left: 94rem; }
+.mr-24 {
+  margin-right: 24rem; }
 
-.ml-95 {
-  margin-left: 95rem; }
+.p-24 {
+  padding: 24rem; }
 
-.ml-96 {
-  margin-left: 96rem; }
+.pt-24 {
+  margin-top: 24rem; }
 
-.ml-97 {
-  margin-left: 97rem; }
+.pb-24 {
+  padding-bottom: 24rem; }
 
-.ml-98 {
-  margin-left: 98rem; }
+.pl-24 {
+  padding-left: 24rem; }
 
-.ml-99 {
-  margin-left: 99rem; }
+.pr-24 {
+  padding-right: 24rem; }
 
-.mr-0 {
-  margin-right: 0rem; }
+.w-25 {
+  width: 25rem; }
 
-.mr-1 {
-  margin-right: 1rem; }
+.h-25 {
+  height: 25rem; }
 
-.mr-2 {
-  margin-right: 2rem; }
+.m-25 {
+  margin: 25rem; }
 
-.mr-3 {
-  margin-right: 3rem; }
+.mt-25 {
+  margin-top: 25rem; }
 
-.mr-4 {
-  margin-right: 4rem; }
+.mb-25 {
+  margin-bottom: 25rem; }
 
-.mr-5 {
-  margin-right: 5rem; }
+.ml-25 {
+  margin-left: 25rem; }
 
-.mr-6 {
-  margin-right: 6rem; }
+.mr-25 {
+  margin-right: 25rem; }
 
-.mr-7 {
-  margin-right: 7rem; }
+.p-25 {
+  padding: 25rem; }
 
-.mr-8 {
-  margin-right: 8rem; }
+.pt-25 {
+  margin-top: 25rem; }
 
-.mr-9 {
-  margin-right: 9rem; }
+.pb-25 {
+  padding-bottom: 25rem; }
 
-.mr-10 {
-  margin-right: 10rem; }
+.pl-25 {
+  padding-left: 25rem; }
 
-.mr-11 {
-  margin-right: 11rem; }
+.pr-25 {
+  padding-right: 25rem; }
 
-.mr-12 {
-  margin-right: 12rem; }
+.w-26 {
+  width: 26rem; }
 
-.mr-13 {
-  margin-right: 13rem; }
+.h-26 {
+  height: 26rem; }
 
-.mr-14 {
-  margin-right: 14rem; }
+.m-26 {
+  margin: 26rem; }
 
-.mr-15 {
-  margin-right: 15rem; }
+.mt-26 {
+  margin-top: 26rem; }
 
-.mr-16 {
-  margin-right: 16rem; }
+.mb-26 {
+  margin-bottom: 26rem; }
 
-.mr-17 {
-  margin-right: 17rem; }
+.ml-26 {
+  margin-left: 26rem; }
 
-.mr-18 {
-  margin-right: 18rem; }
+.mr-26 {
+  margin-right: 26rem; }
 
-.mr-19 {
-  margin-right: 19rem; }
+.p-26 {
+  padding: 26rem; }
 
-.mr-20 {
-  margin-right: 20rem; }
+.pt-26 {
+  margin-top: 26rem; }
 
-.mr-21 {
-  margin-right: 21rem; }
+.pb-26 {
+  padding-bottom: 26rem; }
 
-.mr-22 {
-  margin-right: 22rem; }
+.pl-26 {
+  padding-left: 26rem; }
 
-.mr-23 {
-  margin-right: 23rem; }
+.pr-26 {
+  padding-right: 26rem; }
 
-.mr-24 {
-  margin-right: 24rem; }
+.w-27 {
+  width: 27rem; }
 
-.mr-25 {
-  margin-right: 25rem; }
+.h-27 {
+  height: 27rem; }
 
-.mr-26 {
-  margin-right: 26rem; }
+.m-27 {
+  margin: 27rem; }
 
-.mr-27 {
-  margin-right: 27rem; }
+.mt-27 {
+  margin-top: 27rem; }
 
-.mr-28 {
-  margin-right: 28rem; }
+.mb-27 {
+  margin-bottom: 27rem; }
 
-.mr-29 {
-  margin-right: 29rem; }
+.ml-27 {
+  margin-left: 27rem; }
 
-.mr-30 {
-  margin-right: 30rem; }
+.mr-27 {
+  margin-right: 27rem; }
 
-.mr-31 {
-  margin-right: 31rem; }
+.p-27 {
+  padding: 27rem; }
 
-.mr-32 {
-  margin-right: 32rem; }
+.pt-27 {
+  margin-top: 27rem; }
 
-.mr-33 {
-  margin-right: 33rem; }
+.pb-27 {
+  padding-bottom: 27rem; }
 
-.mr-34 {
-  margin-right: 34rem; }
+.pl-27 {
+  padding-left: 27rem; }
 
-.mr-35 {
-  margin-right: 35rem; }
+.pr-27 {
+  padding-right: 27rem; }
 
-.mr-36 {
-  margin-right: 36rem; }
+.w-28 {
+  width: 28rem; }
 
-.mr-37 {
-  margin-right: 37rem; }
+.h-28 {
+  height: 28rem; }
 
-.mr-38 {
-  margin-right: 38rem; }
+.m-28 {
+  margin: 28rem; }
 
-.mr-39 {
-  margin-right: 39rem; }
+.mt-28 {
+  margin-top: 28rem; }
 
-.mr-40 {
-  margin-right: 40rem; }
+.mb-28 {
+  margin-bottom: 28rem; }
 
-.mr-41 {
-  margin-right: 41rem; }
+.ml-28 {
+  margin-left: 28rem; }
 
-.mr-42 {
-  margin-right: 42rem; }
+.mr-28 {
+  margin-right: 28rem; }
 
-.mr-43 {
-  margin-right: 43rem; }
+.p-28 {
+  padding: 28rem; }
 
-.mr-44 {
-  margin-right: 44rem; }
+.pt-28 {
+  margin-top: 28rem; }
 
-.mr-45 {
-  margin-right: 45rem; }
+.pb-28 {
+  padding-bottom: 28rem; }
 
-.mr-46 {
-  margin-right: 46rem; }
+.pl-28 {
+  padding-left: 28rem; }
 
-.mr-47 {
-  margin-right: 47rem; }
+.pr-28 {
+  padding-right: 28rem; }
 
-.mr-48 {
-  margin-right: 48rem; }
+.w-29 {
+  width: 29rem; }
 
-.mr-49 {
-  margin-right: 49rem; }
+.h-29 {
+  height: 29rem; }
 
-.mr-50 {
-  margin-right: 50rem; }
+.m-29 {
+  margin: 29rem; }
 
-.mr-51 {
-  margin-right: 51rem; }
+.mt-29 {
+  margin-top: 29rem; }
 
-.mr-52 {
-  margin-right: 52rem; }
+.mb-29 {
+  margin-bottom: 29rem; }
 
-.mr-53 {
-  margin-right: 53rem; }
+.ml-29 {
+  margin-left: 29rem; }
 
-.mr-54 {
-  margin-right: 54rem; }
+.mr-29 {
+  margin-right: 29rem; }
 
-.mr-55 {
-  margin-right: 55rem; }
+.p-29 {
+  padding: 29rem; }
 
-.mr-56 {
-  margin-right: 56rem; }
+.pt-29 {
+  margin-top: 29rem; }
 
-.mr-57 {
-  margin-right: 57rem; }
+.pb-29 {
+  padding-bottom: 29rem; }
 
-.mr-58 {
-  margin-right: 58rem; }
+.pl-29 {
+  padding-left: 29rem; }
 
-.mr-59 {
-  margin-right: 59rem; }
+.pr-29 {
+  padding-right: 29rem; }
 
-.mr-60 {
-  margin-right: 60rem; }
+.w-30 {
+  width: 30rem; }
 
-.mr-61 {
-  margin-right: 61rem; }
+.h-30 {
+  height: 30rem; }
 
-.mr-62 {
-  margin-right: 62rem; }
+.m-30 {
+  margin: 30rem; }
 
-.mr-63 {
-  margin-right: 63rem; }
+.mt-30 {
+  margin-top: 30rem; }
 
-.mr-64 {
-  margin-right: 64rem; }
+.mb-30 {
+  margin-bottom: 30rem; }
 
-.mr-65 {
-  margin-right: 65rem; }
+.ml-30 {
+  margin-left: 30rem; }
 
-.mr-66 {
-  margin-right: 66rem; }
+.mr-30 {
+  margin-right: 30rem; }
 
-.mr-67 {
-  margin-right: 67rem; }
+.p-30 {
+  padding: 30rem; }
 
-.mr-68 {
-  margin-right: 68rem; }
+.pt-30 {
+  margin-top: 30rem; }
 
-.mr-69 {
-  margin-right: 69rem; }
+.pb-30 {
+  padding-bottom: 30rem; }
 
-.mr-70 {
-  margin-right: 70rem; }
+.pl-30 {
+  padding-left: 30rem; }
 
-.mr-71 {
-  margin-right: 71rem; }
+.pr-30 {
+  padding-right: 30rem; }
 
-.mr-72 {
-  margin-right: 72rem; }
+.w-31 {
+  width: 31rem; }
 
-.mr-73 {
-  margin-right: 73rem; }
+.h-31 {
+  height: 31rem; }
 
-.mr-74 {
-  margin-right: 74rem; }
+.m-31 {
+  margin: 31rem; }
 
-.mr-75 {
-  margin-right: 75rem; }
+.mt-31 {
+  margin-top: 31rem; }
 
-.mr-76 {
-  margin-right: 76rem; }
+.mb-31 {
+  margin-bottom: 31rem; }
 
-.mr-77 {
-  margin-right: 77rem; }
+.ml-31 {
+  margin-left: 31rem; }
 
-.mr-78 {
-  margin-right: 78rem; }
+.mr-31 {
+  margin-right: 31rem; }
 
-.mr-79 {
-  margin-right: 79rem; }
+.p-31 {
+  padding: 31rem; }
 
-.mr-80 {
-  margin-right: 80rem; }
+.pt-31 {
+  margin-top: 31rem; }
 
-.mr-81 {
-  margin-right: 81rem; }
+.pb-31 {
+  padding-bottom: 31rem; }
 
-.mr-82 {
-  margin-right: 82rem; }
+.pl-31 {
+  padding-left: 31rem; }
 
-.mr-83 {
-  margin-right: 83rem; }
+.pr-31 {
+  padding-right: 31rem; }
 
-.mr-84 {
-  margin-right: 84rem; }
+.w-32 {
+  width: 32rem; }
 
-.mr-85 {
-  margin-right: 85rem; }
-
-.mr-86 {
-  margin-right: 86rem; }
+.h-32 {
+  height: 32rem; }
 
-.mr-87 {
-  margin-right: 87rem; }
+.m-32 {
+  margin: 32rem; }
 
-.mr-88 {
-  margin-right: 88rem; }
+.mt-32 {
+  margin-top: 32rem; }
 
-.mr-89 {
-  margin-right: 89rem; }
+.mb-32 {
+  margin-bottom: 32rem; }
 
-.mr-90 {
-  margin-right: 90rem; }
+.ml-32 {
+  margin-left: 32rem; }
 
-.mr-91 {
-  margin-right: 91rem; }
+.mr-32 {
+  margin-right: 32rem; }
 
-.mr-92 {
-  margin-right: 92rem; }
+.p-32 {
+  padding: 32rem; }
 
-.mr-93 {
-  margin-right: 93rem; }
+.pt-32 {
+  margin-top: 32rem; }
 
-.mr-94 {
-  margin-right: 94rem; }
+.pb-32 {
+  padding-bottom: 32rem; }
 
-.mr-95 {
-  margin-right: 95rem; }
+.pl-32 {
+  padding-left: 32rem; }
 
-.mr-96 {
-  margin-right: 96rem; }
+.pr-32 {
+  padding-right: 32rem; }
 
-.mr-97 {
-  margin-right: 97rem; }
+.w-33 {
+  width: 33rem; }
 
-.mr-98 {
-  margin-right: 98rem; }
+.h-33 {
+  height: 33rem; }
 
-.mr-99 {
-  margin-right: 99rem; }
+.m-33 {
+  margin: 33rem; }
 
-.mt-0 {
-  margin-top: 0rem; }
+.mt-33 {
+  margin-top: 33rem; }
 
-.mt-1 {
-  margin-top: 1rem; }
+.mb-33 {
+  margin-bottom: 33rem; }
 
-.mt-2 {
-  margin-top: 2rem; }
+.ml-33 {
+  margin-left: 33rem; }
 
-.mt-3 {
-  margin-top: 3rem; }
+.mr-33 {
+  margin-right: 33rem; }
 
-.mt-4 {
-  margin-top: 4rem; }
+.p-33 {
+  padding: 33rem; }
 
-.mt-5 {
-  margin-top: 5rem; }
+.pt-33 {
+  margin-top: 33rem; }
 
-.mt-6 {
-  margin-top: 6rem; }
+.pb-33 {
+  padding-bottom: 33rem; }
 
-.mt-7 {
-  margin-top: 7rem; }
+.pl-33 {
+  padding-left: 33rem; }
 
-.mt-8 {
-  margin-top: 8rem; }
+.pr-33 {
+  padding-right: 33rem; }
 
-.mt-9 {
-  margin-top: 9rem; }
+.w-34 {
+  width: 34rem; }
 
-.mt-10 {
-  margin-top: 10rem; }
+.h-34 {
+  height: 34rem; }
 
-.mt-11 {
-  margin-top: 11rem; }
+.m-34 {
+  margin: 34rem; }
 
-.mt-12 {
-  margin-top: 12rem; }
+.mt-34 {
+  margin-top: 34rem; }
 
-.mt-13 {
-  margin-top: 13rem; }
+.mb-34 {
+  margin-bottom: 34rem; }
 
-.mt-14 {
-  margin-top: 14rem; }
+.ml-34 {
+  margin-left: 34rem; }
 
-.mt-15 {
-  margin-top: 15rem; }
+.mr-34 {
+  margin-right: 34rem; }
 
-.mt-16 {
-  margin-top: 16rem; }
+.p-34 {
+  padding: 34rem; }
 
-.mt-17 {
-  margin-top: 17rem; }
+.pt-34 {
+  margin-top: 34rem; }
 
-.mt-18 {
-  margin-top: 18rem; }
+.pb-34 {
+  padding-bottom: 34rem; }
 
-.mt-19 {
-  margin-top: 19rem; }
+.pl-34 {
+  padding-left: 34rem; }
 
-.mt-20 {
-  margin-top: 20rem; }
+.pr-34 {
+  padding-right: 34rem; }
 
-.mt-21 {
-  margin-top: 21rem; }
+.w-35 {
+  width: 35rem; }
 
-.mt-22 {
-  margin-top: 22rem; }
+.h-35 {
+  height: 35rem; }
 
-.mt-23 {
-  margin-top: 23rem; }
+.m-35 {
+  margin: 35rem; }
 
-.mt-24 {
-  margin-top: 24rem; }
+.mt-35 {
+  margin-top: 35rem; }
 
-.mt-25 {
-  margin-top: 25rem; }
+.mb-35 {
+  margin-bottom: 35rem; }
 
-.mt-26 {
-  margin-top: 26rem; }
+.ml-35 {
+  margin-left: 35rem; }
 
-.mt-27 {
-  margin-top: 27rem; }
+.mr-35 {
+  margin-right: 35rem; }
 
-.mt-28 {
-  margin-top: 28rem; }
+.p-35 {
+  padding: 35rem; }
 
-.mt-29 {
-  margin-top: 29rem; }
+.pt-35 {
+  margin-top: 35rem; }
 
-.mt-30 {
-  margin-top: 30rem; }
+.pb-35 {
+  padding-bottom: 35rem; }
 
-.mt-31 {
-  margin-top: 31rem; }
+.pl-35 {
+  padding-left: 35rem; }
 
-.mt-32 {
-  margin-top: 32rem; }
+.pr-35 {
+  padding-right: 35rem; }
 
-.mt-33 {
-  margin-top: 33rem; }
+.w-36 {
+  width: 36rem; }
 
-.mt-34 {
-  margin-top: 34rem; }
+.h-36 {
+  height: 36rem; }
 
-.mt-35 {
-  margin-top: 35rem; }
+.m-36 {
+  margin: 36rem; }
 
 .mt-36 {
   margin-top: 36rem; }
 
-.mt-37 {
-  margin-top: 37rem; }
+.mb-36 {
+  margin-bottom: 36rem; }
 
-.mt-38 {
-  margin-top: 38rem; }
+.ml-36 {
+  margin-left: 36rem; }
 
-.mt-39 {
-  margin-top: 39rem; }
+.mr-36 {
+  margin-right: 36rem; }
 
-.mt-40 {
-  margin-top: 40rem; }
+.p-36 {
+  padding: 36rem; }
 
-.mt-41 {
-  margin-top: 41rem; }
+.pt-36 {
+  margin-top: 36rem; }
 
-.mt-42 {
-  margin-top: 42rem; }
+.pb-36 {
+  padding-bottom: 36rem; }
 
-.mt-43 {
-  margin-top: 43rem; }
+.pl-36 {
+  padding-left: 36rem; }
 
-.mt-44 {
-  margin-top: 44rem; }
+.pr-36 {
+  padding-right: 36rem; }
 
-.mt-45 {
-  margin-top: 45rem; }
+.w-37 {
+  width: 37rem; }
 
-.mt-46 {
-  margin-top: 46rem; }
+.h-37 {
+  height: 37rem; }
 
-.mt-47 {
-  margin-top: 47rem; }
+.m-37 {
+  margin: 37rem; }
 
-.mt-48 {
-  margin-top: 48rem; }
+.mt-37 {
+  margin-top: 37rem; }
 
-.mt-49 {
-  margin-top: 49rem; }
+.mb-37 {
+  margin-bottom: 37rem; }
 
-.mt-50 {
-  margin-top: 50rem; }
+.ml-37 {
+  margin-left: 37rem; }
 
-.mt-51 {
-  margin-top: 51rem; }
+.mr-37 {
+  margin-right: 37rem; }
 
-.mt-52 {
-  margin-top: 52rem; }
+.p-37 {
+  padding: 37rem; }
 
-.mt-53 {
-  margin-top: 53rem; }
+.pt-37 {
+  margin-top: 37rem; }
 
-.mt-54 {
-  margin-top: 54rem; }
+.pb-37 {
+  padding-bottom: 37rem; }
 
-.mt-55 {
-  margin-top: 55rem; }
+.pl-37 {
+  padding-left: 37rem; }
 
-.mt-56 {
-  margin-top: 56rem; }
+.pr-37 {
+  padding-right: 37rem; }
 
-.mt-57 {
-  margin-top: 57rem; }
+.w-38 {
+  width: 38rem; }
 
-.mt-58 {
-  margin-top: 58rem; }
+.h-38 {
+  height: 38rem; }
 
-.mt-59 {
-  margin-top: 59rem; }
+.m-38 {
+  margin: 38rem; }
 
-.mt-60 {
-  margin-top: 60rem; }
+.mt-38 {
+  margin-top: 38rem; }
 
-.mt-61 {
-  margin-top: 61rem; }
+.mb-38 {
+  margin-bottom: 38rem; }
 
-.mt-62 {
-  margin-top: 62rem; }
+.ml-38 {
+  margin-left: 38rem; }
 
-.mt-63 {
-  margin-top: 63rem; }
+.mr-38 {
+  margin-right: 38rem; }
 
-.mt-64 {
-  margin-top: 64rem; }
+.p-38 {
+  padding: 38rem; }
 
-.mt-65 {
-  margin-top: 65rem; }
+.pt-38 {
+  margin-top: 38rem; }
 
-.mt-66 {
-  margin-top: 66rem; }
+.pb-38 {
+  padding-bottom: 38rem; }
 
-.mt-67 {
-  margin-top: 67rem; }
+.pl-38 {
+  padding-left: 38rem; }
 
-.mt-68 {
-  margin-top: 68rem; }
+.pr-38 {
+  padding-right: 38rem; }
 
-.mt-69 {
-  margin-top: 69rem; }
+.w-39 {
+  width: 39rem; }
 
-.mt-70 {
-  margin-top: 70rem; }
+.h-39 {
+  height: 39rem; }
 
-.mt-71 {
-  margin-top: 71rem; }
+.m-39 {
+  margin: 39rem; }
 
-.mt-72 {
-  margin-top: 72rem; }
+.mt-39 {
+  margin-top: 39rem; }
 
-.mt-73 {
-  margin-top: 73rem; }
+.mb-39 {
+  margin-bottom: 39rem; }
 
-.mt-74 {
-  margin-top: 74rem; }
+.ml-39 {
+  margin-left: 39rem; }
 
-.mt-75 {
-  margin-top: 75rem; }
+.mr-39 {
+  margin-right: 39rem; }
 
-.mt-76 {
-  margin-top: 76rem; }
+.p-39 {
+  padding: 39rem; }
 
-.mt-77 {
-  margin-top: 77rem; }
+.pt-39 {
+  margin-top: 39rem; }
 
-.mt-78 {
-  margin-top: 78rem; }
+.pb-39 {
+  padding-bottom: 39rem; }
 
-.mt-79 {
-  margin-top: 79rem; }
+.pl-39 {
+  padding-left: 39rem; }
 
-.mt-80 {
-  margin-top: 80rem; }
+.pr-39 {
+  padding-right: 39rem; }
 
-.mt-81 {
-  margin-top: 81rem; }
+.w-40 {
+  width: 40rem; }
 
-.mt-82 {
-  margin-top: 82rem; }
+.h-40 {
+  height: 40rem; }
 
-.mt-83 {
-  margin-top: 83rem; }
+.m-40 {
+  margin: 40rem; }
 
-.mt-84 {
-  margin-top: 84rem; }
+.mt-40 {
+  margin-top: 40rem; }
 
-.mt-85 {
-  margin-top: 85rem; }
+.mb-40 {
+  margin-bottom: 40rem; }
 
-.mt-86 {
-  margin-top: 86rem; }
+.ml-40 {
+  margin-left: 40rem; }
 
-.mt-87 {
-  margin-top: 87rem; }
+.mr-40 {
+  margin-right: 40rem; }
 
-.mt-88 {
-  margin-top: 88rem; }
+.p-40 {
+  padding: 40rem; }
 
-.mt-89 {
-  margin-top: 89rem; }
+.pt-40 {
+  margin-top: 40rem; }
 
-.mt-90 {
-  margin-top: 90rem; }
+.pb-40 {
+  padding-bottom: 40rem; }
 
-.mt-91 {
-  margin-top: 91rem; }
+.pl-40 {
+  padding-left: 40rem; }
 
-.mt-92 {
-  margin-top: 92rem; }
+.pr-40 {
+  padding-right: 40rem; }
 
-.mt-93 {
-  margin-top: 93rem; }
+.w-41 {
+  width: 41rem; }
 
-.mt-94 {
-  margin-top: 94rem; }
+.h-41 {
+  height: 41rem; }
 
-.mt-95 {
-  margin-top: 95rem; }
+.m-41 {
+  margin: 41rem; }
 
-.mt-96 {
-  margin-top: 96rem; }
+.mt-41 {
+  margin-top: 41rem; }
 
-.mt-97 {
-  margin-top: 97rem; }
+.mb-41 {
+  margin-bottom: 41rem; }
 
-.mt-98 {
-  margin-top: 98rem; }
+.ml-41 {
+  margin-left: 41rem; }
 
-.mt-99 {
-  margin-top: 99rem; }
+.mr-41 {
+  margin-right: 41rem; }
 
-.mb-0 {
-  margin-bottom: 0rem; }
+.p-41 {
+  padding: 41rem; }
 
-.mb-1 {
-  margin-bottom: 1rem; }
+.pt-41 {
+  margin-top: 41rem; }
 
-.mb-2 {
-  margin-bottom: 2rem; }
+.pb-41 {
+  padding-bottom: 41rem; }
 
-.mb-3 {
-  margin-bottom: 3rem; }
+.pl-41 {
+  padding-left: 41rem; }
 
-.mb-4 {
-  margin-bottom: 4rem; }
+.pr-41 {
+  padding-right: 41rem; }
 
-.mb-5 {
-  margin-bottom: 5rem; }
+.w-42 {
+  width: 42rem; }
 
-.mb-6 {
-  margin-bottom: 6rem; }
+.h-42 {
+  height: 42rem; }
 
-.mb-7 {
-  margin-bottom: 7rem; }
+.m-42 {
+  margin: 42rem; }
 
-.mb-8 {
-  margin-bottom: 8rem; }
+.mt-42 {
+  margin-top: 42rem; }
 
-.mb-9 {
-  margin-bottom: 9rem; }
+.mb-42 {
+  margin-bottom: 42rem; }
 
-.mb-10 {
-  margin-bottom: 10rem; }
+.ml-42 {
+  margin-left: 42rem; }
 
-.mb-11 {
-  margin-bottom: 11rem; }
+.mr-42 {
+  margin-right: 42rem; }
 
-.mb-12 {
-  margin-bottom: 12rem; }
+.p-42 {
+  padding: 42rem; }
 
-.mb-13 {
-  margin-bottom: 13rem; }
+.pt-42 {
+  margin-top: 42rem; }
 
-.mb-14 {
-  margin-bottom: 14rem; }
+.pb-42 {
+  padding-bottom: 42rem; }
 
-.mb-15 {
-  margin-bottom: 15rem; }
+.pl-42 {
+  padding-left: 42rem; }
 
-.mb-16 {
-  margin-bottom: 16rem; }
+.pr-42 {
+  padding-right: 42rem; }
 
-.mb-17 {
-  margin-bottom: 17rem; }
+.w-43 {
+  width: 43rem; }
 
-.mb-18 {
-  margin-bottom: 18rem; }
+.h-43 {
+  height: 43rem; }
 
-.mb-19 {
-  margin-bottom: 19rem; }
+.m-43 {
+  margin: 43rem; }
 
-.mb-20 {
-  margin-bottom: 20rem; }
+.mt-43 {
+  margin-top: 43rem; }
 
-.mb-21 {
-  margin-bottom: 21rem; }
+.mb-43 {
+  margin-bottom: 43rem; }
 
-.mb-22 {
-  margin-bottom: 22rem; }
+.ml-43 {
+  margin-left: 43rem; }
 
-.mb-23 {
-  margin-bottom: 23rem; }
+.mr-43 {
+  margin-right: 43rem; }
 
-.mb-24 {
-  margin-bottom: 24rem; }
+.p-43 {
+  padding: 43rem; }
 
-.mb-25 {
-  margin-bottom: 25rem; }
+.pt-43 {
+  margin-top: 43rem; }
 
-.mb-26 {
-  margin-bottom: 26rem; }
+.pb-43 {
+  padding-bottom: 43rem; }
 
-.mb-27 {
-  margin-bottom: 27rem; }
+.pl-43 {
+  padding-left: 43rem; }
 
-.mb-28 {
-  margin-bottom: 28rem; }
+.pr-43 {
+  padding-right: 43rem; }
 
-.mb-29 {
-  margin-bottom: 29rem; }
+.w-44 {
+  width: 44rem; }
 
-.mb-30 {
-  margin-bottom: 30rem; }
+.h-44 {
+  height: 44rem; }
 
-.mb-31 {
-  margin-bottom: 31rem; }
+.m-44 {
+  margin: 44rem; }
 
-.mb-32 {
-  margin-bottom: 32rem; }
+.mt-44 {
+  margin-top: 44rem; }
 
-.mb-33 {
-  margin-bottom: 33rem; }
+.mb-44 {
+  margin-bottom: 44rem; }
 
-.mb-34 {
-  margin-bottom: 34rem; }
+.ml-44 {
+  margin-left: 44rem; }
 
-.mb-35 {
-  margin-bottom: 35rem; }
+.mr-44 {
+  margin-right: 44rem; }
 
-.mb-36 {
-  margin-bottom: 36rem; }
+.p-44 {
+  padding: 44rem; }
 
-.mb-37 {
-  margin-bottom: 37rem; }
+.pt-44 {
+  margin-top: 44rem; }
 
-.mb-38 {
-  margin-bottom: 38rem; }
+.pb-44 {
+  padding-bottom: 44rem; }
 
-.mb-39 {
-  margin-bottom: 39rem; }
+.pl-44 {
+  padding-left: 44rem; }
 
-.mb-40 {
-  margin-bottom: 40rem; }
+.pr-44 {
+  padding-right: 44rem; }
 
-.mb-41 {
-  margin-bottom: 41rem; }
+.w-45 {
+  width: 45rem; }
 
-.mb-42 {
-  margin-bottom: 42rem; }
+.h-45 {
+  height: 45rem; }
 
-.mb-43 {
-  margin-bottom: 43rem; }
+.m-45 {
+  margin: 45rem; }
 
-.mb-44 {
-  margin-bottom: 44rem; }
+.mt-45 {
+  margin-top: 45rem; }
 
 .mb-45 {
   margin-bottom: 45rem; }
 
-.mb-46 {
-  margin-bottom: 46rem; }
+.ml-45 {
+  margin-left: 45rem; }
 
-.mb-47 {
-  margin-bottom: 47rem; }
+.mr-45 {
+  margin-right: 45rem; }
 
-.mb-48 {
-  margin-bottom: 48rem; }
+.p-45 {
+  padding: 45rem; }
 
-.mb-49 {
-  margin-bottom: 49rem; }
+.pt-45 {
+  margin-top: 45rem; }
 
-.mb-50 {
-  margin-bottom: 50rem; }
+.pb-45 {
+  padding-bottom: 45rem; }
 
-.mb-51 {
-  margin-bottom: 51rem; }
+.pl-45 {
+  padding-left: 45rem; }
 
-.mb-52 {
-  margin-bottom: 52rem; }
+.pr-45 {
+  padding-right: 45rem; }
 
-.mb-53 {
-  margin-bottom: 53rem; }
+.w-46 {
+  width: 46rem; }
 
-.mb-54 {
-  margin-bottom: 54rem; }
+.h-46 {
+  height: 46rem; }
 
-.mb-55 {
-  margin-bottom: 55rem; }
+.m-46 {
+  margin: 46rem; }
 
-.mb-56 {
-  margin-bottom: 56rem; }
+.mt-46 {
+  margin-top: 46rem; }
 
-.mb-57 {
-  margin-bottom: 57rem; }
+.mb-46 {
+  margin-bottom: 46rem; }
 
-.mb-58 {
-  margin-bottom: 58rem; }
+.ml-46 {
+  margin-left: 46rem; }
 
-.mb-59 {
-  margin-bottom: 59rem; }
+.mr-46 {
+  margin-right: 46rem; }
 
-.mb-60 {
-  margin-bottom: 60rem; }
+.p-46 {
+  padding: 46rem; }
 
-.mb-61 {
-  margin-bottom: 61rem; }
+.pt-46 {
+  margin-top: 46rem; }
 
-.mb-62 {
-  margin-bottom: 62rem; }
+.pb-46 {
+  padding-bottom: 46rem; }
 
-.mb-63 {
-  margin-bottom: 63rem; }
+.pl-46 {
+  padding-left: 46rem; }
 
-.mb-64 {
-  margin-bottom: 64rem; }
+.pr-46 {
+  padding-right: 46rem; }
 
-.mb-65 {
-  margin-bottom: 65rem; }
+.w-47 {
+  width: 47rem; }
 
-.mb-66 {
-  margin-bottom: 66rem; }
+.h-47 {
+  height: 47rem; }
 
-.mb-67 {
-  margin-bottom: 67rem; }
+.m-47 {
+  margin: 47rem; }
 
-.mb-68 {
-  margin-bottom: 68rem; }
+.mt-47 {
+  margin-top: 47rem; }
 
-.mb-69 {
-  margin-bottom: 69rem; }
+.mb-47 {
+  margin-bottom: 47rem; }
 
-.mb-70 {
-  margin-bottom: 70rem; }
+.ml-47 {
+  margin-left: 47rem; }
 
-.mb-71 {
-  margin-bottom: 71rem; }
+.mr-47 {
+  margin-right: 47rem; }
 
-.mb-72 {
-  margin-bottom: 72rem; }
+.p-47 {
+  padding: 47rem; }
 
-.mb-73 {
-  margin-bottom: 73rem; }
+.pt-47 {
+  margin-top: 47rem; }
 
-.mb-74 {
-  margin-bottom: 74rem; }
+.pb-47 {
+  padding-bottom: 47rem; }
 
-.mb-75 {
-  margin-bottom: 75rem; }
+.pl-47 {
+  padding-left: 47rem; }
 
-.mb-76 {
-  margin-bottom: 76rem; }
+.pr-47 {
+  padding-right: 47rem; }
 
-.mb-77 {
-  margin-bottom: 77rem; }
+.w-48 {
+  width: 48rem; }
 
-.mb-78 {
-  margin-bottom: 78rem; }
+.h-48 {
+  height: 48rem; }
 
-.mb-79 {
-  margin-bottom: 79rem; }
+.m-48 {
+  margin: 48rem; }
 
-.mb-80 {
-  margin-bottom: 80rem; }
+.mt-48 {
+  margin-top: 48rem; }
 
-.mb-81 {
-  margin-bottom: 81rem; }
+.mb-48 {
+  margin-bottom: 48rem; }
 
-.mb-82 {
-  margin-bottom: 82rem; }
+.ml-48 {
+  margin-left: 48rem; }
 
-.mb-83 {
-  margin-bottom: 83rem; }
+.mr-48 {
+  margin-right: 48rem; }
 
-.mb-84 {
-  margin-bottom: 84rem; }
+.p-48 {
+  padding: 48rem; }
 
-.mb-85 {
-  margin-bottom: 85rem; }
+.pt-48 {
+  margin-top: 48rem; }
 
-.mb-86 {
-  margin-bottom: 86rem; }
+.pb-48 {
+  padding-bottom: 48rem; }
 
-.mb-87 {
-  margin-bottom: 87rem; }
+.pl-48 {
+  padding-left: 48rem; }
 
-.mb-88 {
-  margin-bottom: 88rem; }
+.pr-48 {
+  padding-right: 48rem; }
 
-.mb-89 {
-  margin-bottom: 89rem; }
+.w-49 {
+  width: 49rem; }
 
-.mb-90 {
-  margin-bottom: 90rem; }
+.h-49 {
+  height: 49rem; }
 
-.mb-91 {
-  margin-bottom: 91rem; }
+.m-49 {
+  margin: 49rem; }
 
-.mb-92 {
-  margin-bottom: 92rem; }
+.mt-49 {
+  margin-top: 49rem; }
 
-.mb-93 {
-  margin-bottom: 93rem; }
+.mb-49 {
+  margin-bottom: 49rem; }
 
-.mb-94 {
-  margin-bottom: 94rem; }
+.ml-49 {
+  margin-left: 49rem; }
 
-.mb-95 {
-  margin-bottom: 95rem; }
+.mr-49 {
+  margin-right: 49rem; }
 
-.mb-96 {
-  margin-bottom: 96rem; }
+.p-49 {
+  padding: 49rem; }
 
-.mb-97 {
-  margin-bottom: 97rem; }
+.pt-49 {
+  margin-top: 49rem; }
 
-.mb-98 {
-  margin-bottom: 98rem; }
+.pb-49 {
+  padding-bottom: 49rem; }
 
-.mb-99 {
-  margin-bottom: 99rem; }
+.pl-49 {
+  padding-left: 49rem; }
 
-.m-0 {
-  margin: 0rem; }
+.pr-49 {
+  padding-right: 49rem; }
 
-.m-1 {
-  margin: 1rem; }
+.w-50 {
+  width: 50rem; }
 
-.m-2 {
-  margin: 2rem; }
+.h-50 {
+  height: 50rem; }
 
-.m-3 {
-  margin: 3rem; }
+.m-50 {
+  margin: 50rem; }
 
-.m-4 {
-  margin: 4rem; }
+.mt-50 {
+  margin-top: 50rem; }
 
-.m-5 {
-  margin: 5rem; }
+.mb-50 {
+  margin-bottom: 50rem; }
 
-.m-6 {
-  margin: 6rem; }
+.ml-50 {
+  margin-left: 50rem; }
 
-.m-7 {
-  margin: 7rem; }
+.mr-50 {
+  margin-right: 50rem; }
 
-.m-8 {
-  margin: 8rem; }
+.p-50 {
+  padding: 50rem; }
 
-.m-9 {
-  margin: 9rem; }
+.pt-50 {
+  margin-top: 50rem; }
 
-.m-10 {
-  margin: 10rem; }
+.pb-50 {
+  padding-bottom: 50rem; }
 
-.m-11 {
-  margin: 11rem; }
+.pl-50 {
+  padding-left: 50rem; }
 
-.m-12 {
-  margin: 12rem; }
+.pr-50 {
+  padding-right: 50rem; }
 
-.m-13 {
-  margin: 13rem; }
+.w-51 {
+  width: 51rem; }
 
-.m-14 {
-  margin: 14rem; }
+.h-51 {
+  height: 51rem; }
 
-.m-15 {
-  margin: 15rem; }
+.m-51 {
+  margin: 51rem; }
 
-.m-16 {
-  margin: 16rem; }
+.mt-51 {
+  margin-top: 51rem; }
 
-.m-17 {
-  margin: 17rem; }
+.mb-51 {
+  margin-bottom: 51rem; }
 
-.m-18 {
-  margin: 18rem; }
+.ml-51 {
+  margin-left: 51rem; }
 
-.m-19 {
-  margin: 19rem; }
+.mr-51 {
+  margin-right: 51rem; }
 
-.m-20 {
-  margin: 20rem; }
+.p-51 {
+  padding: 51rem; }
 
-.m-21 {
-  margin: 21rem; }
+.pt-51 {
+  margin-top: 51rem; }
 
-.m-22 {
-  margin: 22rem; }
+.pb-51 {
+  padding-bottom: 51rem; }
 
-.m-23 {
-  margin: 23rem; }
+.pl-51 {
+  padding-left: 51rem; }
 
-.m-24 {
-  margin: 24rem; }
+.pr-51 {
+  padding-right: 51rem; }
 
-.m-25 {
-  margin: 25rem; }
+.w-52 {
+  width: 52rem; }
 
-.m-26 {
-  margin: 26rem; }
+.h-52 {
+  height: 52rem; }
 
-.m-27 {
-  margin: 27rem; }
+.m-52 {
+  margin: 52rem; }
 
-.m-28 {
-  margin: 28rem; }
+.mt-52 {
+  margin-top: 52rem; }
 
-.m-29 {
-  margin: 29rem; }
+.mb-52 {
+  margin-bottom: 52rem; }
 
-.m-30 {
-  margin: 30rem; }
+.ml-52 {
+  margin-left: 52rem; }
 
-.m-31 {
-  margin: 31rem; }
+.mr-52 {
+  margin-right: 52rem; }
 
-.m-32 {
-  margin: 32rem; }
+.p-52 {
+  padding: 52rem; }
 
-.m-33 {
-  margin: 33rem; }
+.pt-52 {
+  margin-top: 52rem; }
 
-.m-34 {
-  margin: 34rem; }
+.pb-52 {
+  padding-bottom: 52rem; }
 
-.m-35 {
-  margin: 35rem; }
+.pl-52 {
+  padding-left: 52rem; }
 
-.m-36 {
-  margin: 36rem; }
+.pr-52 {
+  padding-right: 52rem; }
 
-.m-37 {
-  margin: 37rem; }
+.w-53 {
+  width: 53rem; }
 
-.m-38 {
-  margin: 38rem; }
+.h-53 {
+  height: 53rem; }
 
-.m-39 {
-  margin: 39rem; }
+.m-53 {
+  margin: 53rem; }
 
-.m-40 {
-  margin: 40rem; }
+.mt-53 {
+  margin-top: 53rem; }
 
-.m-41 {
-  margin: 41rem; }
+.mb-53 {
+  margin-bottom: 53rem; }
 
-.m-42 {
-  margin: 42rem; }
+.ml-53 {
+  margin-left: 53rem; }
 
-.m-43 {
-  margin: 43rem; }
-
-.m-44 {
-  margin: 44rem; }
-
-.m-45 {
-  margin: 45rem; }
-
-.m-46 {
-  margin: 46rem; }
+.mr-53 {
+  margin-right: 53rem; }
 
-.m-47 {
-  margin: 47rem; }
+.p-53 {
+  padding: 53rem; }
 
-.m-48 {
-  margin: 48rem; }
+.pt-53 {
+  margin-top: 53rem; }
 
-.m-49 {
-  margin: 49rem; }
+.pb-53 {
+  padding-bottom: 53rem; }
 
-.m-50 {
-  margin: 50rem; }
+.pl-53 {
+  padding-left: 53rem; }
 
-.m-51 {
-  margin: 51rem; }
+.pr-53 {
+  padding-right: 53rem; }
 
-.m-52 {
-  margin: 52rem; }
+.w-54 {
+  width: 54rem; }
 
-.m-53 {
-  margin: 53rem; }
+.h-54 {
+  height: 54rem; }
 
 .m-54 {
   margin: 54rem; }
 
-.m-55 {
-  margin: 55rem; }
-
-.m-56 {
-  margin: 56rem; }
-
-.m-57 {
-  margin: 57rem; }
-
-.m-58 {
-  margin: 58rem; }
-
-.m-59 {
-  margin: 59rem; }
+.mt-54 {
+  margin-top: 54rem; }
 
-.m-60 {
-  margin: 60rem; }
+.mb-54 {
+  margin-bottom: 54rem; }
 
-.m-61 {
-  margin: 61rem; }
+.ml-54 {
+  margin-left: 54rem; }
 
-.m-62 {
-  margin: 62rem; }
+.mr-54 {
+  margin-right: 54rem; }
 
-.m-63 {
-  margin: 63rem; }
+.p-54 {
+  padding: 54rem; }
 
-.m-64 {
-  margin: 64rem; }
+.pt-54 {
+  margin-top: 54rem; }
 
-.m-65 {
-  margin: 65rem; }
+.pb-54 {
+  padding-bottom: 54rem; }
 
-.m-66 {
-  margin: 66rem; }
+.pl-54 {
+  padding-left: 54rem; }
 
-.m-67 {
-  margin: 67rem; }
+.pr-54 {
+  padding-right: 54rem; }
 
-.m-68 {
-  margin: 68rem; }
+.w-55 {
+  width: 55rem; }
 
-.m-69 {
-  margin: 69rem; }
+.h-55 {
+  height: 55rem; }
 
-.m-70 {
-  margin: 70rem; }
+.m-55 {
+  margin: 55rem; }
 
-.m-71 {
-  margin: 71rem; }
+.mt-55 {
+  margin-top: 55rem; }
 
-.m-72 {
-  margin: 72rem; }
+.mb-55 {
+  margin-bottom: 55rem; }
 
-.m-73 {
-  margin: 73rem; }
+.ml-55 {
+  margin-left: 55rem; }
 
-.m-74 {
-  margin: 74rem; }
+.mr-55 {
+  margin-right: 55rem; }
 
-.m-75 {
-  margin: 75rem; }
+.p-55 {
+  padding: 55rem; }
 
-.m-76 {
-  margin: 76rem; }
+.pt-55 {
+  margin-top: 55rem; }
 
-.m-77 {
-  margin: 77rem; }
+.pb-55 {
+  padding-bottom: 55rem; }
 
-.m-78 {
-  margin: 78rem; }
+.pl-55 {
+  padding-left: 55rem; }
 
-.m-79 {
-  margin: 79rem; }
+.pr-55 {
+  padding-right: 55rem; }
 
-.m-80 {
-  margin: 80rem; }
+.w-56 {
+  width: 56rem; }
 
-.m-81 {
-  margin: 81rem; }
+.h-56 {
+  height: 56rem; }
 
-.m-82 {
-  margin: 82rem; }
+.m-56 {
+  margin: 56rem; }
 
-.m-83 {
-  margin: 83rem; }
+.mt-56 {
+  margin-top: 56rem; }
 
-.m-84 {
-  margin: 84rem; }
+.mb-56 {
+  margin-bottom: 56rem; }
 
-.m-85 {
-  margin: 85rem; }
+.ml-56 {
+  margin-left: 56rem; }
 
-.m-86 {
-  margin: 86rem; }
+.mr-56 {
+  margin-right: 56rem; }
 
-.m-87 {
-  margin: 87rem; }
+.p-56 {
+  padding: 56rem; }
 
-.m-88 {
-  margin: 88rem; }
+.pt-56 {
+  margin-top: 56rem; }
 
-.m-89 {
-  margin: 89rem; }
+.pb-56 {
+  padding-bottom: 56rem; }
 
-.m-90 {
-  margin: 90rem; }
+.pl-56 {
+  padding-left: 56rem; }
 
-.m-91 {
-  margin: 91rem; }
+.pr-56 {
+  padding-right: 56rem; }
 
-.m-92 {
-  margin: 92rem; }
+.w-57 {
+  width: 57rem; }
 
-.m-93 {
-  margin: 93rem; }
+.h-57 {
+  height: 57rem; }
 
-.m-94 {
-  margin: 94rem; }
+.m-57 {
+  margin: 57rem; }
 
-.m-95 {
-  margin: 95rem; }
+.mt-57 {
+  margin-top: 57rem; }
 
-.m-96 {
-  margin: 96rem; }
+.mb-57 {
+  margin-bottom: 57rem; }
 
-.m-97 {
-  margin: 97rem; }
+.ml-57 {
+  margin-left: 57rem; }
 
-.m-98 {
-  margin: 98rem; }
+.mr-57 {
+  margin-right: 57rem; }
 
-.m-99 {
-  margin: 99rem; }
+.p-57 {
+  padding: 57rem; }
 
-/**********************
-  Padding classes
-**********************/
-.pl-0 {
-  padding-left: 0rem; }
+.pt-57 {
+  margin-top: 57rem; }
 
-.pl-1 {
-  padding-left: 1rem; }
+.pb-57 {
+  padding-bottom: 57rem; }
 
-.pl-2 {
-  padding-left: 2rem; }
+.pl-57 {
+  padding-left: 57rem; }
 
-.pl-3 {
-  padding-left: 3rem; }
+.pr-57 {
+  padding-right: 57rem; }
 
-.pl-4 {
-  padding-left: 4rem; }
+.w-58 {
+  width: 58rem; }
 
-.pl-5 {
-  padding-left: 5rem; }
+.h-58 {
+  height: 58rem; }
 
-.pl-6 {
-  padding-left: 6rem; }
+.m-58 {
+  margin: 58rem; }
 
-.pl-7 {
-  padding-left: 7rem; }
+.mt-58 {
+  margin-top: 58rem; }
 
-.pl-8 {
-  padding-left: 8rem; }
+.mb-58 {
+  margin-bottom: 58rem; }
 
-.pl-9 {
-  padding-left: 9rem; }
+.ml-58 {
+  margin-left: 58rem; }
 
-.pl-10 {
-  padding-left: 10rem; }
+.mr-58 {
+  margin-right: 58rem; }
 
-.pl-11 {
-  padding-left: 11rem; }
+.p-58 {
+  padding: 58rem; }
 
-.pl-12 {
-  padding-left: 12rem; }
+.pt-58 {
+  margin-top: 58rem; }
 
-.pl-13 {
-  padding-left: 13rem; }
+.pb-58 {
+  padding-bottom: 58rem; }
 
-.pl-14 {
-  padding-left: 14rem; }
+.pl-58 {
+  padding-left: 58rem; }
 
-.pl-15 {
-  padding-left: 15rem; }
+.pr-58 {
+  padding-right: 58rem; }
 
-.pl-16 {
-  padding-left: 16rem; }
+.w-59 {
+  width: 59rem; }
 
-.pl-17 {
-  padding-left: 17rem; }
+.h-59 {
+  height: 59rem; }
 
-.pl-18 {
-  padding-left: 18rem; }
+.m-59 {
+  margin: 59rem; }
 
-.pl-19 {
-  padding-left: 19rem; }
+.mt-59 {
+  margin-top: 59rem; }
 
-.pl-20 {
-  padding-left: 20rem; }
+.mb-59 {
+  margin-bottom: 59rem; }
 
-.pl-21 {
-  padding-left: 21rem; }
+.ml-59 {
+  margin-left: 59rem; }
 
-.pl-22 {
-  padding-left: 22rem; }
+.mr-59 {
+  margin-right: 59rem; }
 
-.pl-23 {
-  padding-left: 23rem; }
+.p-59 {
+  padding: 59rem; }
 
-.pl-24 {
-  padding-left: 24rem; }
+.pt-59 {
+  margin-top: 59rem; }
 
-.pl-25 {
-  padding-left: 25rem; }
+.pb-59 {
+  padding-bottom: 59rem; }
 
-.pl-26 {
-  padding-left: 26rem; }
+.pl-59 {
+  padding-left: 59rem; }
 
-.pl-27 {
-  padding-left: 27rem; }
+.pr-59 {
+  padding-right: 59rem; }
 
-.pl-28 {
-  padding-left: 28rem; }
+.w-60 {
+  width: 60rem; }
 
-.pl-29 {
-  padding-left: 29rem; }
+.h-60 {
+  height: 60rem; }
 
-.pl-30 {
-  padding-left: 30rem; }
+.m-60 {
+  margin: 60rem; }
 
-.pl-31 {
-  padding-left: 31rem; }
+.mt-60 {
+  margin-top: 60rem; }
 
-.pl-32 {
-  padding-left: 32rem; }
+.mb-60 {
+  margin-bottom: 60rem; }
 
-.pl-33 {
-  padding-left: 33rem; }
+.ml-60 {
+  margin-left: 60rem; }
 
-.pl-34 {
-  padding-left: 34rem; }
+.mr-60 {
+  margin-right: 60rem; }
 
-.pl-35 {
-  padding-left: 35rem; }
+.p-60 {
+  padding: 60rem; }
 
-.pl-36 {
-  padding-left: 36rem; }
+.pt-60 {
+  margin-top: 60rem; }
 
-.pl-37 {
-  padding-left: 37rem; }
+.pb-60 {
+  padding-bottom: 60rem; }
 
-.pl-38 {
-  padding-left: 38rem; }
+.pl-60 {
+  padding-left: 60rem; }
 
-.pl-39 {
-  padding-left: 39rem; }
+.pr-60 {
+  padding-right: 60rem; }
 
-.pl-40 {
-  padding-left: 40rem; }
+.w-61 {
+  width: 61rem; }
 
-.pl-41 {
-  padding-left: 41rem; }
+.h-61 {
+  height: 61rem; }
 
-.pl-42 {
-  padding-left: 42rem; }
+.m-61 {
+  margin: 61rem; }
 
-.pl-43 {
-  padding-left: 43rem; }
+.mt-61 {
+  margin-top: 61rem; }
 
-.pl-44 {
-  padding-left: 44rem; }
+.mb-61 {
+  margin-bottom: 61rem; }
 
-.pl-45 {
-  padding-left: 45rem; }
+.ml-61 {
+  margin-left: 61rem; }
 
-.pl-46 {
-  padding-left: 46rem; }
+.mr-61 {
+  margin-right: 61rem; }
 
-.pl-47 {
-  padding-left: 47rem; }
+.p-61 {
+  padding: 61rem; }
 
-.pl-48 {
-  padding-left: 48rem; }
+.pt-61 {
+  margin-top: 61rem; }
 
-.pl-49 {
-  padding-left: 49rem; }
+.pb-61 {
+  padding-bottom: 61rem; }
 
-.pl-50 {
-  padding-left: 50rem; }
+.pl-61 {
+  padding-left: 61rem; }
 
-.pl-51 {
-  padding-left: 51rem; }
+.pr-61 {
+  padding-right: 61rem; }
 
-.pl-52 {
-  padding-left: 52rem; }
+.w-62 {
+  width: 62rem; }
 
-.pl-53 {
-  padding-left: 53rem; }
+.h-62 {
+  height: 62rem; }
 
-.pl-54 {
-  padding-left: 54rem; }
+.m-62 {
+  margin: 62rem; }
 
-.pl-55 {
-  padding-left: 55rem; }
+.mt-62 {
+  margin-top: 62rem; }
 
-.pl-56 {
-  padding-left: 56rem; }
+.mb-62 {
+  margin-bottom: 62rem; }
 
-.pl-57 {
-  padding-left: 57rem; }
+.ml-62 {
+  margin-left: 62rem; }
 
-.pl-58 {
-  padding-left: 58rem; }
+.mr-62 {
+  margin-right: 62rem; }
 
-.pl-59 {
-  padding-left: 59rem; }
+.p-62 {
+  padding: 62rem; }
 
-.pl-60 {
-  padding-left: 60rem; }
+.pt-62 {
+  margin-top: 62rem; }
 
-.pl-61 {
-  padding-left: 61rem; }
+.pb-62 {
+  padding-bottom: 62rem; }
 
 .pl-62 {
   padding-left: 62rem; }
 
-.pl-63 {
-  padding-left: 63rem; }
+.pr-62 {
+  padding-right: 62rem; }
 
-.pl-64 {
-  padding-left: 64rem; }
+.w-63 {
+  width: 63rem; }
 
-.pl-65 {
-  padding-left: 65rem; }
+.h-63 {
+  height: 63rem; }
 
-.pl-66 {
-  padding-left: 66rem; }
+.m-63 {
+  margin: 63rem; }
 
-.pl-67 {
-  padding-left: 67rem; }
+.mt-63 {
+  margin-top: 63rem; }
 
-.pl-68 {
-  padding-left: 68rem; }
+.mb-63 {
+  margin-bottom: 63rem; }
 
-.pl-69 {
-  padding-left: 69rem; }
+.ml-63 {
+  margin-left: 63rem; }
 
-.pl-70 {
-  padding-left: 70rem; }
+.mr-63 {
+  margin-right: 63rem; }
 
-.pl-71 {
-  padding-left: 71rem; }
+.p-63 {
+  padding: 63rem; }
 
-.pl-72 {
-  padding-left: 72rem; }
+.pt-63 {
+  margin-top: 63rem; }
 
-.pl-73 {
-  padding-left: 73rem; }
+.pb-63 {
+  padding-bottom: 63rem; }
 
-.pl-74 {
-  padding-left: 74rem; }
+.pl-63 {
+  padding-left: 63rem; }
 
-.pl-75 {
-  padding-left: 75rem; }
+.pr-63 {
+  padding-right: 63rem; }
 
-.pl-76 {
-  padding-left: 76rem; }
+.w-64 {
+  width: 64rem; }
 
-.pl-77 {
-  padding-left: 77rem; }
+.h-64 {
+  height: 64rem; }
 
-.pl-78 {
-  padding-left: 78rem; }
+.m-64 {
+  margin: 64rem; }
 
-.pl-79 {
-  padding-left: 79rem; }
+.mt-64 {
+  margin-top: 64rem; }
 
-.pl-80 {
-  padding-left: 80rem; }
+.mb-64 {
+  margin-bottom: 64rem; }
 
-.pl-81 {
-  padding-left: 81rem; }
+.ml-64 {
+  margin-left: 64rem; }
 
-.pl-82 {
-  padding-left: 82rem; }
+.mr-64 {
+  margin-right: 64rem; }
 
-.pl-83 {
-  padding-left: 83rem; }
+.p-64 {
+  padding: 64rem; }
 
-.pl-84 {
-  padding-left: 84rem; }
+.pt-64 {
+  margin-top: 64rem; }
 
-.pl-85 {
-  padding-left: 85rem; }
+.pb-64 {
+  padding-bottom: 64rem; }
 
-.pl-86 {
-  padding-left: 86rem; }
+.pl-64 {
+  padding-left: 64rem; }
 
-.pl-87 {
-  padding-left: 87rem; }
+.pr-64 {
+  padding-right: 64rem; }
 
-.pl-88 {
-  padding-left: 88rem; }
+.w-65 {
+  width: 65rem; }
 
-.pl-89 {
-  padding-left: 89rem; }
+.h-65 {
+  height: 65rem; }
 
-.pl-90 {
-  padding-left: 90rem; }
+.m-65 {
+  margin: 65rem; }
 
-.pl-91 {
-  padding-left: 91rem; }
+.mt-65 {
+  margin-top: 65rem; }
 
-.pl-92 {
-  padding-left: 92rem; }
+.mb-65 {
+  margin-bottom: 65rem; }
 
-.pl-93 {
-  padding-left: 93rem; }
+.ml-65 {
+  margin-left: 65rem; }
 
-.pl-94 {
-  padding-left: 94rem; }
+.mr-65 {
+  margin-right: 65rem; }
 
-.pl-95 {
-  padding-left: 95rem; }
+.p-65 {
+  padding: 65rem; }
 
-.pl-96 {
-  padding-left: 96rem; }
+.pt-65 {
+  margin-top: 65rem; }
 
-.pl-97 {
-  padding-left: 97rem; }
+.pb-65 {
+  padding-bottom: 65rem; }
 
-.pl-98 {
-  padding-left: 98rem; }
+.pl-65 {
+  padding-left: 65rem; }
 
-.pl-99 {
-  padding-left: 99rem; }
+.pr-65 {
+  padding-right: 65rem; }
 
-.pr-0 {
-  padding-right: 0rem; }
+.w-66 {
+  width: 66rem; }
 
-.pr-1 {
-  padding-right: 1rem; }
+.h-66 {
+  height: 66rem; }
 
-.pr-2 {
-  padding-right: 2rem; }
+.m-66 {
+  margin: 66rem; }
 
-.pr-3 {
-  padding-right: 3rem; }
+.mt-66 {
+  margin-top: 66rem; }
 
-.pr-4 {
-  padding-right: 4rem; }
+.mb-66 {
+  margin-bottom: 66rem; }
 
-.pr-5 {
-  padding-right: 5rem; }
+.ml-66 {
+  margin-left: 66rem; }
 
-.pr-6 {
-  padding-right: 6rem; }
+.mr-66 {
+  margin-right: 66rem; }
 
-.pr-7 {
-  padding-right: 7rem; }
+.p-66 {
+  padding: 66rem; }
 
-.pr-8 {
-  padding-right: 8rem; }
+.pt-66 {
+  margin-top: 66rem; }
 
-.pr-9 {
-  padding-right: 9rem; }
+.pb-66 {
+  padding-bottom: 66rem; }
 
-.pr-10 {
-  padding-right: 10rem; }
+.pl-66 {
+  padding-left: 66rem; }
 
-.pr-11 {
-  padding-right: 11rem; }
+.pr-66 {
+  padding-right: 66rem; }
 
-.pr-12 {
-  padding-right: 12rem; }
+.w-67 {
+  width: 67rem; }
 
-.pr-13 {
-  padding-right: 13rem; }
+.h-67 {
+  height: 67rem; }
 
-.pr-14 {
-  padding-right: 14rem; }
+.m-67 {
+  margin: 67rem; }
 
-.pr-15 {
-  padding-right: 15rem; }
+.mt-67 {
+  margin-top: 67rem; }
 
-.pr-16 {
-  padding-right: 16rem; }
+.mb-67 {
+  margin-bottom: 67rem; }
 
-.pr-17 {
-  padding-right: 17rem; }
+.ml-67 {
+  margin-left: 67rem; }
 
-.pr-18 {
-  padding-right: 18rem; }
+.mr-67 {
+  margin-right: 67rem; }
 
-.pr-19 {
-  padding-right: 19rem; }
+.p-67 {
+  padding: 67rem; }
 
-.pr-20 {
-  padding-right: 20rem; }
+.pt-67 {
+  margin-top: 67rem; }
 
-.pr-21 {
-  padding-right: 21rem; }
+.pb-67 {
+  padding-bottom: 67rem; }
 
-.pr-22 {
-  padding-right: 22rem; }
+.pl-67 {
+  padding-left: 67rem; }
 
-.pr-23 {
-  padding-right: 23rem; }
+.pr-67 {
+  padding-right: 67rem; }
 
-.pr-24 {
-  padding-right: 24rem; }
+.w-68 {
+  width: 68rem; }
 
-.pr-25 {
-  padding-right: 25rem; }
+.h-68 {
+  height: 68rem; }
 
-.pr-26 {
-  padding-right: 26rem; }
+.m-68 {
+  margin: 68rem; }
 
-.pr-27 {
-  padding-right: 27rem; }
+.mt-68 {
+  margin-top: 68rem; }
 
-.pr-28 {
-  padding-right: 28rem; }
+.mb-68 {
+  margin-bottom: 68rem; }
 
-.pr-29 {
-  padding-right: 29rem; }
+.ml-68 {
+  margin-left: 68rem; }
 
-.pr-30 {
-  padding-right: 30rem; }
+.mr-68 {
+  margin-right: 68rem; }
 
-.pr-31 {
-  padding-right: 31rem; }
+.p-68 {
+  padding: 68rem; }
 
-.pr-32 {
-  padding-right: 32rem; }
+.pt-68 {
+  margin-top: 68rem; }
 
-.pr-33 {
-  padding-right: 33rem; }
+.pb-68 {
+  padding-bottom: 68rem; }
 
-.pr-34 {
-  padding-right: 34rem; }
+.pl-68 {
+  padding-left: 68rem; }
 
-.pr-35 {
-  padding-right: 35rem; }
+.pr-68 {
+  padding-right: 68rem; }
 
-.pr-36 {
-  padding-right: 36rem; }
+.w-69 {
+  width: 69rem; }
 
-.pr-37 {
-  padding-right: 37rem; }
+.h-69 {
+  height: 69rem; }
 
-.pr-38 {
-  padding-right: 38rem; }
+.m-69 {
+  margin: 69rem; }
 
-.pr-39 {
-  padding-right: 39rem; }
+.mt-69 {
+  margin-top: 69rem; }
 
-.pr-40 {
-  padding-right: 40rem; }
+.mb-69 {
+  margin-bottom: 69rem; }
 
-.pr-41 {
-  padding-right: 41rem; }
+.ml-69 {
+  margin-left: 69rem; }
 
-.pr-42 {
-  padding-right: 42rem; }
+.mr-69 {
+  margin-right: 69rem; }
 
-.pr-43 {
-  padding-right: 43rem; }
+.p-69 {
+  padding: 69rem; }
 
-.pr-44 {
-  padding-right: 44rem; }
+.pt-69 {
+  margin-top: 69rem; }
 
-.pr-45 {
-  padding-right: 45rem; }
+.pb-69 {
+  padding-bottom: 69rem; }
 
-.pr-46 {
-  padding-right: 46rem; }
+.pl-69 {
+  padding-left: 69rem; }
 
-.pr-47 {
-  padding-right: 47rem; }
+.pr-69 {
+  padding-right: 69rem; }
 
-.pr-48 {
-  padding-right: 48rem; }
+.w-70 {
+  width: 70rem; }
 
-.pr-49 {
-  padding-right: 49rem; }
+.h-70 {
+  height: 70rem; }
 
-.pr-50 {
-  padding-right: 50rem; }
+.m-70 {
+  margin: 70rem; }
 
-.pr-51 {
-  padding-right: 51rem; }
+.mt-70 {
+  margin-top: 70rem; }
 
-.pr-52 {
-  padding-right: 52rem; }
+.mb-70 {
+  margin-bottom: 70rem; }
 
-.pr-53 {
-  padding-right: 53rem; }
+.ml-70 {
+  margin-left: 70rem; }
 
-.pr-54 {
-  padding-right: 54rem; }
+.mr-70 {
+  margin-right: 70rem; }
 
-.pr-55 {
-  padding-right: 55rem; }
+.p-70 {
+  padding: 70rem; }
 
-.pr-56 {
-  padding-right: 56rem; }
+.pt-70 {
+  margin-top: 70rem; }
 
-.pr-57 {
-  padding-right: 57rem; }
+.pb-70 {
+  padding-bottom: 70rem; }
 
-.pr-58 {
-  padding-right: 58rem; }
+.pl-70 {
+  padding-left: 70rem; }
 
-.pr-59 {
-  padding-right: 59rem; }
+.pr-70 {
+  padding-right: 70rem; }
 
-.pr-60 {
-  padding-right: 60rem; }
+.w-71 {
+  width: 71rem; }
 
-.pr-61 {
-  padding-right: 61rem; }
+.h-71 {
+  height: 71rem; }
 
-.pr-62 {
-  padding-right: 62rem; }
+.m-71 {
+  margin: 71rem; }
 
-.pr-63 {
-  padding-right: 63rem; }
+.mt-71 {
+  margin-top: 71rem; }
 
-.pr-64 {
-  padding-right: 64rem; }
+.mb-71 {
+  margin-bottom: 71rem; }
 
-.pr-65 {
-  padding-right: 65rem; }
+.ml-71 {
+  margin-left: 71rem; }
 
-.pr-66 {
-  padding-right: 66rem; }
+.mr-71 {
+  margin-right: 71rem; }
 
-.pr-67 {
-  padding-right: 67rem; }
+.p-71 {
+  padding: 71rem; }
 
-.pr-68 {
-  padding-right: 68rem; }
+.pt-71 {
+  margin-top: 71rem; }
 
-.pr-69 {
-  padding-right: 69rem; }
+.pb-71 {
+  padding-bottom: 71rem; }
 
-.pr-70 {
-  padding-right: 70rem; }
+.pl-71 {
+  padding-left: 71rem; }
 
 .pr-71 {
   padding-right: 71rem; }
 
-.pr-72 {
-  padding-right: 72rem; }
+.w-72 {
+  width: 72rem; }
 
-.pr-73 {
-  padding-right: 73rem; }
+.h-72 {
+  height: 72rem; }
 
-.pr-74 {
-  padding-right: 74rem; }
+.m-72 {
+  margin: 72rem; }
 
-.pr-75 {
-  padding-right: 75rem; }
+.mt-72 {
+  margin-top: 72rem; }
 
-.pr-76 {
-  padding-right: 76rem; }
+.mb-72 {
+  margin-bottom: 72rem; }
 
-.pr-77 {
-  padding-right: 77rem; }
+.ml-72 {
+  margin-left: 72rem; }
 
-.pr-78 {
-  padding-right: 78rem; }
+.mr-72 {
+  margin-right: 72rem; }
 
-.pr-79 {
-  padding-right: 79rem; }
+.p-72 {
+  padding: 72rem; }
 
-.pr-80 {
-  padding-right: 80rem; }
+.pt-72 {
+  margin-top: 72rem; }
 
-.pr-81 {
-  padding-right: 81rem; }
+.pb-72 {
+  padding-bottom: 72rem; }
 
-.pr-82 {
-  padding-right: 82rem; }
+.pl-72 {
+  padding-left: 72rem; }
 
-.pr-83 {
-  padding-right: 83rem; }
+.pr-72 {
+  padding-right: 72rem; }
 
-.pr-84 {
-  padding-right: 84rem; }
+.w-73 {
+  width: 73rem; }
 
-.pr-85 {
-  padding-right: 85rem; }
+.h-73 {
+  height: 73rem; }
 
-.pr-86 {
-  padding-right: 86rem; }
+.m-73 {
+  margin: 73rem; }
 
-.pr-87 {
-  padding-right: 87rem; }
+.mt-73 {
+  margin-top: 73rem; }
 
-.pr-88 {
-  padding-right: 88rem; }
+.mb-73 {
+  margin-bottom: 73rem; }
 
-.pr-89 {
-  padding-right: 89rem; }
+.ml-73 {
+  margin-left: 73rem; }
 
-.pr-90 {
-  padding-right: 90rem; }
+.mr-73 {
+  margin-right: 73rem; }
 
-.pr-91 {
-  padding-right: 91rem; }
+.p-73 {
+  padding: 73rem; }
 
-.pr-92 {
-  padding-right: 92rem; }
+.pt-73 {
+  margin-top: 73rem; }
 
-.pr-93 {
-  padding-right: 93rem; }
+.pb-73 {
+  padding-bottom: 73rem; }
 
-.pr-94 {
-  padding-right: 94rem; }
+.pl-73 {
+  padding-left: 73rem; }
 
-.pr-95 {
-  padding-right: 95rem; }
+.pr-73 {
+  padding-right: 73rem; }
 
-.pr-96 {
-  padding-right: 96rem; }
+.w-74 {
+  width: 74rem; }
 
-.pr-97 {
-  padding-right: 97rem; }
+.h-74 {
+  height: 74rem; }
 
-.pr-98 {
-  padding-right: 98rem; }
+.m-74 {
+  margin: 74rem; }
 
-.pr-99 {
-  padding-right: 99rem; }
+.mt-74 {
+  margin-top: 74rem; }
 
-.pt-0 {
-  padding-top: 0rem; }
+.mb-74 {
+  margin-bottom: 74rem; }
 
-.pt-1 {
-  padding-top: 1rem; }
+.ml-74 {
+  margin-left: 74rem; }
 
-.pt-2 {
-  padding-top: 2rem; }
+.mr-74 {
+  margin-right: 74rem; }
 
-.pt-3 {
-  padding-top: 3rem; }
+.p-74 {
+  padding: 74rem; }
 
-.pt-4 {
-  padding-top: 4rem; }
+.pt-74 {
+  margin-top: 74rem; }
 
-.pt-5 {
-  padding-top: 5rem; }
+.pb-74 {
+  padding-bottom: 74rem; }
 
-.pt-6 {
-  padding-top: 6rem; }
+.pl-74 {
+  padding-left: 74rem; }
 
-.pt-7 {
-  padding-top: 7rem; }
+.pr-74 {
+  padding-right: 74rem; }
 
-.pt-8 {
-  padding-top: 8rem; }
+.w-75 {
+  width: 75rem; }
 
-.pt-9 {
-  padding-top: 9rem; }
+.h-75 {
+  height: 75rem; }
 
-.pt-10 {
-  padding-top: 10rem; }
+.m-75 {
+  margin: 75rem; }
 
-.pt-11 {
-  padding-top: 11rem; }
+.mt-75 {
+  margin-top: 75rem; }
 
-.pt-12 {
-  padding-top: 12rem; }
+.mb-75 {
+  margin-bottom: 75rem; }
 
-.pt-13 {
-  padding-top: 13rem; }
+.ml-75 {
+  margin-left: 75rem; }
 
-.pt-14 {
-  padding-top: 14rem; }
+.mr-75 {
+  margin-right: 75rem; }
 
-.pt-15 {
-  padding-top: 15rem; }
+.p-75 {
+  padding: 75rem; }
 
-.pt-16 {
-  padding-top: 16rem; }
+.pt-75 {
+  margin-top: 75rem; }
 
-.pt-17 {
-  padding-top: 17rem; }
+.pb-75 {
+  padding-bottom: 75rem; }
 
-.pt-18 {
-  padding-top: 18rem; }
+.pl-75 {
+  padding-left: 75rem; }
 
-.pt-19 {
-  padding-top: 19rem; }
+.pr-75 {
+  padding-right: 75rem; }
 
-.pt-20 {
-  padding-top: 20rem; }
+.w-76 {
+  width: 76rem; }
 
-.pt-21 {
-  padding-top: 21rem; }
+.h-76 {
+  height: 76rem; }
 
-.pt-22 {
-  padding-top: 22rem; }
+.m-76 {
+  margin: 76rem; }
 
-.pt-23 {
-  padding-top: 23rem; }
+.mt-76 {
+  margin-top: 76rem; }
 
-.pt-24 {
-  padding-top: 24rem; }
+.mb-76 {
+  margin-bottom: 76rem; }
 
-.pt-25 {
-  padding-top: 25rem; }
+.ml-76 {
+  margin-left: 76rem; }
 
-.pt-26 {
-  padding-top: 26rem; }
+.mr-76 {
+  margin-right: 76rem; }
 
-.pt-27 {
-  padding-top: 27rem; }
+.p-76 {
+  padding: 76rem; }
+
+.pt-76 {
+  margin-top: 76rem; }
+
+.pb-76 {
+  padding-bottom: 76rem; }
+
+.pl-76 {
+  padding-left: 76rem; }
+
+.pr-76 {
+  padding-right: 76rem; }
 
-.pt-28 {
-  padding-top: 28rem; }
+.w-77 {
+  width: 77rem; }
 
-.pt-29 {
-  padding-top: 29rem; }
+.h-77 {
+  height: 77rem; }
 
-.pt-30 {
-  padding-top: 30rem; }
+.m-77 {
+  margin: 77rem; }
 
-.pt-31 {
-  padding-top: 31rem; }
+.mt-77 {
+  margin-top: 77rem; }
 
-.pt-32 {
-  padding-top: 32rem; }
+.mb-77 {
+  margin-bottom: 77rem; }
 
-.pt-33 {
-  padding-top: 33rem; }
+.ml-77 {
+  margin-left: 77rem; }
 
-.pt-34 {
-  padding-top: 34rem; }
+.mr-77 {
+  margin-right: 77rem; }
 
-.pt-35 {
-  padding-top: 35rem; }
+.p-77 {
+  padding: 77rem; }
 
-.pt-36 {
-  padding-top: 36rem; }
+.pt-77 {
+  margin-top: 77rem; }
 
-.pt-37 {
-  padding-top: 37rem; }
+.pb-77 {
+  padding-bottom: 77rem; }
 
-.pt-38 {
-  padding-top: 38rem; }
+.pl-77 {
+  padding-left: 77rem; }
 
-.pt-39 {
-  padding-top: 39rem; }
+.pr-77 {
+  padding-right: 77rem; }
 
-.pt-40 {
-  padding-top: 40rem; }
+.w-78 {
+  width: 78rem; }
 
-.pt-41 {
-  padding-top: 41rem; }
+.h-78 {
+  height: 78rem; }
 
-.pt-42 {
-  padding-top: 42rem; }
+.m-78 {
+  margin: 78rem; }
 
-.pt-43 {
-  padding-top: 43rem; }
+.mt-78 {
+  margin-top: 78rem; }
 
-.pt-44 {
-  padding-top: 44rem; }
+.mb-78 {
+  margin-bottom: 78rem; }
 
-.pt-45 {
-  padding-top: 45rem; }
+.ml-78 {
+  margin-left: 78rem; }
 
-.pt-46 {
-  padding-top: 46rem; }
+.mr-78 {
+  margin-right: 78rem; }
 
-.pt-47 {
-  padding-top: 47rem; }
+.p-78 {
+  padding: 78rem; }
 
-.pt-48 {
-  padding-top: 48rem; }
+.pt-78 {
+  margin-top: 78rem; }
 
-.pt-49 {
-  padding-top: 49rem; }
+.pb-78 {
+  padding-bottom: 78rem; }
 
-.pt-50 {
-  padding-top: 50rem; }
+.pl-78 {
+  padding-left: 78rem; }
 
-.pt-51 {
-  padding-top: 51rem; }
+.pr-78 {
+  padding-right: 78rem; }
 
-.pt-52 {
-  padding-top: 52rem; }
+.w-79 {
+  width: 79rem; }
 
-.pt-53 {
-  padding-top: 53rem; }
+.h-79 {
+  height: 79rem; }
 
-.pt-54 {
-  padding-top: 54rem; }
+.m-79 {
+  margin: 79rem; }
 
-.pt-55 {
-  padding-top: 55rem; }
+.mt-79 {
+  margin-top: 79rem; }
 
-.pt-56 {
-  padding-top: 56rem; }
+.mb-79 {
+  margin-bottom: 79rem; }
 
-.pt-57 {
-  padding-top: 57rem; }
+.ml-79 {
+  margin-left: 79rem; }
 
-.pt-58 {
-  padding-top: 58rem; }
+.mr-79 {
+  margin-right: 79rem; }
 
-.pt-59 {
-  padding-top: 59rem; }
+.p-79 {
+  padding: 79rem; }
 
-.pt-60 {
-  padding-top: 60rem; }
+.pt-79 {
+  margin-top: 79rem; }
 
-.pt-61 {
-  padding-top: 61rem; }
+.pb-79 {
+  padding-bottom: 79rem; }
 
-.pt-62 {
-  padding-top: 62rem; }
+.pl-79 {
+  padding-left: 79rem; }
 
-.pt-63 {
-  padding-top: 63rem; }
+.pr-79 {
+  padding-right: 79rem; }
 
-.pt-64 {
-  padding-top: 64rem; }
+.w-80 {
+  width: 80rem; }
 
-.pt-65 {
-  padding-top: 65rem; }
+.h-80 {
+  height: 80rem; }
 
-.pt-66 {
-  padding-top: 66rem; }
+.m-80 {
+  margin: 80rem; }
 
-.pt-67 {
-  padding-top: 67rem; }
+.mt-80 {
+  margin-top: 80rem; }
 
-.pt-68 {
-  padding-top: 68rem; }
+.mb-80 {
+  margin-bottom: 80rem; }
 
-.pt-69 {
-  padding-top: 69rem; }
+.ml-80 {
+  margin-left: 80rem; }
 
-.pt-70 {
-  padding-top: 70rem; }
+.mr-80 {
+  margin-right: 80rem; }
 
-.pt-71 {
-  padding-top: 71rem; }
+.p-80 {
+  padding: 80rem; }
 
-.pt-72 {
-  padding-top: 72rem; }
+.pt-80 {
+  margin-top: 80rem; }
 
-.pt-73 {
-  padding-top: 73rem; }
+.pb-80 {
+  padding-bottom: 80rem; }
 
-.pt-74 {
-  padding-top: 74rem; }
+.pl-80 {
+  padding-left: 80rem; }
 
-.pt-75 {
-  padding-top: 75rem; }
+.pr-80 {
+  padding-right: 80rem; }
 
-.pt-76 {
-  padding-top: 76rem; }
+.w-81 {
+  width: 81rem; }
 
-.pt-77 {
-  padding-top: 77rem; }
+.h-81 {
+  height: 81rem; }
 
-.pt-78 {
-  padding-top: 78rem; }
+.m-81 {
+  margin: 81rem; }
 
-.pt-79 {
-  padding-top: 79rem; }
+.mt-81 {
+  margin-top: 81rem; }
 
-.pt-80 {
-  padding-top: 80rem; }
+.mb-81 {
+  margin-bottom: 81rem; }
 
-.pt-81 {
-  padding-top: 81rem; }
+.ml-81 {
+  margin-left: 81rem; }
 
-.pt-82 {
-  padding-top: 82rem; }
+.mr-81 {
+  margin-right: 81rem; }
 
-.pt-83 {
-  padding-top: 83rem; }
+.p-81 {
+  padding: 81rem; }
 
-.pt-84 {
-  padding-top: 84rem; }
+.pt-81 {
+  margin-top: 81rem; }
 
-.pt-85 {
-  padding-top: 85rem; }
+.pb-81 {
+  padding-bottom: 81rem; }
 
-.pt-86 {
-  padding-top: 86rem; }
+.pl-81 {
+  padding-left: 81rem; }
 
-.pt-87 {
-  padding-top: 87rem; }
+.pr-81 {
+  padding-right: 81rem; }
 
-.pt-88 {
-  padding-top: 88rem; }
+.w-82 {
+  width: 82rem; }
 
-.pt-89 {
-  padding-top: 89rem; }
+.h-82 {
+  height: 82rem; }
 
-.pt-90 {
-  padding-top: 90rem; }
+.m-82 {
+  margin: 82rem; }
 
-.pt-91 {
-  padding-top: 91rem; }
+.mt-82 {
+  margin-top: 82rem; }
 
-.pt-92 {
-  padding-top: 92rem; }
+.mb-82 {
+  margin-bottom: 82rem; }
 
-.pt-93 {
-  padding-top: 93rem; }
+.ml-82 {
+  margin-left: 82rem; }
 
-.pt-94 {
-  padding-top: 94rem; }
+.mr-82 {
+  margin-right: 82rem; }
 
-.pt-95 {
-  padding-top: 95rem; }
+.p-82 {
+  padding: 82rem; }
 
-.pt-96 {
-  padding-top: 96rem; }
+.pt-82 {
+  margin-top: 82rem; }
 
-.pt-97 {
-  padding-top: 97rem; }
+.pb-82 {
+  padding-bottom: 82rem; }
 
-.pt-98 {
-  padding-top: 98rem; }
+.pl-82 {
+  padding-left: 82rem; }
 
-.pt-99 {
-  padding-top: 99rem; }
+.pr-82 {
+  padding-right: 82rem; }
 
-.pb-0 {
-  padding-bottom: 0rem; }
+.w-83 {
+  width: 83rem; }
 
-.pb-1 {
-  padding-bottom: 1rem; }
+.h-83 {
+  height: 83rem; }
 
-.pb-2 {
-  padding-bottom: 2rem; }
+.m-83 {
+  margin: 83rem; }
 
-.pb-3 {
-  padding-bottom: 3rem; }
+.mt-83 {
+  margin-top: 83rem; }
 
-.pb-4 {
-  padding-bottom: 4rem; }
+.mb-83 {
+  margin-bottom: 83rem; }
 
-.pb-5 {
-  padding-bottom: 5rem; }
+.ml-83 {
+  margin-left: 83rem; }
 
-.pb-6 {
-  padding-bottom: 6rem; }
+.mr-83 {
+  margin-right: 83rem; }
 
-.pb-7 {
-  padding-bottom: 7rem; }
+.p-83 {
+  padding: 83rem; }
 
-.pb-8 {
-  padding-bottom: 8rem; }
+.pt-83 {
+  margin-top: 83rem; }
 
-.pb-9 {
-  padding-bottom: 9rem; }
+.pb-83 {
+  padding-bottom: 83rem; }
 
-.pb-10 {
-  padding-bottom: 10rem; }
+.pl-83 {
+  padding-left: 83rem; }
 
-.pb-11 {
-  padding-bottom: 11rem; }
+.pr-83 {
+  padding-right: 83rem; }
 
-.pb-12 {
-  padding-bottom: 12rem; }
+.w-84 {
+  width: 84rem; }
 
-.pb-13 {
-  padding-bottom: 13rem; }
+.h-84 {
+  height: 84rem; }
 
-.pb-14 {
-  padding-bottom: 14rem; }
+.m-84 {
+  margin: 84rem; }
 
-.pb-15 {
-  padding-bottom: 15rem; }
+.mt-84 {
+  margin-top: 84rem; }
 
-.pb-16 {
-  padding-bottom: 16rem; }
+.mb-84 {
+  margin-bottom: 84rem; }
 
-.pb-17 {
-  padding-bottom: 17rem; }
+.ml-84 {
+  margin-left: 84rem; }
 
-.pb-18 {
-  padding-bottom: 18rem; }
+.mr-84 {
+  margin-right: 84rem; }
 
-.pb-19 {
-  padding-bottom: 19rem; }
+.p-84 {
+  padding: 84rem; }
 
-.pb-20 {
-  padding-bottom: 20rem; }
+.pt-84 {
+  margin-top: 84rem; }
 
-.pb-21 {
-  padding-bottom: 21rem; }
+.pb-84 {
+  padding-bottom: 84rem; }
 
-.pb-22 {
-  padding-bottom: 22rem; }
+.pl-84 {
+  padding-left: 84rem; }
 
-.pb-23 {
-  padding-bottom: 23rem; }
+.pr-84 {
+  padding-right: 84rem; }
 
-.pb-24 {
-  padding-bottom: 24rem; }
+.w-85 {
+  width: 85rem; }
 
-.pb-25 {
-  padding-bottom: 25rem; }
+.h-85 {
+  height: 85rem; }
 
-.pb-26 {
-  padding-bottom: 26rem; }
+.m-85 {
+  margin: 85rem; }
 
-.pb-27 {
-  padding-bottom: 27rem; }
+.mt-85 {
+  margin-top: 85rem; }
 
-.pb-28 {
-  padding-bottom: 28rem; }
+.mb-85 {
+  margin-bottom: 85rem; }
 
-.pb-29 {
-  padding-bottom: 29rem; }
+.ml-85 {
+  margin-left: 85rem; }
 
-.pb-30 {
-  padding-bottom: 30rem; }
+.mr-85 {
+  margin-right: 85rem; }
 
-.pb-31 {
-  padding-bottom: 31rem; }
+.p-85 {
+  padding: 85rem; }
 
-.pb-32 {
-  padding-bottom: 32rem; }
+.pt-85 {
+  margin-top: 85rem; }
 
-.pb-33 {
-  padding-bottom: 33rem; }
+.pb-85 {
+  padding-bottom: 85rem; }
 
-.pb-34 {
-  padding-bottom: 34rem; }
+.pl-85 {
+  padding-left: 85rem; }
 
-.pb-35 {
-  padding-bottom: 35rem; }
+.pr-85 {
+  padding-right: 85rem; }
 
-.pb-36 {
-  padding-bottom: 36rem; }
+.w-86 {
+  width: 86rem; }
 
-.pb-37 {
-  padding-bottom: 37rem; }
+.h-86 {
+  height: 86rem; }
 
-.pb-38 {
-  padding-bottom: 38rem; }
+.m-86 {
+  margin: 86rem; }
 
-.pb-39 {
-  padding-bottom: 39rem; }
+.mt-86 {
+  margin-top: 86rem; }
 
-.pb-40 {
-  padding-bottom: 40rem; }
+.mb-86 {
+  margin-bottom: 86rem; }
 
-.pb-41 {
-  padding-bottom: 41rem; }
+.ml-86 {
+  margin-left: 86rem; }
 
-.pb-42 {
-  padding-bottom: 42rem; }
+.mr-86 {
+  margin-right: 86rem; }
 
-.pb-43 {
-  padding-bottom: 43rem; }
+.p-86 {
+  padding: 86rem; }
 
-.pb-44 {
-  padding-bottom: 44rem; }
+.pt-86 {
+  margin-top: 86rem; }
 
-.pb-45 {
-  padding-bottom: 45rem; }
+.pb-86 {
+  padding-bottom: 86rem; }
 
-.pb-46 {
-  padding-bottom: 46rem; }
+.pl-86 {
+  padding-left: 86rem; }
 
-.pb-47 {
-  padding-bottom: 47rem; }
+.pr-86 {
+  padding-right: 86rem; }
 
-.pb-48 {
-  padding-bottom: 48rem; }
+.w-87 {
+  width: 87rem; }
 
-.pb-49 {
-  padding-bottom: 49rem; }
+.h-87 {
+  height: 87rem; }
 
-.pb-50 {
-  padding-bottom: 50rem; }
+.m-87 {
+  margin: 87rem; }
 
-.pb-51 {
-  padding-bottom: 51rem; }
+.mt-87 {
+  margin-top: 87rem; }
 
-.pb-52 {
-  padding-bottom: 52rem; }
+.mb-87 {
+  margin-bottom: 87rem; }
 
-.pb-53 {
-  padding-bottom: 53rem; }
+.ml-87 {
+  margin-left: 87rem; }
 
-.pb-54 {
-  padding-bottom: 54rem; }
+.mr-87 {
+  margin-right: 87rem; }
 
-.pb-55 {
-  padding-bottom: 55rem; }
+.p-87 {
+  padding: 87rem; }
 
-.pb-56 {
-  padding-bottom: 56rem; }
+.pt-87 {
+  margin-top: 87rem; }
 
-.pb-57 {
-  padding-bottom: 57rem; }
+.pb-87 {
+  padding-bottom: 87rem; }
 
-.pb-58 {
-  padding-bottom: 58rem; }
+.pl-87 {
+  padding-left: 87rem; }
 
-.pb-59 {
-  padding-bottom: 59rem; }
+.pr-87 {
+  padding-right: 87rem; }
 
-.pb-60 {
-  padding-bottom: 60rem; }
+.w-88 {
+  width: 88rem; }
 
-.pb-61 {
-  padding-bottom: 61rem; }
+.h-88 {
+  height: 88rem; }
 
-.pb-62 {
-  padding-bottom: 62rem; }
+.m-88 {
+  margin: 88rem; }
 
-.pb-63 {
-  padding-bottom: 63rem; }
+.mt-88 {
+  margin-top: 88rem; }
 
-.pb-64 {
-  padding-bottom: 64rem; }
+.mb-88 {
+  margin-bottom: 88rem; }
 
-.pb-65 {
-  padding-bottom: 65rem; }
+.ml-88 {
+  margin-left: 88rem; }
 
-.pb-66 {
-  padding-bottom: 66rem; }
+.mr-88 {
+  margin-right: 88rem; }
 
-.pb-67 {
-  padding-bottom: 67rem; }
+.p-88 {
+  padding: 88rem; }
 
-.pb-68 {
-  padding-bottom: 68rem; }
+.pt-88 {
+  margin-top: 88rem; }
 
-.pb-69 {
-  padding-bottom: 69rem; }
+.pb-88 {
+  padding-bottom: 88rem; }
 
-.pb-70 {
-  padding-bottom: 70rem; }
+.pl-88 {
+  padding-left: 88rem; }
 
-.pb-71 {
-  padding-bottom: 71rem; }
+.pr-88 {
+  padding-right: 88rem; }
 
-.pb-72 {
-  padding-bottom: 72rem; }
+.w-89 {
+  width: 89rem; }
 
-.pb-73 {
-  padding-bottom: 73rem; }
+.h-89 {
+  height: 89rem; }
 
-.pb-74 {
-  padding-bottom: 74rem; }
+.m-89 {
+  margin: 89rem; }
 
-.pb-75 {
-  padding-bottom: 75rem; }
+.mt-89 {
+  margin-top: 89rem; }
 
-.pb-76 {
-  padding-bottom: 76rem; }
+.mb-89 {
+  margin-bottom: 89rem; }
 
-.pb-77 {
-  padding-bottom: 77rem; }
+.ml-89 {
+  margin-left: 89rem; }
 
-.pb-78 {
-  padding-bottom: 78rem; }
+.mr-89 {
+  margin-right: 89rem; }
 
-.pb-79 {
-  padding-bottom: 79rem; }
+.p-89 {
+  padding: 89rem; }
 
-.pb-80 {
-  padding-bottom: 80rem; }
+.pt-89 {
+  margin-top: 89rem; }
 
-.pb-81 {
-  padding-bottom: 81rem; }
+.pb-89 {
+  padding-bottom: 89rem; }
 
-.pb-82 {
-  padding-bottom: 82rem; }
+.pl-89 {
+  padding-left: 89rem; }
 
-.pb-83 {
-  padding-bottom: 83rem; }
+.pr-89 {
+  padding-right: 89rem; }
 
-.pb-84 {
-  padding-bottom: 84rem; }
+.w-90 {
+  width: 90rem; }
 
-.pb-85 {
-  padding-bottom: 85rem; }
+.h-90 {
+  height: 90rem; }
 
-.pb-86 {
-  padding-bottom: 86rem; }
+.m-90 {
+  margin: 90rem; }
 
-.pb-87 {
-  padding-bottom: 87rem; }
+.mt-90 {
+  margin-top: 90rem; }
 
-.pb-88 {
-  padding-bottom: 88rem; }
+.mb-90 {
+  margin-bottom: 90rem; }
 
-.pb-89 {
-  padding-bottom: 89rem; }
+.ml-90 {
+  margin-left: 90rem; }
 
-.pb-90 {
-  padding-bottom: 90rem; }
+.mr-90 {
+  margin-right: 90rem; }
 
-.pb-91 {
-  padding-bottom: 91rem; }
+.p-90 {
+  padding: 90rem; }
 
-.pb-92 {
-  padding-bottom: 92rem; }
+.pt-90 {
+  margin-top: 90rem; }
 
-.pb-93 {
-  padding-bottom: 93rem; }
+.pb-90 {
+  padding-bottom: 90rem; }
 
-.pb-94 {
-  padding-bottom: 94rem; }
+.pl-90 {
+  padding-left: 90rem; }
 
-.pb-95 {
-  padding-bottom: 95rem; }
+.pr-90 {
+  padding-right: 90rem; }
 
-.pb-96 {
-  padding-bottom: 96rem; }
+.w-91 {
+  width: 91rem; }
 
-.pb-97 {
-  padding-bottom: 97rem; }
+.h-91 {
+  height: 91rem; }
 
-.pb-98 {
-  padding-bottom: 98rem; }
+.m-91 {
+  margin: 91rem; }
 
-.pb-99 {
-  padding-bottom: 99rem; }
+.mt-91 {
+  margin-top: 91rem; }
 
-.p-0 {
-  padding: 0rem; }
+.mb-91 {
+  margin-bottom: 91rem; }
 
-.p-1 {
-  padding: 1rem; }
+.ml-91 {
+  margin-left: 91rem; }
 
-.p-2 {
-  padding: 2rem; }
+.mr-91 {
+  margin-right: 91rem; }
 
-.p-3 {
-  padding: 3rem; }
+.p-91 {
+  padding: 91rem; }
 
-.p-4 {
-  padding: 4rem; }
+.pt-91 {
+  margin-top: 91rem; }
 
-.p-5 {
-  padding: 5rem; }
+.pb-91 {
+  padding-bottom: 91rem; }
 
-.p-6 {
-  padding: 6rem; }
+.pl-91 {
+  padding-left: 91rem; }
 
-.p-7 {
-  padding: 7rem; }
+.pr-91 {
+  padding-right: 91rem; }
 
-.p-8 {
-  padding: 8rem; }
+.w-92 {
+  width: 92rem; }
 
-.p-9 {
-  padding: 9rem; }
+.h-92 {
+  height: 92rem; }
 
-.p-10 {
-  padding: 10rem; }
+.m-92 {
+  margin: 92rem; }
 
-.p-11 {
-  padding: 11rem; }
+.mt-92 {
+  margin-top: 92rem; }
 
-.p-12 {
-  padding: 12rem; }
+.mb-92 {
+  margin-bottom: 92rem; }
 
-.p-13 {
-  padding: 13rem; }
+.ml-92 {
+  margin-left: 92rem; }
 
-.p-14 {
-  padding: 14rem; }
+.mr-92 {
+  margin-right: 92rem; }
 
-.p-15 {
-  padding: 15rem; }
+.p-92 {
+  padding: 92rem; }
 
-.p-16 {
-  padding: 16rem; }
+.pt-92 {
+  margin-top: 92rem; }
 
-.p-17 {
-  padding: 17rem; }
+.pb-92 {
+  padding-bottom: 92rem; }
 
-.p-18 {
-  padding: 18rem; }
+.pl-92 {
+  padding-left: 92rem; }
 
-.p-19 {
-  padding: 19rem; }
+.pr-92 {
+  padding-right: 92rem; }
 
-.p-20 {
-  padding: 20rem; }
+.w-93 {
+  width: 93rem; }
 
-.p-21 {
-  padding: 21rem; }
+.h-93 {
+  height: 93rem; }
 
-.p-22 {
-  padding: 22rem; }
+.m-93 {
+  margin: 93rem; }
 
-.p-23 {
-  padding: 23rem; }
+.mt-93 {
+  margin-top: 93rem; }
 
-.p-24 {
-  padding: 24rem; }
+.mb-93 {
+  margin-bottom: 93rem; }
 
-.p-25 {
-  padding: 25rem; }
+.ml-93 {
+  margin-left: 93rem; }
 
-.p-26 {
-  padding: 26rem; }
+.mr-93 {
+  margin-right: 93rem; }
 
-.p-27 {
-  padding: 27rem; }
+.p-93 {
+  padding: 93rem; }
 
-.p-28 {
-  padding: 28rem; }
+.pt-93 {
+  margin-top: 93rem; }
 
-.p-29 {
-  padding: 29rem; }
+.pb-93 {
+  padding-bottom: 93rem; }
 
-.p-30 {
-  padding: 30rem; }
+.pl-93 {
+  padding-left: 93rem; }
 
-.p-31 {
-  padding: 31rem; }
+.pr-93 {
+  padding-right: 93rem; }
 
-.p-32 {
-  padding: 32rem; }
+.w-94 {
+  width: 94rem; }
 
-.p-33 {
-  padding: 33rem; }
+.h-94 {
+  height: 94rem; }
 
-.p-34 {
-  padding: 34rem; }
+.m-94 {
+  margin: 94rem; }
 
-.p-35 {
-  padding: 35rem; }
+.mt-94 {
+  margin-top: 94rem; }
 
-.p-36 {
-  padding: 36rem; }
+.mb-94 {
+  margin-bottom: 94rem; }
 
-.p-37 {
-  padding: 37rem; }
+.ml-94 {
+  margin-left: 94rem; }
 
-.p-38 {
-  padding: 38rem; }
+.mr-94 {
+  margin-right: 94rem; }
 
-.p-39 {
-  padding: 39rem; }
+.p-94 {
+  padding: 94rem; }
 
-.p-40 {
-  padding: 40rem; }
+.pt-94 {
+  margin-top: 94rem; }
 
-.p-41 {
-  padding: 41rem; }
+.pb-94 {
+  padding-bottom: 94rem; }
 
-.p-42 {
-  padding: 42rem; }
+.pl-94 {
+  padding-left: 94rem; }
 
-.p-43 {
-  padding: 43rem; }
+.pr-94 {
+  padding-right: 94rem; }
 
-.p-44 {
-  padding: 44rem; }
+.w-95 {
+  width: 95rem; }
 
-.p-45 {
-  padding: 45rem; }
+.h-95 {
+  height: 95rem; }
 
-.p-46 {
-  padding: 46rem; }
+.m-95 {
+  margin: 95rem; }
 
-.p-47 {
-  padding: 47rem; }
+.mt-95 {
+  margin-top: 95rem; }
 
-.p-48 {
-  padding: 48rem; }
+.mb-95 {
+  margin-bottom: 95rem; }
 
-.p-49 {
-  padding: 49rem; }
+.ml-95 {
+  margin-left: 95rem; }
 
-.p-50 {
-  padding: 50rem; }
+.mr-95 {
+  margin-right: 95rem; }
 
-.p-51 {
-  padding: 51rem; }
+.p-95 {
+  padding: 95rem; }
 
-.p-52 {
-  padding: 52rem; }
+.pt-95 {
+  margin-top: 95rem; }
 
-.p-53 {
-  padding: 53rem; }
+.pb-95 {
+  padding-bottom: 95rem; }
 
-.p-54 {
-  padding: 54rem; }
+.pl-95 {
+  padding-left: 95rem; }
 
-.p-55 {
-  padding: 55rem; }
+.pr-95 {
+  padding-right: 95rem; }
 
-.p-56 {
-  padding: 56rem; }
+.w-96 {
+  width: 96rem; }
 
-.p-57 {
-  padding: 57rem; }
+.h-96 {
+  height: 96rem; }
 
-.p-58 {
-  padding: 58rem; }
+.m-96 {
+  margin: 96rem; }
 
-.p-59 {
-  padding: 59rem; }
+.mt-96 {
+  margin-top: 96rem; }
 
-.p-60 {
-  padding: 60rem; }
+.mb-96 {
+  margin-bottom: 96rem; }
 
-.p-61 {
-  padding: 61rem; }
+.ml-96 {
+  margin-left: 96rem; }
 
-.p-62 {
-  padding: 62rem; }
+.mr-96 {
+  margin-right: 96rem; }
 
-.p-63 {
-  padding: 63rem; }
+.p-96 {
+  padding: 96rem; }
 
-.p-64 {
-  padding: 64rem; }
+.pt-96 {
+  margin-top: 96rem; }
 
-.p-65 {
-  padding: 65rem; }
+.pb-96 {
+  padding-bottom: 96rem; }
 
-.p-66 {
-  padding: 66rem; }
+.pl-96 {
+  padding-left: 96rem; }
 
-.p-67 {
-  padding: 67rem; }
+.pr-96 {
+  padding-right: 96rem; }
 
-.p-68 {
-  padding: 68rem; }
+.w-97 {
+  width: 97rem; }
 
-.p-69 {
-  padding: 69rem; }
+.h-97 {
+  height: 97rem; }
 
-.p-70 {
-  padding: 70rem; }
+.m-97 {
+  margin: 97rem; }
 
-.p-71 {
-  padding: 71rem; }
+.mt-97 {
+  margin-top: 97rem; }
 
-.p-72 {
-  padding: 72rem; }
+.mb-97 {
+  margin-bottom: 97rem; }
 
-.p-73 {
-  padding: 73rem; }
+.ml-97 {
+  margin-left: 97rem; }
 
-.p-74 {
-  padding: 74rem; }
+.mr-97 {
+  margin-right: 97rem; }
 
-.p-75 {
-  padding: 75rem; }
+.p-97 {
+  padding: 97rem; }
 
-.p-76 {
-  padding: 76rem; }
+.pt-97 {
+  margin-top: 97rem; }
 
-.p-77 {
-  padding: 77rem; }
+.pb-97 {
+  padding-bottom: 97rem; }
 
-.p-78 {
-  padding: 78rem; }
+.pl-97 {
+  padding-left: 97rem; }
 
-.p-79 {
-  padding: 79rem; }
+.pr-97 {
+  padding-right: 97rem; }
 
-.p-80 {
-  padding: 80rem; }
+.w-98 {
+  width: 98rem; }
 
-.p-81 {
-  padding: 81rem; }
+.h-98 {
+  height: 98rem; }
 
-.p-82 {
-  padding: 82rem; }
+.m-98 {
+  margin: 98rem; }
 
-.p-83 {
-  padding: 83rem; }
+.mt-98 {
+  margin-top: 98rem; }
 
-.p-84 {
-  padding: 84rem; }
+.mb-98 {
+  margin-bottom: 98rem; }
 
-.p-85 {
-  padding: 85rem; }
+.ml-98 {
+  margin-left: 98rem; }
 
-.p-86 {
-  padding: 86rem; }
+.mr-98 {
+  margin-right: 98rem; }
 
-.p-87 {
-  padding: 87rem; }
+.p-98 {
+  padding: 98rem; }
 
-.p-88 {
-  padding: 88rem; }
+.pt-98 {
+  margin-top: 98rem; }
 
-.p-89 {
-  padding: 89rem; }
+.pb-98 {
+  padding-bottom: 98rem; }
 
-.p-90 {
-  padding: 90rem; }
+.pl-98 {
+  padding-left: 98rem; }
 
-.p-91 {
-  padding: 91rem; }
+.pr-98 {
+  padding-right: 98rem; }
 
-.p-92 {
-  padding: 92rem; }
+.w-99 {
+  width: 99rem; }
 
-.p-93 {
-  padding: 93rem; }
+.h-99 {
+  height: 99rem; }
 
-.p-94 {
-  padding: 94rem; }
+.m-99 {
+  margin: 99rem; }
 
-.p-95 {
-  padding: 95rem; }
+.mt-99 {
+  margin-top: 99rem; }
 
-.p-96 {
-  padding: 96rem; }
+.mb-99 {
+  margin-bottom: 99rem; }
 
-.p-97 {
-  padding: 97rem; }
+.ml-99 {
+  margin-left: 99rem; }
 
-.p-98 {
-  padding: 98rem; }
+.mr-99 {
+  margin-right: 99rem; }
 
 .p-99 {
   padding: 99rem; }
 
+.pt-99 {
+  margin-top: 99rem; }
+
+.pb-99 {
+  padding-bottom: 99rem; }
+
+.pl-99 {
+  padding-left: 99rem; }
+
+.pr-99 {
+  padding-right: 99rem; }
+
 * {
   box-sizing: border-box; }
diff --git a/sass/utilities.scss b/sass/utilities.scss
index dd6ba24..9e98caf 100644
--- a/sass/utilities.scss
+++ b/sass/utilities.scss
@@ -1,4817 +1,21 @@
 
 /**********************
-  Width classes
+  Utility classes
 **********************/
-  
-.w-0 {
-  width: 0rem;
-}
-  
-.w-1 {
-  width: 1rem;
-}
-  
-.w-2 {
-  width: 2rem;
-}
-  
-.w-3 {
-  width: 3rem;
-}
-  
-.w-4 {
-  width: 4rem;
-}
-  
-.w-5 {
-  width: 5rem;
-}
-  
-.w-6 {
-  width: 6rem;
-}
-  
-.w-7 {
-  width: 7rem;
-}
-  
-.w-8 {
-  width: 8rem;
-}
-  
-.w-9 {
-  width: 9rem;
-}
-  
-.w-10 {
-  width: 10rem;
-}
-  
-.w-11 {
-  width: 11rem;
-}
-  
-.w-12 {
-  width: 12rem;
-}
-  
-.w-13 {
-  width: 13rem;
-}
-  
-.w-14 {
-  width: 14rem;
-}
-  
-.w-15 {
-  width: 15rem;
-}
-  
-.w-16 {
-  width: 16rem;
-}
-  
-.w-17 {
-  width: 17rem;
-}
-  
-.w-18 {
-  width: 18rem;
-}
-  
-.w-19 {
-  width: 19rem;
-}
-  
-.w-20 {
-  width: 20rem;
-}
-  
-.w-21 {
-  width: 21rem;
-}
-  
-.w-22 {
-  width: 22rem;
-}
-  
-.w-23 {
-  width: 23rem;
-}
-  
-.w-24 {
-  width: 24rem;
-}
-  
-.w-25 {
-  width: 25rem;
-}
-  
-.w-26 {
-  width: 26rem;
-}
-  
-.w-27 {
-  width: 27rem;
-}
-  
-.w-28 {
-  width: 28rem;
-}
-  
-.w-29 {
-  width: 29rem;
-}
-  
-.w-30 {
-  width: 30rem;
-}
-  
-.w-31 {
-  width: 31rem;
-}
-  
-.w-32 {
-  width: 32rem;
-}
-  
-.w-33 {
-  width: 33rem;
-}
-  
-.w-34 {
-  width: 34rem;
-}
-  
-.w-35 {
-  width: 35rem;
-}
-  
-.w-36 {
-  width: 36rem;
-}
-  
-.w-37 {
-  width: 37rem;
-}
-  
-.w-38 {
-  width: 38rem;
-}
-  
-.w-39 {
-  width: 39rem;
-}
-  
-.w-40 {
-  width: 40rem;
-}
-  
-.w-41 {
-  width: 41rem;
-}
-  
-.w-42 {
-  width: 42rem;
-}
-  
-.w-43 {
-  width: 43rem;
-}
-  
-.w-44 {
-  width: 44rem;
-}
-  
-.w-45 {
-  width: 45rem;
-}
-  
-.w-46 {
-  width: 46rem;
-}
-  
-.w-47 {
-  width: 47rem;
-}
-  
-.w-48 {
-  width: 48rem;
-}
-  
-.w-49 {
-  width: 49rem;
-}
-  
-.w-50 {
-  width: 50rem;
-}
-  
-.w-51 {
-  width: 51rem;
-}
-  
-.w-52 {
-  width: 52rem;
-}
-  
-.w-53 {
-  width: 53rem;
-}
-  
-.w-54 {
-  width: 54rem;
-}
-  
-.w-55 {
-  width: 55rem;
-}
-  
-.w-56 {
-  width: 56rem;
-}
-  
-.w-57 {
-  width: 57rem;
-}
-  
-.w-58 {
-  width: 58rem;
-}
-  
-.w-59 {
-  width: 59rem;
-}
-  
-.w-60 {
-  width: 60rem;
-}
-  
-.w-61 {
-  width: 61rem;
-}
-  
-.w-62 {
-  width: 62rem;
-}
-  
-.w-63 {
-  width: 63rem;
-}
-  
-.w-64 {
-  width: 64rem;
-}
-  
-.w-65 {
-  width: 65rem;
-}
-  
-.w-66 {
-  width: 66rem;
-}
-  
-.w-67 {
-  width: 67rem;
-}
-  
-.w-68 {
-  width: 68rem;
-}
-  
-.w-69 {
-  width: 69rem;
-}
-  
-.w-70 {
-  width: 70rem;
-}
-  
-.w-71 {
-  width: 71rem;
-}
-  
-.w-72 {
-  width: 72rem;
-}
-  
-.w-73 {
-  width: 73rem;
-}
-  
-.w-74 {
-  width: 74rem;
-}
-  
-.w-75 {
-  width: 75rem;
-}
-  
-.w-76 {
-  width: 76rem;
-}
-  
-.w-77 {
-  width: 77rem;
-}
-  
-.w-78 {
-  width: 78rem;
-}
-  
-.w-79 {
-  width: 79rem;
-}
-  
-.w-80 {
-  width: 80rem;
-}
-  
-.w-81 {
-  width: 81rem;
-}
-  
-.w-82 {
-  width: 82rem;
-}
-  
-.w-83 {
-  width: 83rem;
-}
-  
-.w-84 {
-  width: 84rem;
-}
-  
-.w-85 {
-  width: 85rem;
-}
-  
-.w-86 {
-  width: 86rem;
-}
-  
-.w-87 {
-  width: 87rem;
-}
-  
-.w-88 {
-  width: 88rem;
-}
-  
-.w-89 {
-  width: 89rem;
-}
-  
-.w-90 {
-  width: 90rem;
-}
-  
-.w-91 {
-  width: 91rem;
-}
-  
-.w-92 {
-  width: 92rem;
-}
-  
-.w-93 {
-  width: 93rem;
-}
-  
-.w-94 {
-  width: 94rem;
-}
-  
-.w-95 {
-  width: 95rem;
-}
-  
-.w-96 {
-  width: 96rem;
-}
-  
-.w-97 {
-  width: 97rem;
-}
-  
-.w-98 {
-  width: 98rem;
-}
-  
-.w-99 {
-  width: 99rem;
-}
-  
-/**********************
-  Height classes
-**********************/
-  
-.h-0 {
-  height: 0rem;
-}
-  
-.h-1 {
-  height: 1rem;
-}
-  
-.h-2 {
-  height: 2rem;
-}
-  
-.h-3 {
-  height: 3rem;
-}
-  
-.h-4 {
-  height: 4rem;
-}
-  
-.h-5 {
-  height: 5rem;
-}
-  
-.h-6 {
-  height: 6rem;
-}
-  
-.h-7 {
-  height: 7rem;
-}
-  
-.h-8 {
-  height: 8rem;
-}
-  
-.h-9 {
-  height: 9rem;
-}
-  
-.h-10 {
-  height: 10rem;
-}
-  
-.h-11 {
-  height: 11rem;
-}
-  
-.h-12 {
-  height: 12rem;
-}
-  
-.h-13 {
-  height: 13rem;
-}
-  
-.h-14 {
-  height: 14rem;
-}
-  
-.h-15 {
-  height: 15rem;
-}
-  
-.h-16 {
-  height: 16rem;
-}
-  
-.h-17 {
-  height: 17rem;
-}
-  
-.h-18 {
-  height: 18rem;
-}
-  
-.h-19 {
-  height: 19rem;
-}
-  
-.h-20 {
-  height: 20rem;
-}
-  
-.h-21 {
-  height: 21rem;
-}
-  
-.h-22 {
-  height: 22rem;
-}
-  
-.h-23 {
-  height: 23rem;
-}
-  
-.h-24 {
-  height: 24rem;
-}
-  
-.h-25 {
-  height: 25rem;
-}
-  
-.h-26 {
-  height: 26rem;
-}
-  
-.h-27 {
-  height: 27rem;
-}
-  
-.h-28 {
-  height: 28rem;
-}
-  
-.h-29 {
-  height: 29rem;
-}
-  
-.h-30 {
-  height: 30rem;
-}
-  
-.h-31 {
-  height: 31rem;
-}
-  
-.h-32 {
-  height: 32rem;
-}
-  
-.h-33 {
-  height: 33rem;
-}
-  
-.h-34 {
-  height: 34rem;
-}
-  
-.h-35 {
-  height: 35rem;
-}
-  
-.h-36 {
-  height: 36rem;
-}
-  
-.h-37 {
-  height: 37rem;
-}
-  
-.h-38 {
-  height: 38rem;
-}
-  
-.h-39 {
-  height: 39rem;
-}
-  
-.h-40 {
-  height: 40rem;
-}
-  
-.h-41 {
-  height: 41rem;
-}
-  
-.h-42 {
-  height: 42rem;
-}
-  
-.h-43 {
-  height: 43rem;
-}
-  
-.h-44 {
-  height: 44rem;
-}
-  
-.h-45 {
-  height: 45rem;
-}
-  
-.h-46 {
-  height: 46rem;
-}
-  
-.h-47 {
-  height: 47rem;
-}
-  
-.h-48 {
-  height: 48rem;
-}
-  
-.h-49 {
-  height: 49rem;
-}
-  
-.h-50 {
-  height: 50rem;
-}
-  
-.h-51 {
-  height: 51rem;
-}
-  
-.h-52 {
-  height: 52rem;
-}
-  
-.h-53 {
-  height: 53rem;
-}
-  
-.h-54 {
-  height: 54rem;
-}
-  
-.h-55 {
-  height: 55rem;
-}
-  
-.h-56 {
-  height: 56rem;
-}
-  
-.h-57 {
-  height: 57rem;
-}
-  
-.h-58 {
-  height: 58rem;
-}
-  
-.h-59 {
-  height: 59rem;
-}
-  
-.h-60 {
-  height: 60rem;
-}
-  
-.h-61 {
-  height: 61rem;
-}
-  
-.h-62 {
-  height: 62rem;
-}
-  
-.h-63 {
-  height: 63rem;
-}
-  
-.h-64 {
-  height: 64rem;
-}
-  
-.h-65 {
-  height: 65rem;
-}
-  
-.h-66 {
-  height: 66rem;
-}
-  
-.h-67 {
-  height: 67rem;
-}
-  
-.h-68 {
-  height: 68rem;
-}
-  
-.h-69 {
-  height: 69rem;
-}
-  
-.h-70 {
-  height: 70rem;
-}
-  
-.h-71 {
-  height: 71rem;
-}
-  
-.h-72 {
-  height: 72rem;
-}
-  
-.h-73 {
-  height: 73rem;
-}
-  
-.h-74 {
-  height: 74rem;
-}
-  
-.h-75 {
-  height: 75rem;
-}
-  
-.h-76 {
-  height: 76rem;
-}
-  
-.h-77 {
-  height: 77rem;
-}
-  
-.h-78 {
-  height: 78rem;
-}
-  
-.h-79 {
-  height: 79rem;
-}
-  
-.h-80 {
-  height: 80rem;
-}
-  
-.h-81 {
-  height: 81rem;
-}
-  
-.h-82 {
-  height: 82rem;
-}
-  
-.h-83 {
-  height: 83rem;
-}
-  
-.h-84 {
-  height: 84rem;
-}
-  
-.h-85 {
-  height: 85rem;
-}
-  
-.h-86 {
-  height: 86rem;
-}
-  
-.h-87 {
-  height: 87rem;
-}
-  
-.h-88 {
-  height: 88rem;
-}
-  
-.h-89 {
-  height: 89rem;
-}
-  
-.h-90 {
-  height: 90rem;
-}
-  
-.h-91 {
-  height: 91rem;
-}
-  
-.h-92 {
-  height: 92rem;
-}
-  
-.h-93 {
-  height: 93rem;
-}
-  
-.h-94 {
-  height: 94rem;
-}
-  
-.h-95 {
-  height: 95rem;
-}
-  
-.h-96 {
-  height: 96rem;
-}
-  
-.h-97 {
-  height: 97rem;
-}
-  
-.h-98 {
-  height: 98rem;
-}
-  
-.h-99 {
-  height: 99rem;
-}
-  
-/**********************
-  Margin classes
-**********************/
-  
-.ml-0 {
-  margin-left: 0rem;
-}
-  
-.ml-1 {
-  margin-left: 1rem;
-}
-  
-.ml-2 {
-  margin-left: 2rem;
-}
-  
-.ml-3 {
-  margin-left: 3rem;
-}
-  
-.ml-4 {
-  margin-left: 4rem;
-}
-  
-.ml-5 {
-  margin-left: 5rem;
-}
-  
-.ml-6 {
-  margin-left: 6rem;
-}
-  
-.ml-7 {
-  margin-left: 7rem;
-}
-  
-.ml-8 {
-  margin-left: 8rem;
-}
-  
-.ml-9 {
-  margin-left: 9rem;
-}
-  
-.ml-10 {
-  margin-left: 10rem;
-}
-  
-.ml-11 {
-  margin-left: 11rem;
-}
-  
-.ml-12 {
-  margin-left: 12rem;
-}
-  
-.ml-13 {
-  margin-left: 13rem;
-}
-  
-.ml-14 {
-  margin-left: 14rem;
-}
-  
-.ml-15 {
-  margin-left: 15rem;
-}
-  
-.ml-16 {
-  margin-left: 16rem;
-}
-  
-.ml-17 {
-  margin-left: 17rem;
-}
-  
-.ml-18 {
-  margin-left: 18rem;
-}
-  
-.ml-19 {
-  margin-left: 19rem;
-}
-  
-.ml-20 {
-  margin-left: 20rem;
-}
-  
-.ml-21 {
-  margin-left: 21rem;
-}
-  
-.ml-22 {
-  margin-left: 22rem;
-}
-  
-.ml-23 {
-  margin-left: 23rem;
-}
-  
-.ml-24 {
-  margin-left: 24rem;
-}
-  
-.ml-25 {
-  margin-left: 25rem;
-}
-  
-.ml-26 {
-  margin-left: 26rem;
-}
-  
-.ml-27 {
-  margin-left: 27rem;
-}
-  
-.ml-28 {
-  margin-left: 28rem;
-}
-  
-.ml-29 {
-  margin-left: 29rem;
-}
-  
-.ml-30 {
-  margin-left: 30rem;
-}
-  
-.ml-31 {
-  margin-left: 31rem;
-}
-  
-.ml-32 {
-  margin-left: 32rem;
-}
-  
-.ml-33 {
-  margin-left: 33rem;
-}
-  
-.ml-34 {
-  margin-left: 34rem;
-}
-  
-.ml-35 {
-  margin-left: 35rem;
-}
-  
-.ml-36 {
-  margin-left: 36rem;
-}
-  
-.ml-37 {
-  margin-left: 37rem;
-}
-  
-.ml-38 {
-  margin-left: 38rem;
-}
-  
-.ml-39 {
-  margin-left: 39rem;
-}
-  
-.ml-40 {
-  margin-left: 40rem;
-}
-  
-.ml-41 {
-  margin-left: 41rem;
-}
-  
-.ml-42 {
-  margin-left: 42rem;
-}
-  
-.ml-43 {
-  margin-left: 43rem;
-}
-  
-.ml-44 {
-  margin-left: 44rem;
-}
-  
-.ml-45 {
-  margin-left: 45rem;
-}
-  
-.ml-46 {
-  margin-left: 46rem;
-}
-  
-.ml-47 {
-  margin-left: 47rem;
-}
-  
-.ml-48 {
-  margin-left: 48rem;
-}
-  
-.ml-49 {
-  margin-left: 49rem;
-}
-  
-.ml-50 {
-  margin-left: 50rem;
-}
-  
-.ml-51 {
-  margin-left: 51rem;
-}
-  
-.ml-52 {
-  margin-left: 52rem;
-}
-  
-.ml-53 {
-  margin-left: 53rem;
-}
-  
-.ml-54 {
-  margin-left: 54rem;
-}
-  
-.ml-55 {
-  margin-left: 55rem;
-}
-  
-.ml-56 {
-  margin-left: 56rem;
-}
-  
-.ml-57 {
-  margin-left: 57rem;
-}
-  
-.ml-58 {
-  margin-left: 58rem;
-}
-  
-.ml-59 {
-  margin-left: 59rem;
-}
-  
-.ml-60 {
-  margin-left: 60rem;
-}
-  
-.ml-61 {
-  margin-left: 61rem;
-}
-  
-.ml-62 {
-  margin-left: 62rem;
-}
-  
-.ml-63 {
-  margin-left: 63rem;
-}
-  
-.ml-64 {
-  margin-left: 64rem;
-}
-  
-.ml-65 {
-  margin-left: 65rem;
-}
-  
-.ml-66 {
-  margin-left: 66rem;
-}
-  
-.ml-67 {
-  margin-left: 67rem;
-}
-  
-.ml-68 {
-  margin-left: 68rem;
-}
-  
-.ml-69 {
-  margin-left: 69rem;
-}
-  
-.ml-70 {
-  margin-left: 70rem;
-}
-  
-.ml-71 {
-  margin-left: 71rem;
-}
-  
-.ml-72 {
-  margin-left: 72rem;
-}
-  
-.ml-73 {
-  margin-left: 73rem;
-}
-  
-.ml-74 {
-  margin-left: 74rem;
-}
-  
-.ml-75 {
-  margin-left: 75rem;
-}
-  
-.ml-76 {
-  margin-left: 76rem;
-}
-  
-.ml-77 {
-  margin-left: 77rem;
-}
-  
-.ml-78 {
-  margin-left: 78rem;
-}
-  
-.ml-79 {
-  margin-left: 79rem;
-}
-  
-.ml-80 {
-  margin-left: 80rem;
-}
-  
-.ml-81 {
-  margin-left: 81rem;
-}
-  
-.ml-82 {
-  margin-left: 82rem;
-}
-  
-.ml-83 {
-  margin-left: 83rem;
-}
-  
-.ml-84 {
-  margin-left: 84rem;
-}
-  
-.ml-85 {
-  margin-left: 85rem;
-}
-  
-.ml-86 {
-  margin-left: 86rem;
-}
-  
-.ml-87 {
-  margin-left: 87rem;
-}
-  
-.ml-88 {
-  margin-left: 88rem;
-}
-  
-.ml-89 {
-  margin-left: 89rem;
-}
-  
-.ml-90 {
-  margin-left: 90rem;
-}
-  
-.ml-91 {
-  margin-left: 91rem;
-}
-  
-.ml-92 {
-  margin-left: 92rem;
-}
-  
-.ml-93 {
-  margin-left: 93rem;
-}
-  
-.ml-94 {
-  margin-left: 94rem;
-}
-  
-.ml-95 {
-  margin-left: 95rem;
-}
-  
-.ml-96 {
-  margin-left: 96rem;
-}
-  
-.ml-97 {
-  margin-left: 97rem;
-}
-  
-.ml-98 {
-  margin-left: 98rem;
-}
-  
-.ml-99 {
-  margin-left: 99rem;
-}
-  
-.mr-0 {
-  margin-right: 0rem;
-}
-  
-.mr-1 {
-  margin-right: 1rem;
-}
-  
-.mr-2 {
-  margin-right: 2rem;
-}
-  
-.mr-3 {
-  margin-right: 3rem;
-}
-  
-.mr-4 {
-  margin-right: 4rem;
-}
-  
-.mr-5 {
-  margin-right: 5rem;
-}
-  
-.mr-6 {
-  margin-right: 6rem;
-}
-  
-.mr-7 {
-  margin-right: 7rem;
-}
-  
-.mr-8 {
-  margin-right: 8rem;
-}
-  
-.mr-9 {
-  margin-right: 9rem;
-}
-  
-.mr-10 {
-  margin-right: 10rem;
-}
-  
-.mr-11 {
-  margin-right: 11rem;
-}
-  
-.mr-12 {
-  margin-right: 12rem;
-}
-  
-.mr-13 {
-  margin-right: 13rem;
-}
-  
-.mr-14 {
-  margin-right: 14rem;
-}
-  
-.mr-15 {
-  margin-right: 15rem;
-}
-  
-.mr-16 {
-  margin-right: 16rem;
-}
-  
-.mr-17 {
-  margin-right: 17rem;
-}
-  
-.mr-18 {
-  margin-right: 18rem;
-}
-  
-.mr-19 {
-  margin-right: 19rem;
-}
-  
-.mr-20 {
-  margin-right: 20rem;
-}
-  
-.mr-21 {
-  margin-right: 21rem;
-}
-  
-.mr-22 {
-  margin-right: 22rem;
-}
-  
-.mr-23 {
-  margin-right: 23rem;
-}
-  
-.mr-24 {
-  margin-right: 24rem;
-}
-  
-.mr-25 {
-  margin-right: 25rem;
-}
-  
-.mr-26 {
-  margin-right: 26rem;
-}
-  
-.mr-27 {
-  margin-right: 27rem;
-}
-  
-.mr-28 {
-  margin-right: 28rem;
-}
-  
-.mr-29 {
-  margin-right: 29rem;
-}
-  
-.mr-30 {
-  margin-right: 30rem;
-}
-  
-.mr-31 {
-  margin-right: 31rem;
-}
-  
-.mr-32 {
-  margin-right: 32rem;
-}
-  
-.mr-33 {
-  margin-right: 33rem;
-}
-  
-.mr-34 {
-  margin-right: 34rem;
-}
-  
-.mr-35 {
-  margin-right: 35rem;
-}
-  
-.mr-36 {
-  margin-right: 36rem;
-}
-  
-.mr-37 {
-  margin-right: 37rem;
-}
-  
-.mr-38 {
-  margin-right: 38rem;
-}
-  
-.mr-39 {
-  margin-right: 39rem;
-}
-  
-.mr-40 {
-  margin-right: 40rem;
-}
-  
-.mr-41 {
-  margin-right: 41rem;
-}
-  
-.mr-42 {
-  margin-right: 42rem;
-}
-  
-.mr-43 {
-  margin-right: 43rem;
-}
-  
-.mr-44 {
-  margin-right: 44rem;
-}
-  
-.mr-45 {
-  margin-right: 45rem;
-}
-  
-.mr-46 {
-  margin-right: 46rem;
-}
-  
-.mr-47 {
-  margin-right: 47rem;
-}
-  
-.mr-48 {
-  margin-right: 48rem;
-}
-  
-.mr-49 {
-  margin-right: 49rem;
-}
-  
-.mr-50 {
-  margin-right: 50rem;
-}
-  
-.mr-51 {
-  margin-right: 51rem;
-}
-  
-.mr-52 {
-  margin-right: 52rem;
-}
-  
-.mr-53 {
-  margin-right: 53rem;
-}
-  
-.mr-54 {
-  margin-right: 54rem;
-}
-  
-.mr-55 {
-  margin-right: 55rem;
-}
-  
-.mr-56 {
-  margin-right: 56rem;
-}
-  
-.mr-57 {
-  margin-right: 57rem;
-}
-  
-.mr-58 {
-  margin-right: 58rem;
-}
-  
-.mr-59 {
-  margin-right: 59rem;
-}
-  
-.mr-60 {
-  margin-right: 60rem;
-}
-  
-.mr-61 {
-  margin-right: 61rem;
-}
-  
-.mr-62 {
-  margin-right: 62rem;
-}
-  
-.mr-63 {
-  margin-right: 63rem;
-}
-  
-.mr-64 {
-  margin-right: 64rem;
-}
-  
-.mr-65 {
-  margin-right: 65rem;
-}
-  
-.mr-66 {
-  margin-right: 66rem;
-}
-  
-.mr-67 {
-  margin-right: 67rem;
-}
-  
-.mr-68 {
-  margin-right: 68rem;
-}
-  
-.mr-69 {
-  margin-right: 69rem;
-}
-  
-.mr-70 {
-  margin-right: 70rem;
-}
-  
-.mr-71 {
-  margin-right: 71rem;
-}
-  
-.mr-72 {
-  margin-right: 72rem;
-}
-  
-.mr-73 {
-  margin-right: 73rem;
-}
-  
-.mr-74 {
-  margin-right: 74rem;
-}
-  
-.mr-75 {
-  margin-right: 75rem;
-}
-  
-.mr-76 {
-  margin-right: 76rem;
-}
-  
-.mr-77 {
-  margin-right: 77rem;
-}
-  
-.mr-78 {
-  margin-right: 78rem;
-}
-  
-.mr-79 {
-  margin-right: 79rem;
-}
-  
-.mr-80 {
-  margin-right: 80rem;
-}
-  
-.mr-81 {
-  margin-right: 81rem;
-}
-  
-.mr-82 {
-  margin-right: 82rem;
-}
-  
-.mr-83 {
-  margin-right: 83rem;
-}
-  
-.mr-84 {
-  margin-right: 84rem;
-}
-  
-.mr-85 {
-  margin-right: 85rem;
-}
-  
-.mr-86 {
-  margin-right: 86rem;
-}
-  
-.mr-87 {
-  margin-right: 87rem;
-}
-  
-.mr-88 {
-  margin-right: 88rem;
-}
-  
-.mr-89 {
-  margin-right: 89rem;
-}
-  
-.mr-90 {
-  margin-right: 90rem;
-}
-  
-.mr-91 {
-  margin-right: 91rem;
-}
-  
-.mr-92 {
-  margin-right: 92rem;
-}
-  
-.mr-93 {
-  margin-right: 93rem;
-}
-  
-.mr-94 {
-  margin-right: 94rem;
-}
-  
-.mr-95 {
-  margin-right: 95rem;
-}
-  
-.mr-96 {
-  margin-right: 96rem;
-}
-  
-.mr-97 {
-  margin-right: 97rem;
-}
-  
-.mr-98 {
-  margin-right: 98rem;
-}
-  
-.mr-99 {
-  margin-right: 99rem;
-}
-  
-.mt-0 {
-  margin-top: 0rem;
-}
-  
-.mt-1 {
-  margin-top: 1rem;
-}
-  
-.mt-2 {
-  margin-top: 2rem;
-}
-  
-.mt-3 {
-  margin-top: 3rem;
-}
-  
-.mt-4 {
-  margin-top: 4rem;
-}
-  
-.mt-5 {
-  margin-top: 5rem;
-}
-  
-.mt-6 {
-  margin-top: 6rem;
-}
-  
-.mt-7 {
-  margin-top: 7rem;
-}
-  
-.mt-8 {
-  margin-top: 8rem;
-}
-  
-.mt-9 {
-  margin-top: 9rem;
-}
-  
-.mt-10 {
-  margin-top: 10rem;
-}
-  
-.mt-11 {
-  margin-top: 11rem;
-}
-  
-.mt-12 {
-  margin-top: 12rem;
-}
-  
-.mt-13 {
-  margin-top: 13rem;
-}
-  
-.mt-14 {
-  margin-top: 14rem;
-}
-  
-.mt-15 {
-  margin-top: 15rem;
-}
-  
-.mt-16 {
-  margin-top: 16rem;
-}
-  
-.mt-17 {
-  margin-top: 17rem;
-}
-  
-.mt-18 {
-  margin-top: 18rem;
-}
-  
-.mt-19 {
-  margin-top: 19rem;
-}
-  
-.mt-20 {
-  margin-top: 20rem;
-}
-  
-.mt-21 {
-  margin-top: 21rem;
-}
-  
-.mt-22 {
-  margin-top: 22rem;
-}
-  
-.mt-23 {
-  margin-top: 23rem;
-}
-  
-.mt-24 {
-  margin-top: 24rem;
-}
-  
-.mt-25 {
-  margin-top: 25rem;
-}
-  
-.mt-26 {
-  margin-top: 26rem;
-}
-  
-.mt-27 {
-  margin-top: 27rem;
-}
-  
-.mt-28 {
-  margin-top: 28rem;
-}
-  
-.mt-29 {
-  margin-top: 29rem;
-}
-  
-.mt-30 {
-  margin-top: 30rem;
-}
-  
-.mt-31 {
-  margin-top: 31rem;
-}
-  
-.mt-32 {
-  margin-top: 32rem;
-}
-  
-.mt-33 {
-  margin-top: 33rem;
-}
-  
-.mt-34 {
-  margin-top: 34rem;
-}
-  
-.mt-35 {
-  margin-top: 35rem;
-}
-  
-.mt-36 {
-  margin-top: 36rem;
-}
-  
-.mt-37 {
-  margin-top: 37rem;
-}
-  
-.mt-38 {
-  margin-top: 38rem;
-}
-  
-.mt-39 {
-  margin-top: 39rem;
-}
-  
-.mt-40 {
-  margin-top: 40rem;
-}
-  
-.mt-41 {
-  margin-top: 41rem;
-}
-  
-.mt-42 {
-  margin-top: 42rem;
-}
-  
-.mt-43 {
-  margin-top: 43rem;
-}
-  
-.mt-44 {
-  margin-top: 44rem;
-}
-  
-.mt-45 {
-  margin-top: 45rem;
-}
-  
-.mt-46 {
-  margin-top: 46rem;
-}
-  
-.mt-47 {
-  margin-top: 47rem;
-}
-  
-.mt-48 {
-  margin-top: 48rem;
-}
-  
-.mt-49 {
-  margin-top: 49rem;
-}
-  
-.mt-50 {
-  margin-top: 50rem;
-}
-  
-.mt-51 {
-  margin-top: 51rem;
-}
-  
-.mt-52 {
-  margin-top: 52rem;
-}
-  
-.mt-53 {
-  margin-top: 53rem;
-}
-  
-.mt-54 {
-  margin-top: 54rem;
-}
-  
-.mt-55 {
-  margin-top: 55rem;
-}
-  
-.mt-56 {
-  margin-top: 56rem;
-}
-  
-.mt-57 {
-  margin-top: 57rem;
-}
-  
-.mt-58 {
-  margin-top: 58rem;
-}
-  
-.mt-59 {
-  margin-top: 59rem;
-}
-  
-.mt-60 {
-  margin-top: 60rem;
-}
-  
-.mt-61 {
-  margin-top: 61rem;
-}
-  
-.mt-62 {
-  margin-top: 62rem;
-}
-  
-.mt-63 {
-  margin-top: 63rem;
-}
-  
-.mt-64 {
-  margin-top: 64rem;
-}
-  
-.mt-65 {
-  margin-top: 65rem;
-}
-  
-.mt-66 {
-  margin-top: 66rem;
-}
-  
-.mt-67 {
-  margin-top: 67rem;
-}
-  
-.mt-68 {
-  margin-top: 68rem;
-}
-  
-.mt-69 {
-  margin-top: 69rem;
-}
-  
-.mt-70 {
-  margin-top: 70rem;
-}
-  
-.mt-71 {
-  margin-top: 71rem;
-}
-  
-.mt-72 {
-  margin-top: 72rem;
-}
-  
-.mt-73 {
-  margin-top: 73rem;
-}
-  
-.mt-74 {
-  margin-top: 74rem;
-}
-  
-.mt-75 {
-  margin-top: 75rem;
-}
-  
-.mt-76 {
-  margin-top: 76rem;
-}
-  
-.mt-77 {
-  margin-top: 77rem;
-}
-  
-.mt-78 {
-  margin-top: 78rem;
-}
-  
-.mt-79 {
-  margin-top: 79rem;
-}
-  
-.mt-80 {
-  margin-top: 80rem;
-}
-  
-.mt-81 {
-  margin-top: 81rem;
-}
-  
-.mt-82 {
-  margin-top: 82rem;
-}
-  
-.mt-83 {
-  margin-top: 83rem;
-}
-  
-.mt-84 {
-  margin-top: 84rem;
-}
-  
-.mt-85 {
-  margin-top: 85rem;
-}
-  
-.mt-86 {
-  margin-top: 86rem;
-}
-  
-.mt-87 {
-  margin-top: 87rem;
-}
-  
-.mt-88 {
-  margin-top: 88rem;
-}
-  
-.mt-89 {
-  margin-top: 89rem;
-}
-  
-.mt-90 {
-  margin-top: 90rem;
-}
-  
-.mt-91 {
-  margin-top: 91rem;
-}
-  
-.mt-92 {
-  margin-top: 92rem;
-}
-  
-.mt-93 {
-  margin-top: 93rem;
-}
-  
-.mt-94 {
-  margin-top: 94rem;
-}
-  
-.mt-95 {
-  margin-top: 95rem;
-}
-  
-.mt-96 {
-  margin-top: 96rem;
-}
-  
-.mt-97 {
-  margin-top: 97rem;
-}
-  
-.mt-98 {
-  margin-top: 98rem;
-}
-  
-.mt-99 {
-  margin-top: 99rem;
-}
-  
-.mb-0 {
-  margin-bottom: 0rem;
-}
-  
-.mb-1 {
-  margin-bottom: 1rem;
-}
-  
-.mb-2 {
-  margin-bottom: 2rem;
-}
-  
-.mb-3 {
-  margin-bottom: 3rem;
-}
-  
-.mb-4 {
-  margin-bottom: 4rem;
-}
-  
-.mb-5 {
-  margin-bottom: 5rem;
-}
-  
-.mb-6 {
-  margin-bottom: 6rem;
-}
-  
-.mb-7 {
-  margin-bottom: 7rem;
-}
-  
-.mb-8 {
-  margin-bottom: 8rem;
-}
-  
-.mb-9 {
-  margin-bottom: 9rem;
-}
-  
-.mb-10 {
-  margin-bottom: 10rem;
-}
-  
-.mb-11 {
-  margin-bottom: 11rem;
-}
-  
-.mb-12 {
-  margin-bottom: 12rem;
-}
-  
-.mb-13 {
-  margin-bottom: 13rem;
-}
-  
-.mb-14 {
-  margin-bottom: 14rem;
-}
-  
-.mb-15 {
-  margin-bottom: 15rem;
-}
-  
-.mb-16 {
-  margin-bottom: 16rem;
-}
-  
-.mb-17 {
-  margin-bottom: 17rem;
-}
-  
-.mb-18 {
-  margin-bottom: 18rem;
-}
-  
-.mb-19 {
-  margin-bottom: 19rem;
-}
-  
-.mb-20 {
-  margin-bottom: 20rem;
-}
-  
-.mb-21 {
-  margin-bottom: 21rem;
-}
-  
-.mb-22 {
-  margin-bottom: 22rem;
-}
-  
-.mb-23 {
-  margin-bottom: 23rem;
-}
-  
-.mb-24 {
-  margin-bottom: 24rem;
-}
-  
-.mb-25 {
-  margin-bottom: 25rem;
-}
-  
-.mb-26 {
-  margin-bottom: 26rem;
-}
-  
-.mb-27 {
-  margin-bottom: 27rem;
-}
-  
-.mb-28 {
-  margin-bottom: 28rem;
-}
-  
-.mb-29 {
-  margin-bottom: 29rem;
-}
-  
-.mb-30 {
-  margin-bottom: 30rem;
-}
-  
-.mb-31 {
-  margin-bottom: 31rem;
-}
-  
-.mb-32 {
-  margin-bottom: 32rem;
-}
-  
-.mb-33 {
-  margin-bottom: 33rem;
-}
-  
-.mb-34 {
-  margin-bottom: 34rem;
-}
-  
-.mb-35 {
-  margin-bottom: 35rem;
-}
-  
-.mb-36 {
-  margin-bottom: 36rem;
-}
-  
-.mb-37 {
-  margin-bottom: 37rem;
-}
-  
-.mb-38 {
-  margin-bottom: 38rem;
-}
-  
-.mb-39 {
-  margin-bottom: 39rem;
-}
-  
-.mb-40 {
-  margin-bottom: 40rem;
-}
-  
-.mb-41 {
-  margin-bottom: 41rem;
-}
-  
-.mb-42 {
-  margin-bottom: 42rem;
-}
-  
-.mb-43 {
-  margin-bottom: 43rem;
-}
-  
-.mb-44 {
-  margin-bottom: 44rem;
-}
-  
-.mb-45 {
-  margin-bottom: 45rem;
-}
-  
-.mb-46 {
-  margin-bottom: 46rem;
-}
-  
-.mb-47 {
-  margin-bottom: 47rem;
-}
-  
-.mb-48 {
-  margin-bottom: 48rem;
-}
-  
-.mb-49 {
-  margin-bottom: 49rem;
-}
-  
-.mb-50 {
-  margin-bottom: 50rem;
-}
-  
-.mb-51 {
-  margin-bottom: 51rem;
-}
-  
-.mb-52 {
-  margin-bottom: 52rem;
-}
-  
-.mb-53 {
-  margin-bottom: 53rem;
-}
-  
-.mb-54 {
-  margin-bottom: 54rem;
-}
-  
-.mb-55 {
-  margin-bottom: 55rem;
-}
-  
-.mb-56 {
-  margin-bottom: 56rem;
-}
-  
-.mb-57 {
-  margin-bottom: 57rem;
-}
-  
-.mb-58 {
-  margin-bottom: 58rem;
-}
-  
-.mb-59 {
-  margin-bottom: 59rem;
-}
-  
-.mb-60 {
-  margin-bottom: 60rem;
-}
-  
-.mb-61 {
-  margin-bottom: 61rem;
-}
-  
-.mb-62 {
-  margin-bottom: 62rem;
-}
-  
-.mb-63 {
-  margin-bottom: 63rem;
-}
-  
-.mb-64 {
-  margin-bottom: 64rem;
-}
-  
-.mb-65 {
-  margin-bottom: 65rem;
-}
-  
-.mb-66 {
-  margin-bottom: 66rem;
-}
-  
-.mb-67 {
-  margin-bottom: 67rem;
-}
-  
-.mb-68 {
-  margin-bottom: 68rem;
-}
-  
-.mb-69 {
-  margin-bottom: 69rem;
-}
-  
-.mb-70 {
-  margin-bottom: 70rem;
-}
-  
-.mb-71 {
-  margin-bottom: 71rem;
-}
-  
-.mb-72 {
-  margin-bottom: 72rem;
-}
-  
-.mb-73 {
-  margin-bottom: 73rem;
-}
-  
-.mb-74 {
-  margin-bottom: 74rem;
-}
-  
-.mb-75 {
-  margin-bottom: 75rem;
-}
-  
-.mb-76 {
-  margin-bottom: 76rem;
-}
-  
-.mb-77 {
-  margin-bottom: 77rem;
-}
-  
-.mb-78 {
-  margin-bottom: 78rem;
-}
-  
-.mb-79 {
-  margin-bottom: 79rem;
-}
-  
-.mb-80 {
-  margin-bottom: 80rem;
-}
-  
-.mb-81 {
-  margin-bottom: 81rem;
-}
-  
-.mb-82 {
-  margin-bottom: 82rem;
-}
-  
-.mb-83 {
-  margin-bottom: 83rem;
-}
-  
-.mb-84 {
-  margin-bottom: 84rem;
-}
-  
-.mb-85 {
-  margin-bottom: 85rem;
-}
-  
-.mb-86 {
-  margin-bottom: 86rem;
-}
-  
-.mb-87 {
-  margin-bottom: 87rem;
-}
-  
-.mb-88 {
-  margin-bottom: 88rem;
-}
-  
-.mb-89 {
-  margin-bottom: 89rem;
-}
-  
-.mb-90 {
-  margin-bottom: 90rem;
-}
-  
-.mb-91 {
-  margin-bottom: 91rem;
-}
-  
-.mb-92 {
-  margin-bottom: 92rem;
-}
-  
-.mb-93 {
-  margin-bottom: 93rem;
-}
-  
-.mb-94 {
-  margin-bottom: 94rem;
-}
-  
-.mb-95 {
-  margin-bottom: 95rem;
-}
-  
-.mb-96 {
-  margin-bottom: 96rem;
-}
-  
-.mb-97 {
-  margin-bottom: 97rem;
-}
-  
-.mb-98 {
-  margin-bottom: 98rem;
-}
-  
-.mb-99 {
-  margin-bottom: 99rem;
-}
-  
-.m-0 {
-  margin: 0rem;
-}
-  
-.m-1 {
-  margin: 1rem;
-}
-  
-.m-2 {
-  margin: 2rem;
-}
-  
-.m-3 {
-  margin: 3rem;
-}
-  
-.m-4 {
-  margin: 4rem;
-}
-  
-.m-5 {
-  margin: 5rem;
-}
-  
-.m-6 {
-  margin: 6rem;
-}
-  
-.m-7 {
-  margin: 7rem;
-}
-  
-.m-8 {
-  margin: 8rem;
-}
-  
-.m-9 {
-  margin: 9rem;
-}
-  
-.m-10 {
-  margin: 10rem;
-}
-  
-.m-11 {
-  margin: 11rem;
-}
-  
-.m-12 {
-  margin: 12rem;
-}
-  
-.m-13 {
-  margin: 13rem;
-}
-  
-.m-14 {
-  margin: 14rem;
-}
-  
-.m-15 {
-  margin: 15rem;
-}
-  
-.m-16 {
-  margin: 16rem;
-}
-  
-.m-17 {
-  margin: 17rem;
-}
-  
-.m-18 {
-  margin: 18rem;
-}
-  
-.m-19 {
-  margin: 19rem;
-}
-  
-.m-20 {
-  margin: 20rem;
-}
-  
-.m-21 {
-  margin: 21rem;
-}
-  
-.m-22 {
-  margin: 22rem;
-}
-  
-.m-23 {
-  margin: 23rem;
-}
-  
-.m-24 {
-  margin: 24rem;
-}
-  
-.m-25 {
-  margin: 25rem;
-}
-  
-.m-26 {
-  margin: 26rem;
-}
-  
-.m-27 {
-  margin: 27rem;
-}
-  
-.m-28 {
-  margin: 28rem;
-}
-  
-.m-29 {
-  margin: 29rem;
-}
-  
-.m-30 {
-  margin: 30rem;
-}
-  
-.m-31 {
-  margin: 31rem;
-}
-  
-.m-32 {
-  margin: 32rem;
-}
-  
-.m-33 {
-  margin: 33rem;
-}
-  
-.m-34 {
-  margin: 34rem;
-}
-  
-.m-35 {
-  margin: 35rem;
-}
-  
-.m-36 {
-  margin: 36rem;
-}
-  
-.m-37 {
-  margin: 37rem;
-}
-  
-.m-38 {
-  margin: 38rem;
-}
-  
-.m-39 {
-  margin: 39rem;
-}
-  
-.m-40 {
-  margin: 40rem;
-}
-  
-.m-41 {
-  margin: 41rem;
-}
-  
-.m-42 {
-  margin: 42rem;
-}
-  
-.m-43 {
-  margin: 43rem;
-}
-  
-.m-44 {
-  margin: 44rem;
-}
-  
-.m-45 {
-  margin: 45rem;
-}
-  
-.m-46 {
-  margin: 46rem;
-}
-  
-.m-47 {
-  margin: 47rem;
-}
-  
-.m-48 {
-  margin: 48rem;
-}
-  
-.m-49 {
-  margin: 49rem;
-}
-  
-.m-50 {
-  margin: 50rem;
-}
-  
-.m-51 {
-  margin: 51rem;
-}
-  
-.m-52 {
-  margin: 52rem;
-}
-  
-.m-53 {
-  margin: 53rem;
-}
-  
-.m-54 {
-  margin: 54rem;
-}
-  
-.m-55 {
-  margin: 55rem;
-}
-  
-.m-56 {
-  margin: 56rem;
-}
-  
-.m-57 {
-  margin: 57rem;
-}
-  
-.m-58 {
-  margin: 58rem;
-}
-  
-.m-59 {
-  margin: 59rem;
-}
-  
-.m-60 {
-  margin: 60rem;
-}
-  
-.m-61 {
-  margin: 61rem;
-}
-  
-.m-62 {
-  margin: 62rem;
-}
-  
-.m-63 {
-  margin: 63rem;
-}
-  
-.m-64 {
-  margin: 64rem;
-}
-  
-.m-65 {
-  margin: 65rem;
-}
-  
-.m-66 {
-  margin: 66rem;
-}
-  
-.m-67 {
-  margin: 67rem;
-}
-  
-.m-68 {
-  margin: 68rem;
-}
-  
-.m-69 {
-  margin: 69rem;
-}
-  
-.m-70 {
-  margin: 70rem;
-}
-  
-.m-71 {
-  margin: 71rem;
-}
-  
-.m-72 {
-  margin: 72rem;
-}
-  
-.m-73 {
-  margin: 73rem;
-}
-  
-.m-74 {
-  margin: 74rem;
-}
-  
-.m-75 {
-  margin: 75rem;
-}
-  
-.m-76 {
-  margin: 76rem;
-}
-  
-.m-77 {
-  margin: 77rem;
-}
-  
-.m-78 {
-  margin: 78rem;
-}
-  
-.m-79 {
-  margin: 79rem;
-}
-  
-.m-80 {
-  margin: 80rem;
-}
-  
-.m-81 {
-  margin: 81rem;
-}
-  
-.m-82 {
-  margin: 82rem;
-}
-  
-.m-83 {
-  margin: 83rem;
-}
-  
-.m-84 {
-  margin: 84rem;
-}
-  
-.m-85 {
-  margin: 85rem;
-}
-  
-.m-86 {
-  margin: 86rem;
-}
-  
-.m-87 {
-  margin: 87rem;
-}
-  
-.m-88 {
-  margin: 88rem;
-}
-  
-.m-89 {
-  margin: 89rem;
-}
-  
-.m-90 {
-  margin: 90rem;
-}
-  
-.m-91 {
-  margin: 91rem;
-}
-  
-.m-92 {
-  margin: 92rem;
-}
-  
-.m-93 {
-  margin: 93rem;
-}
-  
-.m-94 {
-  margin: 94rem;
-}
-  
-.m-95 {
-  margin: 95rem;
-}
-  
-.m-96 {
-  margin: 96rem;
-}
-  
-.m-97 {
-  margin: 97rem;
-}
-  
-.m-98 {
-  margin: 98rem;
-}
-  
-.m-99 {
-  margin: 99rem;
-}
-  
-/**********************
-  Padding classes
-**********************/
-  
-.pl-0 {
-  padding-left: 0rem;
-}
-  
-.pl-1 {
-  padding-left: 1rem;
-}
-  
-.pl-2 {
-  padding-left: 2rem;
-}
-  
-.pl-3 {
-  padding-left: 3rem;
-}
-  
-.pl-4 {
-  padding-left: 4rem;
-}
-  
-.pl-5 {
-  padding-left: 5rem;
-}
-  
-.pl-6 {
-  padding-left: 6rem;
-}
-  
-.pl-7 {
-  padding-left: 7rem;
-}
-  
-.pl-8 {
-  padding-left: 8rem;
-}
-  
-.pl-9 {
-  padding-left: 9rem;
-}
-  
-.pl-10 {
-  padding-left: 10rem;
-}
-  
-.pl-11 {
-  padding-left: 11rem;
-}
-  
-.pl-12 {
-  padding-left: 12rem;
-}
-  
-.pl-13 {
-  padding-left: 13rem;
-}
-  
-.pl-14 {
-  padding-left: 14rem;
-}
-  
-.pl-15 {
-  padding-left: 15rem;
-}
-  
-.pl-16 {
-  padding-left: 16rem;
-}
-  
-.pl-17 {
-  padding-left: 17rem;
-}
-  
-.pl-18 {
-  padding-left: 18rem;
-}
-  
-.pl-19 {
-  padding-left: 19rem;
-}
-  
-.pl-20 {
-  padding-left: 20rem;
-}
-  
-.pl-21 {
-  padding-left: 21rem;
-}
-  
-.pl-22 {
-  padding-left: 22rem;
-}
-  
-.pl-23 {
-  padding-left: 23rem;
-}
-  
-.pl-24 {
-  padding-left: 24rem;
-}
-  
-.pl-25 {
-  padding-left: 25rem;
-}
-  
-.pl-26 {
-  padding-left: 26rem;
-}
-  
-.pl-27 {
-  padding-left: 27rem;
-}
-  
-.pl-28 {
-  padding-left: 28rem;
-}
-  
-.pl-29 {
-  padding-left: 29rem;
-}
-  
-.pl-30 {
-  padding-left: 30rem;
-}
-  
-.pl-31 {
-  padding-left: 31rem;
-}
-  
-.pl-32 {
-  padding-left: 32rem;
-}
-  
-.pl-33 {
-  padding-left: 33rem;
-}
-  
-.pl-34 {
-  padding-left: 34rem;
-}
-  
-.pl-35 {
-  padding-left: 35rem;
-}
-  
-.pl-36 {
-  padding-left: 36rem;
-}
-  
-.pl-37 {
-  padding-left: 37rem;
-}
-  
-.pl-38 {
-  padding-left: 38rem;
-}
-  
-.pl-39 {
-  padding-left: 39rem;
-}
-  
-.pl-40 {
-  padding-left: 40rem;
-}
-  
-.pl-41 {
-  padding-left: 41rem;
-}
-  
-.pl-42 {
-  padding-left: 42rem;
-}
-  
-.pl-43 {
-  padding-left: 43rem;
-}
-  
-.pl-44 {
-  padding-left: 44rem;
-}
-  
-.pl-45 {
-  padding-left: 45rem;
-}
-  
-.pl-46 {
-  padding-left: 46rem;
-}
-  
-.pl-47 {
-  padding-left: 47rem;
-}
-  
-.pl-48 {
-  padding-left: 48rem;
-}
-  
-.pl-49 {
-  padding-left: 49rem;
-}
-  
-.pl-50 {
-  padding-left: 50rem;
-}
-  
-.pl-51 {
-  padding-left: 51rem;
-}
-  
-.pl-52 {
-  padding-left: 52rem;
-}
-  
-.pl-53 {
-  padding-left: 53rem;
-}
-  
-.pl-54 {
-  padding-left: 54rem;
-}
-  
-.pl-55 {
-  padding-left: 55rem;
-}
-  
-.pl-56 {
-  padding-left: 56rem;
-}
-  
-.pl-57 {
-  padding-left: 57rem;
-}
-  
-.pl-58 {
-  padding-left: 58rem;
-}
-  
-.pl-59 {
-  padding-left: 59rem;
-}
-  
-.pl-60 {
-  padding-left: 60rem;
-}
-  
-.pl-61 {
-  padding-left: 61rem;
-}
-  
-.pl-62 {
-  padding-left: 62rem;
-}
-  
-.pl-63 {
-  padding-left: 63rem;
-}
-  
-.pl-64 {
-  padding-left: 64rem;
-}
-  
-.pl-65 {
-  padding-left: 65rem;
-}
-  
-.pl-66 {
-  padding-left: 66rem;
-}
-  
-.pl-67 {
-  padding-left: 67rem;
-}
-  
-.pl-68 {
-  padding-left: 68rem;
-}
-  
-.pl-69 {
-  padding-left: 69rem;
-}
-  
-.pl-70 {
-  padding-left: 70rem;
-}
-  
-.pl-71 {
-  padding-left: 71rem;
-}
-  
-.pl-72 {
-  padding-left: 72rem;
-}
-  
-.pl-73 {
-  padding-left: 73rem;
-}
-  
-.pl-74 {
-  padding-left: 74rem;
-}
-  
-.pl-75 {
-  padding-left: 75rem;
-}
-  
-.pl-76 {
-  padding-left: 76rem;
-}
-  
-.pl-77 {
-  padding-left: 77rem;
-}
-  
-.pl-78 {
-  padding-left: 78rem;
-}
-  
-.pl-79 {
-  padding-left: 79rem;
-}
-  
-.pl-80 {
-  padding-left: 80rem;
-}
-  
-.pl-81 {
-  padding-left: 81rem;
-}
-  
-.pl-82 {
-  padding-left: 82rem;
-}
-  
-.pl-83 {
-  padding-left: 83rem;
-}
-  
-.pl-84 {
-  padding-left: 84rem;
-}
-  
-.pl-85 {
-  padding-left: 85rem;
-}
-  
-.pl-86 {
-  padding-left: 86rem;
-}
-  
-.pl-87 {
-  padding-left: 87rem;
-}
-  
-.pl-88 {
-  padding-left: 88rem;
-}
-  
-.pl-89 {
-  padding-left: 89rem;
-}
-  
-.pl-90 {
-  padding-left: 90rem;
-}
-  
-.pl-91 {
-  padding-left: 91rem;
-}
-  
-.pl-92 {
-  padding-left: 92rem;
-}
-  
-.pl-93 {
-  padding-left: 93rem;
-}
-  
-.pl-94 {
-  padding-left: 94rem;
-}
-  
-.pl-95 {
-  padding-left: 95rem;
-}
-  
-.pl-96 {
-  padding-left: 96rem;
-}
-  
-.pl-97 {
-  padding-left: 97rem;
-}
-  
-.pl-98 {
-  padding-left: 98rem;
-}
-  
-.pl-99 {
-  padding-left: 99rem;
-}
-  
-.pr-0 {
-  padding-right: 0rem;
-}
-  
-.pr-1 {
-  padding-right: 1rem;
-}
-  
-.pr-2 {
-  padding-right: 2rem;
-}
-  
-.pr-3 {
-  padding-right: 3rem;
-}
-  
-.pr-4 {
-  padding-right: 4rem;
-}
-  
-.pr-5 {
-  padding-right: 5rem;
-}
-  
-.pr-6 {
-  padding-right: 6rem;
-}
-  
-.pr-7 {
-  padding-right: 7rem;
-}
-  
-.pr-8 {
-  padding-right: 8rem;
-}
-  
-.pr-9 {
-  padding-right: 9rem;
-}
-  
-.pr-10 {
-  padding-right: 10rem;
-}
-  
-.pr-11 {
-  padding-right: 11rem;
-}
-  
-.pr-12 {
-  padding-right: 12rem;
-}
-  
-.pr-13 {
-  padding-right: 13rem;
-}
-  
-.pr-14 {
-  padding-right: 14rem;
-}
-  
-.pr-15 {
-  padding-right: 15rem;
-}
-  
-.pr-16 {
-  padding-right: 16rem;
-}
-  
-.pr-17 {
-  padding-right: 17rem;
-}
-  
-.pr-18 {
-  padding-right: 18rem;
-}
-  
-.pr-19 {
-  padding-right: 19rem;
-}
-  
-.pr-20 {
-  padding-right: 20rem;
-}
-  
-.pr-21 {
-  padding-right: 21rem;
-}
-  
-.pr-22 {
-  padding-right: 22rem;
-}
-  
-.pr-23 {
-  padding-right: 23rem;
-}
-  
-.pr-24 {
-  padding-right: 24rem;
-}
-  
-.pr-25 {
-  padding-right: 25rem;
-}
-  
-.pr-26 {
-  padding-right: 26rem;
-}
-  
-.pr-27 {
-  padding-right: 27rem;
-}
-  
-.pr-28 {
-  padding-right: 28rem;
-}
-  
-.pr-29 {
-  padding-right: 29rem;
-}
-  
-.pr-30 {
-  padding-right: 30rem;
-}
-  
-.pr-31 {
-  padding-right: 31rem;
-}
-  
-.pr-32 {
-  padding-right: 32rem;
-}
-  
-.pr-33 {
-  padding-right: 33rem;
-}
-  
-.pr-34 {
-  padding-right: 34rem;
-}
-  
-.pr-35 {
-  padding-right: 35rem;
-}
-  
-.pr-36 {
-  padding-right: 36rem;
-}
-  
-.pr-37 {
-  padding-right: 37rem;
-}
-  
-.pr-38 {
-  padding-right: 38rem;
-}
-  
-.pr-39 {
-  padding-right: 39rem;
-}
-  
-.pr-40 {
-  padding-right: 40rem;
-}
-  
-.pr-41 {
-  padding-right: 41rem;
-}
-  
-.pr-42 {
-  padding-right: 42rem;
-}
-  
-.pr-43 {
-  padding-right: 43rem;
-}
-  
-.pr-44 {
-  padding-right: 44rem;
-}
-  
-.pr-45 {
-  padding-right: 45rem;
-}
-  
-.pr-46 {
-  padding-right: 46rem;
-}
-  
-.pr-47 {
-  padding-right: 47rem;
-}
-  
-.pr-48 {
-  padding-right: 48rem;
-}
-  
-.pr-49 {
-  padding-right: 49rem;
-}
-  
-.pr-50 {
-  padding-right: 50rem;
-}
-  
-.pr-51 {
-  padding-right: 51rem;
-}
-  
-.pr-52 {
-  padding-right: 52rem;
-}
-  
-.pr-53 {
-  padding-right: 53rem;
-}
-  
-.pr-54 {
-  padding-right: 54rem;
-}
-  
-.pr-55 {
-  padding-right: 55rem;
-}
-  
-.pr-56 {
-  padding-right: 56rem;
-}
-  
-.pr-57 {
-  padding-right: 57rem;
-}
-  
-.pr-58 {
-  padding-right: 58rem;
-}
-  
-.pr-59 {
-  padding-right: 59rem;
-}
-  
-.pr-60 {
-  padding-right: 60rem;
-}
-  
-.pr-61 {
-  padding-right: 61rem;
-}
-  
-.pr-62 {
-  padding-right: 62rem;
-}
-  
-.pr-63 {
-  padding-right: 63rem;
-}
-  
-.pr-64 {
-  padding-right: 64rem;
-}
-  
-.pr-65 {
-  padding-right: 65rem;
-}
-  
-.pr-66 {
-  padding-right: 66rem;
-}
-  
-.pr-67 {
-  padding-right: 67rem;
-}
-  
-.pr-68 {
-  padding-right: 68rem;
-}
-  
-.pr-69 {
-  padding-right: 69rem;
-}
-  
-.pr-70 {
-  padding-right: 70rem;
-}
-  
-.pr-71 {
-  padding-right: 71rem;
-}
-  
-.pr-72 {
-  padding-right: 72rem;
-}
-  
-.pr-73 {
-  padding-right: 73rem;
-}
-  
-.pr-74 {
-  padding-right: 74rem;
-}
-  
-.pr-75 {
-  padding-right: 75rem;
-}
-  
-.pr-76 {
-  padding-right: 76rem;
-}
-  
-.pr-77 {
-  padding-right: 77rem;
-}
-  
-.pr-78 {
-  padding-right: 78rem;
-}
-  
-.pr-79 {
-  padding-right: 79rem;
-}
-  
-.pr-80 {
-  padding-right: 80rem;
-}
-  
-.pr-81 {
-  padding-right: 81rem;
-}
-  
-.pr-82 {
-  padding-right: 82rem;
-}
-  
-.pr-83 {
-  padding-right: 83rem;
-}
-  
-.pr-84 {
-  padding-right: 84rem;
-}
-  
-.pr-85 {
-  padding-right: 85rem;
-}
-  
-.pr-86 {
-  padding-right: 86rem;
-}
-  
-.pr-87 {
-  padding-right: 87rem;
-}
-  
-.pr-88 {
-  padding-right: 88rem;
-}
-  
-.pr-89 {
-  padding-right: 89rem;
-}
-  
-.pr-90 {
-  padding-right: 90rem;
-}
-  
-.pr-91 {
-  padding-right: 91rem;
-}
-  
-.pr-92 {
-  padding-right: 92rem;
-}
-  
-.pr-93 {
-  padding-right: 93rem;
-}
-  
-.pr-94 {
-  padding-right: 94rem;
-}
-  
-.pr-95 {
-  padding-right: 95rem;
-}
-  
-.pr-96 {
-  padding-right: 96rem;
-}
-  
-.pr-97 {
-  padding-right: 97rem;
-}
-  
-.pr-98 {
-  padding-right: 98rem;
-}
-  
-.pr-99 {
-  padding-right: 99rem;
-}
-  
-.pt-0 {
-  padding-top: 0rem;
-}
-  
-.pt-1 {
-  padding-top: 1rem;
-}
-  
-.pt-2 {
-  padding-top: 2rem;
-}
-  
-.pt-3 {
-  padding-top: 3rem;
-}
-  
-.pt-4 {
-  padding-top: 4rem;
-}
-  
-.pt-5 {
-  padding-top: 5rem;
-}
-  
-.pt-6 {
-  padding-top: 6rem;
-}
-  
-.pt-7 {
-  padding-top: 7rem;
-}
-  
-.pt-8 {
-  padding-top: 8rem;
-}
-  
-.pt-9 {
-  padding-top: 9rem;
-}
-  
-.pt-10 {
-  padding-top: 10rem;
-}
-  
-.pt-11 {
-  padding-top: 11rem;
-}
-  
-.pt-12 {
-  padding-top: 12rem;
-}
-  
-.pt-13 {
-  padding-top: 13rem;
-}
-  
-.pt-14 {
-  padding-top: 14rem;
-}
-  
-.pt-15 {
-  padding-top: 15rem;
-}
-  
-.pt-16 {
-  padding-top: 16rem;
-}
-  
-.pt-17 {
-  padding-top: 17rem;
-}
-  
-.pt-18 {
-  padding-top: 18rem;
-}
-  
-.pt-19 {
-  padding-top: 19rem;
-}
-  
-.pt-20 {
-  padding-top: 20rem;
-}
-  
-.pt-21 {
-  padding-top: 21rem;
-}
-  
-.pt-22 {
-  padding-top: 22rem;
-}
-  
-.pt-23 {
-  padding-top: 23rem;
-}
-  
-.pt-24 {
-  padding-top: 24rem;
-}
-  
-.pt-25 {
-  padding-top: 25rem;
-}
-  
-.pt-26 {
-  padding-top: 26rem;
-}
-  
-.pt-27 {
-  padding-top: 27rem;
-}
-  
-.pt-28 {
-  padding-top: 28rem;
-}
-  
-.pt-29 {
-  padding-top: 29rem;
-}
-  
-.pt-30 {
-  padding-top: 30rem;
-}
-  
-.pt-31 {
-  padding-top: 31rem;
-}
-  
-.pt-32 {
-  padding-top: 32rem;
-}
-  
-.pt-33 {
-  padding-top: 33rem;
-}
-  
-.pt-34 {
-  padding-top: 34rem;
-}
-  
-.pt-35 {
-  padding-top: 35rem;
-}
-  
-.pt-36 {
-  padding-top: 36rem;
-}
-  
-.pt-37 {
-  padding-top: 37rem;
-}
-  
-.pt-38 {
-  padding-top: 38rem;
-}
-  
-.pt-39 {
-  padding-top: 39rem;
-}
-  
-.pt-40 {
-  padding-top: 40rem;
-}
-  
-.pt-41 {
-  padding-top: 41rem;
-}
-  
-.pt-42 {
-  padding-top: 42rem;
-}
-  
-.pt-43 {
-  padding-top: 43rem;
-}
-  
-.pt-44 {
-  padding-top: 44rem;
-}
-  
-.pt-45 {
-  padding-top: 45rem;
-}
-  
-.pt-46 {
-  padding-top: 46rem;
-}
-  
-.pt-47 {
-  padding-top: 47rem;
-}
-  
-.pt-48 {
-  padding-top: 48rem;
-}
-  
-.pt-49 {
-  padding-top: 49rem;
-}
-  
-.pt-50 {
-  padding-top: 50rem;
-}
-  
-.pt-51 {
-  padding-top: 51rem;
-}
-  
-.pt-52 {
-  padding-top: 52rem;
-}
-  
-.pt-53 {
-  padding-top: 53rem;
-}
-  
-.pt-54 {
-  padding-top: 54rem;
-}
-  
-.pt-55 {
-  padding-top: 55rem;
-}
-  
-.pt-56 {
-  padding-top: 56rem;
-}
-  
-.pt-57 {
-  padding-top: 57rem;
-}
-  
-.pt-58 {
-  padding-top: 58rem;
-}
-  
-.pt-59 {
-  padding-top: 59rem;
-}
-  
-.pt-60 {
-  padding-top: 60rem;
-}
-  
-.pt-61 {
-  padding-top: 61rem;
-}
-  
-.pt-62 {
-  padding-top: 62rem;
-}
-  
-.pt-63 {
-  padding-top: 63rem;
-}
-  
-.pt-64 {
-  padding-top: 64rem;
-}
-  
-.pt-65 {
-  padding-top: 65rem;
-}
-  
-.pt-66 {
-  padding-top: 66rem;
-}
-  
-.pt-67 {
-  padding-top: 67rem;
-}
-  
-.pt-68 {
-  padding-top: 68rem;
-}
-  
-.pt-69 {
-  padding-top: 69rem;
-}
-  
-.pt-70 {
-  padding-top: 70rem;
-}
-  
-.pt-71 {
-  padding-top: 71rem;
-}
-  
-.pt-72 {
-  padding-top: 72rem;
-}
-  
-.pt-73 {
-  padding-top: 73rem;
-}
-  
-.pt-74 {
-  padding-top: 74rem;
-}
-  
-.pt-75 {
-  padding-top: 75rem;
-}
-  
-.pt-76 {
-  padding-top: 76rem;
-}
-  
-.pt-77 {
-  padding-top: 77rem;
-}
-  
-.pt-78 {
-  padding-top: 78rem;
-}
-  
-.pt-79 {
-  padding-top: 79rem;
-}
-  
-.pt-80 {
-  padding-top: 80rem;
-}
-  
-.pt-81 {
-  padding-top: 81rem;
-}
-  
-.pt-82 {
-  padding-top: 82rem;
-}
-  
-.pt-83 {
-  padding-top: 83rem;
-}
-  
-.pt-84 {
-  padding-top: 84rem;
-}
-  
-.pt-85 {
-  padding-top: 85rem;
-}
-  
-.pt-86 {
-  padding-top: 86rem;
-}
-  
-.pt-87 {
-  padding-top: 87rem;
-}
-  
-.pt-88 {
-  padding-top: 88rem;
-}
-  
-.pt-89 {
-  padding-top: 89rem;
-}
-  
-.pt-90 {
-  padding-top: 90rem;
-}
-  
-.pt-91 {
-  padding-top: 91rem;
-}
-  
-.pt-92 {
-  padding-top: 92rem;
-}
-  
-.pt-93 {
-  padding-top: 93rem;
-}
-  
-.pt-94 {
-  padding-top: 94rem;
-}
-  
-.pt-95 {
-  padding-top: 95rem;
-}
-  
-.pt-96 {
-  padding-top: 96rem;
-}
-  
-.pt-97 {
-  padding-top: 97rem;
-}
-  
-.pt-98 {
-  padding-top: 98rem;
-}
-  
-.pt-99 {
-  padding-top: 99rem;
-}
-  
-.pb-0 {
-  padding-bottom: 0rem;
-}
-  
-.pb-1 {
-  padding-bottom: 1rem;
-}
-  
-.pb-2 {
-  padding-bottom: 2rem;
-}
-  
-.pb-3 {
-  padding-bottom: 3rem;
-}
-  
-.pb-4 {
-  padding-bottom: 4rem;
-}
-  
-.pb-5 {
-  padding-bottom: 5rem;
-}
-  
-.pb-6 {
-  padding-bottom: 6rem;
-}
-  
-.pb-7 {
-  padding-bottom: 7rem;
-}
-  
-.pb-8 {
-  padding-bottom: 8rem;
-}
-  
-.pb-9 {
-  padding-bottom: 9rem;
-}
-  
-.pb-10 {
-  padding-bottom: 10rem;
-}
-  
-.pb-11 {
-  padding-bottom: 11rem;
-}
-  
-.pb-12 {
-  padding-bottom: 12rem;
-}
-  
-.pb-13 {
-  padding-bottom: 13rem;
-}
-  
-.pb-14 {
-  padding-bottom: 14rem;
-}
-  
-.pb-15 {
-  padding-bottom: 15rem;
-}
-  
-.pb-16 {
-  padding-bottom: 16rem;
-}
-  
-.pb-17 {
-  padding-bottom: 17rem;
-}
-  
-.pb-18 {
-  padding-bottom: 18rem;
-}
-  
-.pb-19 {
-  padding-bottom: 19rem;
-}
-  
-.pb-20 {
-  padding-bottom: 20rem;
-}
-  
-.pb-21 {
-  padding-bottom: 21rem;
-}
-  
-.pb-22 {
-  padding-bottom: 22rem;
-}
-  
-.pb-23 {
-  padding-bottom: 23rem;
-}
-  
-.pb-24 {
-  padding-bottom: 24rem;
-}
-  
-.pb-25 {
-  padding-bottom: 25rem;
-}
-  
-.pb-26 {
-  padding-bottom: 26rem;
-}
-  
-.pb-27 {
-  padding-bottom: 27rem;
-}
-  
-.pb-28 {
-  padding-bottom: 28rem;
-}
-  
-.pb-29 {
-  padding-bottom: 29rem;
-}
-  
-.pb-30 {
-  padding-bottom: 30rem;
-}
-  
-.pb-31 {
-  padding-bottom: 31rem;
-}
-  
-.pb-32 {
-  padding-bottom: 32rem;
-}
-  
-.pb-33 {
-  padding-bottom: 33rem;
-}
-  
-.pb-34 {
-  padding-bottom: 34rem;
-}
-  
-.pb-35 {
-  padding-bottom: 35rem;
-}
-  
-.pb-36 {
-  padding-bottom: 36rem;
-}
-  
-.pb-37 {
-  padding-bottom: 37rem;
-}
-  
-.pb-38 {
-  padding-bottom: 38rem;
-}
-  
-.pb-39 {
-  padding-bottom: 39rem;
-}
-  
-.pb-40 {
-  padding-bottom: 40rem;
-}
-  
-.pb-41 {
-  padding-bottom: 41rem;
-}
-  
-.pb-42 {
-  padding-bottom: 42rem;
-}
-  
-.pb-43 {
-  padding-bottom: 43rem;
-}
-  
-.pb-44 {
-  padding-bottom: 44rem;
-}
-  
-.pb-45 {
-  padding-bottom: 45rem;
-}
-  
-.pb-46 {
-  padding-bottom: 46rem;
-}
-  
-.pb-47 {
-  padding-bottom: 47rem;
-}
-  
-.pb-48 {
-  padding-bottom: 48rem;
-}
-  
-.pb-49 {
-  padding-bottom: 49rem;
-}
-  
-.pb-50 {
-  padding-bottom: 50rem;
-}
-  
-.pb-51 {
-  padding-bottom: 51rem;
-}
-  
-.pb-52 {
-  padding-bottom: 52rem;
-}
-  
-.pb-53 {
-  padding-bottom: 53rem;
-}
-  
-.pb-54 {
-  padding-bottom: 54rem;
-}
-  
-.pb-55 {
-  padding-bottom: 55rem;
-}
-  
-.pb-56 {
-  padding-bottom: 56rem;
-}
-  
-.pb-57 {
-  padding-bottom: 57rem;
-}
-  
-.pb-58 {
-  padding-bottom: 58rem;
-}
-  
-.pb-59 {
-  padding-bottom: 59rem;
-}
-  
-.pb-60 {
-  padding-bottom: 60rem;
-}
-  
-.pb-61 {
-  padding-bottom: 61rem;
-}
-  
-.pb-62 {
-  padding-bottom: 62rem;
-}
-  
-.pb-63 {
-  padding-bottom: 63rem;
-}
-  
-.pb-64 {
-  padding-bottom: 64rem;
-}
-  
-.pb-65 {
-  padding-bottom: 65rem;
-}
-  
-.pb-66 {
-  padding-bottom: 66rem;
-}
-  
-.pb-67 {
-  padding-bottom: 67rem;
-}
-  
-.pb-68 {
-  padding-bottom: 68rem;
-}
-  
-.pb-69 {
-  padding-bottom: 69rem;
-}
-  
-.pb-70 {
-  padding-bottom: 70rem;
-}
-  
-.pb-71 {
-  padding-bottom: 71rem;
-}
-  
-.pb-72 {
-  padding-bottom: 72rem;
-}
-  
-.pb-73 {
-  padding-bottom: 73rem;
-}
-  
-.pb-74 {
-  padding-bottom: 74rem;
-}
-  
-.pb-75 {
-  padding-bottom: 75rem;
-}
-  
-.pb-76 {
-  padding-bottom: 76rem;
-}
-  
-.pb-77 {
-  padding-bottom: 77rem;
-}
-  
-.pb-78 {
-  padding-bottom: 78rem;
-}
-  
-.pb-79 {
-  padding-bottom: 79rem;
-}
-  
-.pb-80 {
-  padding-bottom: 80rem;
-}
-  
-.pb-81 {
-  padding-bottom: 81rem;
-}
-  
-.pb-82 {
-  padding-bottom: 82rem;
-}
-  
-.pb-83 {
-  padding-bottom: 83rem;
-}
-  
-.pb-84 {
-  padding-bottom: 84rem;
-}
-  
-.pb-85 {
-  padding-bottom: 85rem;
-}
-  
-.pb-86 {
-  padding-bottom: 86rem;
-}
-  
-.pb-87 {
-  padding-bottom: 87rem;
-}
-  
-.pb-88 {
-  padding-bottom: 88rem;
-}
-  
-.pb-89 {
-  padding-bottom: 89rem;
-}
-  
-.pb-90 {
-  padding-bottom: 90rem;
-}
-  
-.pb-91 {
-  padding-bottom: 91rem;
-}
-  
-.pb-92 {
-  padding-bottom: 92rem;
-}
-  
-.pb-93 {
-  padding-bottom: 93rem;
-}
-  
-.pb-94 {
-  padding-bottom: 94rem;
-}
-  
-.pb-95 {
-  padding-bottom: 95rem;
-}
-  
-.pb-96 {
-  padding-bottom: 96rem;
-}
-  
-.pb-97 {
-  padding-bottom: 97rem;
-}
-  
-.pb-98 {
-  padding-bottom: 98rem;
-}
-  
-.pb-99 {
-  padding-bottom: 99rem;
-}
-  
-.p-0 {
-  padding: 0rem;
-}
-  
-.p-1 {
-  padding: 1rem;
-}
-  
-.p-2 {
-  padding: 2rem;
-}
-  
-.p-3 {
-  padding: 3rem;
-}
-  
-.p-4 {
-  padding: 4rem;
-}
-  
-.p-5 {
-  padding: 5rem;
-}
-  
-.p-6 {
-  padding: 6rem;
-}
-  
-.p-7 {
-  padding: 7rem;
-}
-  
-.p-8 {
-  padding: 8rem;
-}
-  
-.p-9 {
-  padding: 9rem;
-}
-  
-.p-10 {
-  padding: 10rem;
-}
-  
-.p-11 {
-  padding: 11rem;
-}
-  
-.p-12 {
-  padding: 12rem;
-}
-  
-.p-13 {
-  padding: 13rem;
-}
-  
-.p-14 {
-  padding: 14rem;
-}
-  
-.p-15 {
-  padding: 15rem;
-}
-  
-.p-16 {
-  padding: 16rem;
-}
-  
-.p-17 {
-  padding: 17rem;
-}
-  
-.p-18 {
-  padding: 18rem;
-}
-  
-.p-19 {
-  padding: 19rem;
-}
-  
-.p-20 {
-  padding: 20rem;
-}
-  
-.p-21 {
-  padding: 21rem;
-}
-  
-.p-22 {
-  padding: 22rem;
-}
-  
-.p-23 {
-  padding: 23rem;
-}
-  
-.p-24 {
-  padding: 24rem;
-}
-  
-.p-25 {
-  padding: 25rem;
-}
-  
-.p-26 {
-  padding: 26rem;
-}
-  
-.p-27 {
-  padding: 27rem;
-}
-  
-.p-28 {
-  padding: 28rem;
-}
-  
-.p-29 {
-  padding: 29rem;
-}
-  
-.p-30 {
-  padding: 30rem;
-}
-  
-.p-31 {
-  padding: 31rem;
-}
-  
-.p-32 {
-  padding: 32rem;
-}
-  
-.p-33 {
-  padding: 33rem;
-}
-  
-.p-34 {
-  padding: 34rem;
-}
-  
-.p-35 {
-  padding: 35rem;
-}
-  
-.p-36 {
-  padding: 36rem;
-}
-  
-.p-37 {
-  padding: 37rem;
-}
-  
-.p-38 {
-  padding: 38rem;
-}
-  
-.p-39 {
-  padding: 39rem;
-}
-  
-.p-40 {
-  padding: 40rem;
-}
-  
-.p-41 {
-  padding: 41rem;
-}
-  
-.p-42 {
-  padding: 42rem;
-}
-  
-.p-43 {
-  padding: 43rem;
-}
-  
-.p-44 {
-  padding: 44rem;
-}
-  
-.p-45 {
-  padding: 45rem;
-}
-  
-.p-46 {
-  padding: 46rem;
-}
-  
-.p-47 {
-  padding: 47rem;
-}
-  
-.p-48 {
-  padding: 48rem;
-}
-  
-.p-49 {
-  padding: 49rem;
-}
-  
-.p-50 {
-  padding: 50rem;
-}
-  
-.p-51 {
-  padding: 51rem;
-}
-  
-.p-52 {
-  padding: 52rem;
-}
-  
-.p-53 {
-  padding: 53rem;
-}
-  
-.p-54 {
-  padding: 54rem;
-}
-  
-.p-55 {
-  padding: 55rem;
-}
-  
-.p-56 {
-  padding: 56rem;
-}
-  
-.p-57 {
-  padding: 57rem;
-}
-  
-.p-58 {
-  padding: 58rem;
-}
-  
-.p-59 {
-  padding: 59rem;
-}
-  
-.p-60 {
-  padding: 60rem;
-}
-  
-.p-61 {
-  padding: 61rem;
-}
-  
-.p-62 {
-  padding: 62rem;
-}
-  
-.p-63 {
-  padding: 63rem;
-}
-  
-.p-64 {
-  padding: 64rem;
-}
-  
-.p-65 {
-  padding: 65rem;
-}
-  
-.p-66 {
-  padding: 66rem;
-}
-  
-.p-67 {
-  padding: 67rem;
-}
-  
-.p-68 {
-  padding: 68rem;
-}
-  
-.p-69 {
-  padding: 69rem;
-}
-  
-.p-70 {
-  padding: 70rem;
-}
-  
-.p-71 {
-  padding: 71rem;
-}
-  
-.p-72 {
-  padding: 72rem;
-}
-  
-.p-73 {
-  padding: 73rem;
-}
-  
-.p-74 {
-  padding: 74rem;
-}
-  
-.p-75 {
-  padding: 75rem;
-}
-  
-.p-76 {
-  padding: 76rem;
-}
-  
-.p-77 {
-  padding: 77rem;
-}
-  
-.p-78 {
-  padding: 78rem;
-}
-  
-.p-79 {
-  padding: 79rem;
-}
-  
-.p-80 {
-  padding: 80rem;
-}
-  
-.p-81 {
-  padding: 81rem;
-}
-  
-.p-82 {
-  padding: 82rem;
-}
-  
-.p-83 {
-  padding: 83rem;
-}
-  
-.p-84 {
-  padding: 84rem;
-}
-  
-.p-85 {
-  padding: 85rem;
-}
-  
-.p-86 {
-  padding: 86rem;
-}
-  
-.p-87 {
-  padding: 87rem;
-}
-  
-.p-88 {
-  padding: 88rem;
-}
-  
-.p-89 {
-  padding: 89rem;
-}
-  
-.p-90 {
-  padding: 90rem;
-}
-  
-.p-91 {
-  padding: 91rem;
-}
-  
-.p-92 {
-  padding: 92rem;
-}
-  
-.p-93 {
-  padding: 93rem;
-}
-  
-.p-94 {
-  padding: 94rem;
-}
-  
-.p-95 {
-  padding: 95rem;
-}
-  
-.p-96 {
-  padding: 96rem;
-}
-  
-.p-97 {
-  padding: 97rem;
-}
-  
-.p-98 {
-  padding: 98rem;
-}
-  
-.p-99 {
-  padding: 99rem;
-}
-  
\ No newline at end of file
+//Loop Count
+$sizing-count: 99;
+//
+@for $i from 0 through $sizing-count {
+  .w-#{$i} {width: #{$i}rem;} // Example: .w-12: 12rem;
+  .h-#{$i} {height: #{$i}rem;} // Example: .h-12: 12rem;
+  .m-#{$i} {margin: #{$i}rem;} // Example: .m-12: 12rem;
+  .mt-#{$i} {margin-top: #{$i}rem;} // Example: .mt-12: 12rem;
+  .mb-#{$i} {margin-bottom: #{$i}rem;} // Example: .mb-12: 12rem;
+  .ml-#{$i} {margin-left: #{$i}rem;} // Example: .ml-12: 12rem;
+  .mr-#{$i} {margin-right: #{$i}rem;} // Example: .mr-12: 12rem;
+  .p-#{$i} {padding: #{$i}rem;} // Example: .p-12: 12rem;
+  .pt-#{$i} {margin-top: #{$i}rem;} // Example: .pt-12: 12rem;
+  .pb-#{$i} {padding-bottom: #{$i}rem;} // Example: .pb-12: 12rem;
+  .pl-#{$i} {padding-left: #{$i}rem;} // Example: .pl-12: 12rem;
+  .pr-#{$i} {padding-right: #{$i}rem;} // Example: pr-12: 12rem;
+  }

From 20aa0ebb188433368e03f6c9bb4d5f2671797835 Mon Sep 17 00:00:00 2001
From: Jimmy 
Date: Thu, 26 Oct 2017 17:43:07 -0700
Subject: [PATCH 03/16] worksans arrow troubleshooting

---
 index.html      | 11 ++++++++---
 sass/base.scss  |  1 +
 sass/icons.scss | 11 +++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 sass/icons.scss

diff --git a/index.html b/index.html
index bac096f..57a9665 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,8 @@
   
   base.css - Urbit
   
-  
+  
+
   
 
 
@@ -14,7 +15,11 @@
     

       

         

-          
Hey, this is the base stylesheet for Urbit.

+          
Hey, this is the base stylesheet for Urbit.
+            
+            
+          

+
           
Urbit is often used for simple, markdown-based publishing.  This stylesheet is meant to make simple, text-heavy documents look clean, organized and readable.  And, to provide some basic layout tools that are easy to use when writing basic HTML.

           
As an open source project, the design guidelines for Urbit are necesarrily open.  Evolving the look and feel of Urbit is intended to be a community project.  Criticism is welcome; criticism in the form of a pull request is even better.

           
    
@@ -55,7 +60,7 @@ 
    Hey, this is the base stylesheet for Urbit.
    
         

 
         

-          
Type

+          
Type→

 
           
General type rules

           
There is a certain glibness in calling someone a legend, but if there's any artist worthy of the title it's Barbara Hammer, whose nearly 50-year career has spanned disciplines and broken boundaries, but has focused most especially on moving images. 

diff --git a/sass/base.scss b/sass/base.scss
index 6ad4569..e499980 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -4,6 +4,7 @@
 @import "typography";
 @import "buttons";
 @import "forms";
+@import "icons";
 @import "elements";
 @import "utilities";
 
diff --git a/sass/icons.scss b/sass/icons.scss
new file mode 100644
index 0000000..4cd2f3b
--- /dev/null
+++ b/sass/icons.scss
@@ -0,0 +1,11 @@
+.arrow-right:before {
+  content: "→";
+}
+
+.arrow-left:before {
+  content: "←";
+}
+
+.selected:before{
+  content: "∙"
+}

From 544942adad092e80414e9b3563c0d95206aec9e6 Mon Sep 17 00:00:00 2001
From: Jimmy 
Date: Fri, 27 Oct 2017 03:35:45 -0700
Subject: [PATCH 04/16] using @import to load stylistic arrows, be cautious of
 load times

---
 base.css             | 37 +++++++++++++++++++++++++++++++++++++
 index.html           | 13 ++++++++-----
 sass/icons.scss      | 26 ++++++++++++++++++++++++++
 sass/typography.scss |  2 ++
 4 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/base.css b/base.css
index 4855db3..fdc46a3 100644
--- a/base.css
+++ b/base.css
@@ -1,9 +1,12 @@
+@charset "UTF-8";
 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 /**
  * 1. Set default font family to sans-serif.
  * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
+@import url("https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900");
+@import url("https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&text=%E2%86%90|%E2%86%92");
 html {
   font-family: sans-serif;
   /* 1 */
@@ -968,6 +971,40 @@ input[type="text"] {
 .input-group.error .error-label {
   display: block; }
 
+.arrow-right:before {
+  content: "→"; }
+
+.arrow-left:before {
+  content: "←"; }
+
+.selected:before {
+  content: "∙"; }
+
+.icon {
+  margin-right: .6rem; }
+
+.icon.prev {
+  width: 1px;
+  height: 1px;
+  border: 12.0006px solid transparent;
+  border-right: 18px solid #000;
+  border-left: 0 solid transparent; }
+
+.icon.next {
+  width: 1px;
+  height: 1px;
+  border: 12.0006px solid transparent;
+  border-left: 18px solid #000;
+  border-right: 0 solid transparent;
+  margin-right: 0; }
+
+.icon.up {
+  width: 1px;
+  height: 1px;
+  border: 12.0006px solid transparent;
+  border-bottom: 18px solid #000;
+  border-top: 0 solid transparent; }
+
 /**********************
   Base elements
 **********************/
diff --git a/index.html b/index.html
index 57a9665..5f9c682 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
   
   base.css - Urbit
   
-  
+  
 
   
 
@@ -15,9 +15,7 @@
     

       

         

-          
Hey, this is the base stylesheet for Urbit.
-            
-            
+          
Hey, this is the base stylesheet for Urbit.​‌
           

 
           
Urbit is often used for simple, markdown-based publishing.  This stylesheet is meant to make simple, text-heavy documents look clean, organized and readable.  And, to provide some basic layout tools that are easy to use when writing basic HTML.

@@ -60,7 +58,7 @@ 
Hey, this is the base stylesheet for Urbit.
         

 
         

-          
Type→

+          
Type

 
           
General type rules

           
There is a certain glibness in calling someone a legend, but if there's any artist worthy of the title it's Barbara Hammer, whose nearly 50-year career has spanned disciplines and broken boundaries, but has focused most especially on moving images. 

@@ -470,6 +468,11 @@ 
Forms

             
           

           
+          
Icons / Circles

+          

+            
+            
+          

         

 
         

diff --git a/sass/icons.scss b/sass/icons.scss
index 4cd2f3b..2338f0b 100644
--- a/sass/icons.scss
+++ b/sass/icons.scss
@@ -9,3 +9,29 @@
 .selected:before{
   content: "∙"
 }
+//not production ready
+.icon{
+  margin-right:.6rem;
+}
+.icon.prev {
+  width: 1px;
+  height: 1px;
+  border: 12.0006px solid transparent;
+  border-right: 18px solid #000;
+  border-left: 0 solid transparent;
+}
+.icon.next {
+  width: 1px;
+  height: 1px;
+  border: 12.0006px solid transparent;
+  border-left: 18px solid #000;
+  border-right: 0 solid transparent;
+  margin-right:0;
+}
+.icon.up {
+  width: 1px;
+  height: 1px;
+  border: 12.0006px solid transparent;
+  border-bottom: 18px solid #000;
+  border-top: 0 solid transparent;
+}
diff --git a/sass/typography.scss b/sass/typography.scss
index df9c655..518d3c1 100644
--- a/sass/typography.scss
+++ b/sass/typography.scss
@@ -3,6 +3,8 @@
 /**********************
   Base text styles
 **********************/
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900');
+@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&text=%E2%86%90|%E2%86%92');
 
 * {
   font-smoothing: antialiased;

From e6522065bce5dc653759f3cb49f7a2c6b91f1838 Mon Sep 17 00:00:00 2001
From: Chris Johnson 
Date: Thu, 2 Nov 2017 16:17:21 -0700
Subject: [PATCH 05/16] Added some links, added margin/padding section

---
 index.html | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 5f9c682..da29998 100644
--- a/index.html
+++ b/index.html
@@ -38,10 +38,9 @@ 
Hey, this is the base stylesheet for Urbit.​‌
             
  • 
               Layout
               
             
    • 
             
  • 
@@ -257,7 +256,7 @@ 
    Lists
    
 
 
 
-          
    Layout and grids
    
+          
    Layout and grids
    
           
    There is a certain glibness in calling someone a legend, but if there's any artist worthy of the title it's Barbara Hammer, whose nearly 50-year career has spanned disciplines and broken boundaries, but has focused most especially on moving images. 
    
 
           
    Percent-based 12 column grid
    
@@ -398,7 +397,7 @@ 
    With breakpoints
    
   </div>
 </div>
    • -

    Fixed width / height utilities

    +

    Fixed width / height utilities

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    w-12
    @@ -432,7 +431,19 @@

    Fixed width / height utilities

    <div class="w-48 h-48 black-hl text-md text-mono text-700 center mr-3 mb-3">w-48<br />h-48</div> </div> -

    Margin / padding utilities

    +

    Margin / padding utilities

    +

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    + +
    mb-1
    +
    mb-2
    +
    mb-4
    +
    mb-8
    +
    mb-16
    +
    mt-16
    +
    mt-8
    +
    mt-4
    +
    mt-2
    +
    mt-1
    From 2c93179f6d62ce26dace33d01a9c8349ac153edb Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Thu, 2 Nov 2017 19:08:57 -0700 Subject: [PATCH 06/16] Began adding type scale. --- sass/base.scss | 4 ++++ sass/typography.scss | 17 +++++++++++++---- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/sass/base.scss b/sass/base.scss index e499980..f3a0863 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -11,3 +11,7 @@ * { box-sizing: border-box; } + +html { + font-size: 6px; +} diff --git a/sass/typography.scss b/sass/typography.scss index 518d3c1..f16c61c 100644 --- a/sass/typography.scss +++ b/sass/typography.scss @@ -1,5 +1,18 @@ @import "colors"; +/* + Type scale: + + small : 12px / 16px + body(*) : 16px / 24px + 5 : 20px / 28px + (? letter spacing, diff font, bold, uppercase, etc.) + 4 : 20px / 28px + 3 : 24px / 32px + 2 : 36px / 52px + 1 : 48px / 64px + +*/ + /********************** Base text styles **********************/ @@ -11,10 +24,6 @@ -webkit-font-smoothing: antialiased; } -html { - font-size: 6px; -} - body { /*font-family: "San Francisco Text", "Helvetica Neue", Helvetica, Arial, sans-serif;*/ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; From 2986e0ea810cc641cbc012d94ccca1f1d6b6c818 Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Fri, 3 Nov 2017 14:50:04 -0700 Subject: [PATCH 07/16] Change base grid size from 6px to 4px. Change type scale accordingly. --- index.html | 32 ++++++++------------- sass/base.scss | 2 +- sass/typography.scss | 67 ++++++++++++++++++-------------------------- 3 files changed, 40 insertions(+), 61 deletions(-) diff --git a/index.html b/index.html index da29998..3697f41 100644 --- a/index.html +++ b/index.html @@ -64,11 +64,11 @@

    General type rules

    Headings

    -

    Heading 1 60/72 px

    -

    Heading 2 48/60 px

    -

    Heading 3 36/36 px

    -

    Heading 4 24/30 px

    -
    Heading 5 18/24 px
    +

    Heading 1 48/64 px

    +

    Heading 2 36/52 px

    +

    Heading 3 24/32 px

    +

    Heading 4 20/28 px

    +
    Heading 5 20/28 px
    @@ -97,23 +97,15 @@ 
    Centered
    
 
           
    Modifiers
    
           
    Size
    
+          
    Now it is a game, I am going to play.
    
+          
    Now it is a game, I am going to play.
    
           
    Now it is a game, I am going to play.
    
           
    Now it is a game, I am going to play.
    
-          
    Now it is a game, I am going to play.
    
-          
    <p>Now it is a game, I am going to play.</p>
-<p class="text-sm">Now it is a game, I am going to play.</p>
-<p class="text-xs">Now it is a game, I am going to play.</p>
    
-          
    Line-height
    
-          
    There is a certain glibness in calling someone a legend.
    
-          
    There is a certain glibness in calling someone a legend.
    
-          
    There is a certain glibness in calling someone a legend.
    
-          
    There is a certain glibness in calling someone a legend.
    
-          
    There is a certain glibness in calling someone a legend.
    
-          
    <p class="text-lh-lg">There is a certain glibness in calling someone a legend.</p>
-<p class="text-lh-md">There is a certain glibness in calling someone a legend.</p>
-<p>There is a certain glibness in calling someone a legend.</p>
-<p class="text-lh-sm">There is a certain glibness in calling someone a legend.</p>
-<p class="text-lh-xs">There is a certain glibness in calling someone a legend.</p>
    
+
+          
    <p class="text-lg">Now it is a game, I am going to play.</p>
+<p class="text-md">Now it is a game, I am going to play.</p>
+<p>Now it is a game, I am going to play.</p>
+<p class="text-sm">Now it is a game, I am going to play.</p>
    
           
    Formatting
    
           
    Such is the earnestness from which I have never been able to depart.
    
           
    Such is the earnestness from which I have never been able to depart.
    
diff --git a/sass/base.scss b/sass/base.scss
index f3a0863..53cfc04 100644
--- a/sass/base.scss
+++ b/sass/base.scss
@@ -13,5 +13,5 @@
 }
 
 html {
-  font-size: 6px;
+  font-size: 4px;
 }
diff --git a/sass/typography.scss b/sass/typography.scss
index f16c61c..c9d1b79 100644
--- a/sass/typography.scss
+++ b/sass/typography.scss
@@ -5,7 +5,7 @@
 
   small   :  12px / 16px
   body(*) :  16px / 24px
-  5       :  20px / 28px + (? letter spacing, diff font, bold, uppercase, etc.)
+  large/5 :  20px / 28px + (? letter spacing, diff font, bold, uppercase, etc.)
   4       :  20px / 28px
   3       :  24px / 32px
   2       :  36px / 52px
@@ -27,8 +27,8 @@
 body {
   /*font-family: "San Francisco Text", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 3rem;
-  line-height: 5rem;
+  font-size: 4rem;
+  line-height: 6rem;
   color: $gray-dark;
 }
 
@@ -57,17 +57,17 @@ h5,
 
 h1,
 .h1 {
-  font-size: 10rem;
+  font-size: 12rem;
   font-weight: 600;
-  line-height: 12rem;
+  line-height: 16rem;
   margin: 4rem 0;
 }
 
 h2,
 .h2 {
-  font-size: 8rem;
+  font-size: 9rem;
   font-weight: 600;
-  line-height: 10rem;
+  line-height: 13rem;
   margin: 3rem 0;
 }
 
@@ -75,26 +75,41 @@ h3,
 .h3 {
   font-size: 6rem;
   font-weight: 600;
-  line-height: 6rem;
+  line-height: 8rem;
   margin: 2rem 0;
 }
 
 h4,
 .h4 {
-  font-size: 4rem;
+  font-size: 5rem;
   font-weight: 600;
-  line-height: 5rem;
+  line-height: 7rem;
   margin: 1rem 0;
 }
 
 h5,
 .h5 {
-  font-size: 3rem;
+  font-size: 5rem;
   font-weight: 500;
-  line-height: 4rem;
+  line-height: 7rem;
   margin: 1rem 0;
 }
 
+caption, .text-sm {
+  font-size: 3rem;
+  line-height: 5rem;
+}
+
+.text-md {
+  font-size: 4rem;
+  line-height: 6rem;
+}
+
+.text-lg {
+  font-size: 5rem;
+  line-height: 7rem;
+}
+
 /**********************
   Preformatted
 **********************/
@@ -127,34 +142,6 @@ code,
   font-weight: 200;
 }
 
-/**********************
-  Text sizes
-**********************/
-
-.text-xs {
-  font-size: 1.5rem;
-}
-
-.text-sm {
-  font-size: 2rem;
-}
-
-.text-lh-xs {
-  line-height: 2rem;
-}
-
-.text-lh-sm {
-  line-height: 3rem;
-}
-
-.text-lh-md {
-  line-height: 6rem;
-}
-
-.text-lh-lg {
-  line-height: 10rem;
-}
-
 /**********************
   Formatting
 **********************/

From 367c5f5ff6e6e632171f6d6dfa4d6532f508d878 Mon Sep 17 00:00:00 2001
From: Chris Johnson 
Date: Fri, 3 Nov 2017 15:03:38 -0700
Subject: [PATCH 08/16] Delete unused utility class generation file

---
 gen/utility-classes.rb | 123 -----------------------------------------
 1 file changed, 123 deletions(-)
 delete mode 100644 gen/utility-classes.rb

diff --git a/gen/utility-classes.rb b/gen/utility-classes.rb
deleted file mode 100644
index 13a0219..0000000
--- a/gen/utility-classes.rb
+++ /dev/null
@@ -1,123 +0,0 @@
-GENFILE = "../sass/utilities.scss"
-
-PROPERTIES = [{         # Properties we want to generate
-  name: "width",        # Name of CSS property
-  shorthand: "w",       # Name of CSS class (IE, .w8)
-  maximum: 100,         # Maximum value of property (IE, .w100)
-  multiple: 1           # Only generate multiples of this number (2 = .w2, .w4, .w6...)
-}, {
-  name: "height",
-  shorthand: "h",
-  maximum: 100,
-  multiple: 1
-}, {
-  name: "margin",
-  shorthand: "m",
-  multiple: 1,
-  maximum: 100,
-  all_sides: true
-}, {
-  name: "padding",
-  shorthand: "p",
-  multiple: 1,
-  maximum: 100,
-  all_sides: true
-}]
-
-def main
-  css_objects = generate_classes(PROPERTIES)
-  print_classes(css_objects)
-end
-
-def generate_classes (props)
-  css_objs = {} # Array of objects that represent CSS classes, grouped by property
-
-  props.each do |prop|
-    css_objs[prop[:name]] = {}
-
-    if prop[:all_sides]
-      css_objs[prop[:name]][:classes] = gen_multiple(prop).concat(gen_single(prop))
-    else
-      css_objs[prop[:name]][:classes] = gen_single(prop)
-    end
-  end
-
-  return css_objs
-end
-
-def gen_single(prop)
-  css_classes = []  # Individual CSS classes
-
-  num_classes = prop[:maximum] / prop[:multiple]
-  num_classes.times do |i|
-    value = i * prop[:multiple]
-    css_classes.push({
-      identifier: ".#{prop[:shorthand]}-#{value}",
-      prop_name: "#{prop[:name]}",
-      prop_value: "#{value}rem"
-    })
-  end
-
-  return css_classes
-end
-
-def gen_multiple (prop)
-  css_classes = []  # Individual CSS classes
-
-  sides = [{
-    name: "left",
-    shorthand: "l"
-  }, {
-    name: "right",
-    shorthand: "r"
-  }, {
-    name: "top",
-    shorthand: "t"
-  }, {
-    name: "bottom",
-    shorthand: "b"
-  }]
-
-  sides.each do |side|
-    side_prop = prop.clone()
-
-    side_prop[:shorthand] = "#{prop[:shorthand]}#{side[:shorthand]}"
-    side_prop[:name] = "#{prop[:name]}-#{side[:name]}"
-    side_classes = gen_single(side_prop)
-    css_classes.concat(side_classes)
-  end
-
-  return css_classes
-end
-
-def section_template(name)
-  %(
-/**********************
-  #{name.capitalize} classes
-**********************/
-  )
-end
-
-def class_template(css_class)
-  %(
-#{css_class[:identifier]} {
-  #{css_class[:prop_name]}: #{css_class[:prop_value]};
-}
-  )
-end
-
-def print_classes (prop_groups)
-  big_css_string = ""
-
-  prop_groups.each do |name, group|
-    big_css_string += section_template(name)
-
-    group[:classes].each do |css_class|
-      big_css_string += class_template(css_class)
-    end
-  end
-
-  File.open(GENFILE, "w") { |file| file.write(big_css_string) }
-end
-
-main()

From 5c152ad906bc02809ba4b1ebc7c92ae07438f7c9 Mon Sep 17 00:00:00 2001
From: Chris Johnson 
Date: Fri, 3 Nov 2017 15:03:58 -0700
Subject: [PATCH 09/16] Added more buttons; added code blocks to styleguide
 page

---
 index.html           | 112 +++++++++++++++++++++++++++----------------
 sass/buttons.scss    |  16 ++++++-
 sass/typography.scss |   4 +-
 3 files changed, 87 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index 3697f41..b3628a8 100644
--- a/index.html
+++ b/index.html
@@ -426,36 +426,67 @@ 
    Fixed width / height utilities
    
           
    Margin / padding utilities
    
           
    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.
    
 
-          
    mb-1
    
-          
    mb-2
    
-          
    mb-4
    
-          
    mb-8
    
-          
    mb-16
    
-          
    mt-16
    
-          
    mt-8
    
-          
    mt-4
    
-          
    mt-2
    
-          
    mt-1
    
-
+          
    
+            
    mb-1
    
+            
    mb-2
    
+            
    mb-4
    
+            
    mb-8
    
+            
    mb-16
    
+            
    mt-16
    
+            
    mt-8
    
+            
    mt-4
    
+            
    mt-2
    
+            
    mt-1
    
+          
    
         
 
+        
    <div class="row">
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-1">mb-1</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-2">mb-2</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-4">mb-4</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-8">mb-8</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-16">mb-16</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-16">mt-16</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-8">mt-8</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-4">mt-4</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-2">mt-2</div>
+  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-1">mt-1</div>
+</div>
    
+
         
    
           
    Buttons
    
-          
-          
-          
-          
-          
-
-          
    Button groups
    
-          
    
-            
-            
+          
    
+            
+            
+            
+            
+            
           
    
-          
    
-            
-            
+
+          
    
+            
+            
+            
+            
+            
           
    
+
+          
    <div class="row">
+  <button class="btn mr-2">Action</button>
+  <button class="btn mr-2 btn-primary">Action</button>
+  <button class="btn mr-2 btn-secondary">Action</button>
+  <button class="btn mr-2 btn-tetiary">Action</button>
+  <button class="btn mr-2 btn-warning">Serious action</button>
+</div>
+
+<div class="row">
+  <button class="btn btn-sm mr-2">Action</button>
+  <button class="btn btn-sm mr-2 btn-primary">Action</button>
+  <button class="btn btn-sm mr-2 btn-secondary">Action</button>
+  <button class="btn btn-sm mr-2 btn-tetiary">Action</button>
+  <button class="btn btn-sm mr-2 btn-warning">Serious action</button>
+</div>
    
+
           
    Forms
    
           
    
             
@@ -479,23 +510,22 @@ 
    
         
    
 
         
    
-          
    
-    ++  watch-dir
-    |=  a/path
-    ^-  (list move)
-    =/  soc/sock
-    [our.hid our.hid]
-    =/  rav/rave
-    [%next %z da+now.hid a]
-    =/  rif/riff
-    [%home [~ rav]]
-    =/  car/card
-    :^
-    %warp
-    a
-    soc
-    rif
-    [[ost.hid car] ~]
+          
    ++  watch-dir
+|=  a/path
+^-  (list move)
+=/  soc/sock
+[our.hid our.hid]
+=/  rav/rave
+[%next %z da+now.hid a]
+=/  rif/riff
+[%home [~ rav]]
+=/  car/card
+:^
+%warp
+a
+soc
+rif
+[[ost.hid car] ~]
    diff --git a/sass/buttons.scss b/sass/buttons.scss index 1c9ea9a..3534765 100644 --- a/sass/buttons.scss +++ b/sass/buttons.scss @@ -12,16 +12,25 @@ button { button, .btn { font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; + font-size: 4rem; + line-height: 4rem; - padding: 6px 12px; - color: white; + padding: 3rem 6rem; + color: black; background-color: $gray-light; margin: 0 0 6px; } +.btn-sm { + font-size: 3rem; + line-height: 3rem; + padding: 2rem 4rem; +} + .btn-primary { background-color: $blue; + color: white; } .btn-secondary { @@ -30,10 +39,12 @@ button, .btn { .btn-tetiary { background-color: $gray; + color: white; } .btn-warning { background-color: $red; + color: white; } .btn-group { @@ -43,5 +54,6 @@ button, .btn { .btn:not(.active) { background-color: $gray-light; + color: black; } } diff --git a/sass/typography.scss b/sass/typography.scss index c9d1b79..641d032 100644 --- a/sass/typography.scss +++ b/sass/typography.scss @@ -133,8 +133,8 @@ code, } .code-block { - background-color: #F4F4F4; - padding: 3rem; + background-color: $gray-lighter; + padding: 5rem; white-space: pre-wrap; } From 85465b7c3300131d861a1880a090b300f79f7a50 Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Fri, 3 Nov 2017 16:19:13 -0700 Subject: [PATCH 10/16] Added sections and code samples to the index page --- index.html | 92 +++++++++++++++++++++++++++++++++++++++---------- sass/forms.scss | 1 + 2 files changed, 75 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index b3628a8..6215be2 100644 --- a/index.html +++ b/index.html @@ -424,7 +424,7 @@

    Fixed width / height utilities

    </div>

    Margin / padding utilities

    -

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    +

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    mb-1
    @@ -454,7 +454,10 @@

    Margin / padding utilities

    </div>
    -

    Buttons

    +

    Buttons

    + +

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    +
    @@ -487,29 +490,74 @@

    Buttons

    <button class="btn btn-sm mr-2 btn-warning">Serious action</button> </div> -

    Forms

    -
    - - -
    -
    - - -
    Age must be a number.
    -
    -
    - - +

    Forms

    + +

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    + +
    +
    +
    + + +
    +
    + + +
    Age must be a number.
    +
    +
    +
    +
    + + +
    +
    +
    - -

    Icons / Circles

    + + 
    <div class="row">
+  <div class="col-md-4">
+    <div class="input-group">
+      <label>Name</label>
+      <input type="text" />
+    </div>
+    <div class="input-group error">
+      <label>Age</label>
+      <input type="text" value="John" />
+      <div class="error-label">Age must be a number.</div>
+    </div>
+  </div>
+  <div class="col-md-7 col-md-offset-1">
+    <div class="input-group">
+      <label>Message</label>
+      <textarea rows="6"></textarea>
+    </div>
+  </div>
+  <button type="submit" class="btn btn-secondary">Send</button>
+</div>
+
    + +

    Icons / Circles

    + +

    Line of filler text.

    +

    + + 
    <h3>
+  <icon class="arrow-left"></icon>
+  <icon class="arrow-right"></icon>
+</h3>
    +
    -
    +
    +

    Code blocks

    + +

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    + 
    ++  watch-dir
 |=  a/path
 ^-  (list move)
@@ -527,7 +575,15 @@ 
    
 rif
 [[ost.hid car] ~]
    + +

    (The code for the above is)

    + + 
    <pre class="code-block"><code class="text-code">
+  ...
+</code></pre>
    +

    ===

    +

    Happy coding!

    diff --git a/sass/forms.scss b/sass/forms.scss index b79594b..8d24e61 100644 --- a/sass/forms.scss +++ b/sass/forms.scss @@ -7,6 +7,7 @@ textarea, input[type="text"] { border: .5rem solid #000; padding: 12px; + width: 100%; } .error-label { From d1c48a4daa53f05a919b030deaf6bf488b6144e8 Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Fri, 3 Nov 2017 16:34:10 -0700 Subject: [PATCH 11/16] Added navigation links for new sections --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 6215be2..4ee3afb 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@

    Hey, this is the base stylesheet for Urbit.​‌
  • Layout @@ -46,9 +46,9 @@

    Hey, this is the base stylesheet for Urbit.​‌
  • Forms & Elements
  • Source code & contributing
    • @@ -454,7 +454,7 @@

    Margin / padding utilities

    </div>
    -

    Buttons

    +

    Buttons

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    @@ -490,7 +490,7 @@

    Buttons

    <button class="btn btn-sm mr-2 btn-warning">Serious action</button> </div> -

    Forms

    +

    Forms

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    @@ -537,7 +537,7 @@

    Forms

    </div> -

    Icons / Circles

    +

    Icons / Circles

    Line of filler text.

    From 5e9756ae9a61dd5c587e086c6ec36267ee39680d Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Fri, 3 Nov 2017 16:49:18 -0700 Subject: [PATCH 12/16] Added section for vertical/horizontal alignment, & added extra copy to margin/padding utilities section to indicate which variables are available --- index.html | 82 +++++++++++++++++++++++++++++++++------------ sass/grid.scss | 8 +++++ sass/utilities.scss | 2 +- 3 files changed, 69 insertions(+), 23 deletions(-) diff --git a/index.html b/index.html index 4ee3afb..e85f9cc 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,7 @@

    Hey, this is the base stylesheet for Urbit.​‌
  • Grid system
  • Width / height utilities
  • Margin / padding utilities
    • +
  • Vertical / horizontal centering

  • @@ -427,31 +428,68 @@

    Margin / padding utilities

    Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.

    -
    mb-1
    -
    mb-2
    -
    mb-4
    -
    mb-8
    -
    mb-16
    -
    mt-16
    -
    mt-8
    -
    mt-4
    -
    mt-2
    -
    mt-1
    +
    mb-1
    +
    mb-2
    +
    mb-4
    +
    mb-8
    +
    mb-16
    +
    mt-16
    +
    mt-8
    +
    mt-4
    +
    mt-2
    +
    mt-1
    +
    + + 
    <div class="row">
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-1">mb-1</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-2">mb-2</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-4">mb-4</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-8">mb-8</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-16">mb-16</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-16">mt-16</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-8">mt-8</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-4">mt-4</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-2">mt-2</div>
+    <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-1">mt-1</div>
+  </div>
    + +

    The properties exposed for these utilities are given by the following Sass definitions.

    +

    Property values 0 - 99 are currently available ($sizing-count == 99)

    + + 
    @for $i from 0 through $sizing-count {
+  .w-#{$i} {width: #{$i}rem;} // Example: .w-12: 12rem;
+  .h-#{$i} {height: #{$i}rem;} // Example: .h-12: 12rem;
+  .m-#{$i} {margin: #{$i}rem;} // Example: .m-12: 12rem;
+  .mt-#{$i} {margin-top: #{$i}rem;} // Example: .mt-12: 12rem;
+  .mb-#{$i} {margin-bottom: #{$i}rem;} // Example: .mb-12: 12rem;
+  .ml-#{$i} {margin-left: #{$i}rem;} // Example: .ml-12: 12rem;
+  .mr-#{$i} {margin-right: #{$i}rem;} // Example: .mr-12: 12rem;
+  .p-#{$i} {padding: #{$i}rem;} // Example: .p-12: 12rem;
+  .pt-#{$i} {margin-top: #{$i}rem;} // Example: .pt-12: 12rem;
+  .pb-#{$i} {padding-bottom: #{$i}rem;} // Example: .pb-12: 12rem;
+  .pl-#{$i} {padding-left: #{$i}rem;} // Example: .pl-12: 12rem;
+  .pr-#{$i} {padding-right: #{$i}rem;} // Example: pr-12: 12rem;
+}
    + + +

    Vertical / horizontal centering

    + +
    +
    +

    Use of Flexbox is encouraged.

    +

    For example, here is how you center an element inside of another element

    +
    +
    +
    +
    Center me!
    +
    +
    - - 
    <div class="row">
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-1">mb-1</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-2">mb-2</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-4">mb-4</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-8">mb-8</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mb-16">mb-16</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-16">mt-16</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-8">mt-8</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-4">mt-4</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-2">mt-2</div>
-  <div class="w-100 black-hl text-md text-mono text-700 center mr-3 p-1 mt-1">mt-1</div>
+          
    <div class="w-48 h-48 black-hl text-md row align-vertical justify-center">
+  <div>Center me!</div>
 </div>
    
+        
 
         
    
           
    Buttons
    
diff --git a/sass/grid.scss b/sass/grid.scss
index 7a7db07..3e1df2a 100644
--- a/sass/grid.scss
+++ b/sass/grid.scss
@@ -23,6 +23,14 @@
   flex-wrap: wrap;
 }
 
+.align-vertical {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
 @media #{$viewport-sm-up} {
   .col-sm,
   .col-sm-1,
diff --git a/sass/utilities.scss b/sass/utilities.scss
index 9e98caf..f0f911f 100644
--- a/sass/utilities.scss
+++ b/sass/utilities.scss
@@ -18,4 +18,4 @@ $sizing-count: 99;
   .pb-#{$i} {padding-bottom: #{$i}rem;} // Example: .pb-12: 12rem;
   .pl-#{$i} {padding-left: #{$i}rem;} // Example: .pl-12: 12rem;
   .pr-#{$i} {padding-right: #{$i}rem;} // Example: pr-12: 12rem;
-  }
+}

From a651619ed5b2d71cdb95d16920033ed50dfb6686 Mon Sep 17 00:00:00 2001
From: Chris Johnson 
Date: Mon, 6 Nov 2017 12:20:26 -0800
Subject: [PATCH 13/16] Remove text-lh classes. Commit compiled base.css from
 last several changes.

---
 base.css   | 109 ++++++++++++++++++++++++++++++++---------------------
 index.html |  24 ++++++------
 2 files changed, 77 insertions(+), 56 deletions(-)

diff --git a/base.css b/base.css
index fdc46a3..836c273 100644
--- a/base.css
+++ b/base.css
@@ -399,6 +399,12 @@ th {
   display: flex;
   flex-wrap: wrap; }
 
+.align-vertical {
+  align-items: center; }
+
+.justify-center {
+  justify-content: center; }
+
 @media only screen and (min-width: 0) {
   .col-sm,
   .col-sm-1,
@@ -687,6 +693,18 @@ th {
   .col-lg-offset-11 {
     margin-left: 91.66666667%; } }
 
+/*
+  Type scale:
+
+  small   :  12px / 16px
+  body(*) :  16px / 24px
+  large/5 :  20px / 28px + (? letter spacing, diff font, bold, uppercase, etc.)
+  4       :  20px / 28px
+  3       :  24px / 32px
+  2       :  36px / 52px
+  1       :  48px / 64px
+
+*/
 /**********************
   Base text styles
 **********************/
@@ -694,14 +712,11 @@ th {
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased; }
 
-html {
-  font-size: 6px; }
-
 body {
   /*font-family: "San Francisco Text", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 3rem;
-  line-height: 5rem;
+  font-size: 4rem;
+  line-height: 6rem;
   color: #373A3C; }
 
 a {
@@ -725,39 +740,51 @@ h5,
 
 h1,
 .h1 {
-  font-size: 10rem;
+  font-size: 12rem;
   font-weight: 600;
-  line-height: 12rem;
+  line-height: 16rem;
   margin: 4rem 0; }
 
 h2,
 .h2 {
-  font-size: 8rem;
+  font-size: 9rem;
   font-weight: 600;
-  line-height: 10rem;
+  line-height: 13rem;
   margin: 3rem 0; }
 
 h3,
 .h3 {
   font-size: 6rem;
   font-weight: 600;
-  line-height: 6rem;
+  line-height: 8rem;
   margin: 2rem 0; }
 
 h4,
 .h4 {
-  font-size: 4rem;
+  font-size: 5rem;
   font-weight: 600;
-  line-height: 5rem;
+  line-height: 7rem;
   margin: 1rem 0; }
 
 h5,
 .h5 {
-  font-size: 3rem;
+  font-size: 5rem;
   font-weight: 500;
-  line-height: 4rem;
+  line-height: 7rem;
   margin: 1rem 0; }
 
+caption, .text-sm {
+  font-size: 3rem;
+  line-height: 5rem; }
+
+.text-md {
+  font-size: 4rem;
+  line-height: 6rem; }
+
+.text-lg {
+  font-size: 5rem;
+  line-height: 7rem; }
+
 /**********************
   Preformatted
 **********************/
@@ -777,34 +804,13 @@ code,
   color: black; }
 
 .code-block {
-  background-color: #F4F4F4;
-  padding: 3rem;
+  background-color: #f1f1f1;
+  padding: 5rem;
   white-space: pre-wrap; }
 
 .code-block .text-code {
   font-weight: 200; }
 
-/**********************
-  Text sizes
-**********************/
-.text-xs {
-  font-size: 1.5rem; }
-
-.text-sm {
-  font-size: 2rem; }
-
-.text-lh-xs {
-  line-height: 2rem; }
-
-.text-lh-sm {
-  line-height: 3rem; }
-
-.text-lh-md {
-  line-height: 6rem; }
-
-.text-lh-lg {
-  line-height: 10rem; }
-
 /**********************
   Formatting
 **********************/
@@ -922,28 +928,39 @@ button {
 button, .btn {
   font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-weight: 500;
-  padding: 6px 12px;
-  color: white;
+  font-size: 4rem;
+  line-height: 4rem;
+  padding: 3rem 6rem;
+  color: black;
   background-color: #D4D4D4;
   margin: 0 0 6px; }
 
+.btn-sm {
+  font-size: 3rem;
+  line-height: 3rem;
+  padding: 2rem 4rem; }
+
 .btn-primary {
-  background-color: #577CFF; }
+  background-color: #577CFF;
+  color: white; }
 
 .btn-secondary {
   background-color: #8FEE9D; }
 
 .btn-tetiary {
-  background-color: #5B5B5B; }
+  background-color: #5B5B5B;
+  color: white; }
 
 .btn-warning {
-  background-color: #FF4444; }
+  background-color: #FF4444;
+  color: white; }
 
 .btn-group .btn {
   display: inline-block; }
 
 .btn-group .btn:not(.active) {
-  background-color: #D4D4D4; }
+  background-color: #D4D4D4;
+  color: black; }
 
 label {
   display: block;
@@ -952,7 +969,8 @@ label {
 textarea,
 input[type="text"] {
   border: .5rem solid #000;
-  padding: 12px; }
+  padding: 12px;
+  width: 100%; }
 
 .error-label {
   display: none;
@@ -4720,3 +4738,6 @@ ol > li:before {
 
 * {
   box-sizing: border-box; }
+
+html {
+  font-size: 4px; }
diff --git a/index.html b/index.html
index e85f9cc..fb4ad78 100644
--- a/index.html
+++ b/index.html
@@ -253,7 +253,7 @@ 
    Layout and grids
    
           
    There is a certain glibness in calling someone a legend, but if there's any artist worthy of the title it's Barbara Hammer, whose nearly 50-year career has spanned disciplines and broken boundaries, but has focused most especially on moving images. 
    
 
           
    Percent-based 12 column grid
    
-          
    
+          
    
             
    
               
    col-2
    
             
    
@@ -264,7 +264,7 @@ 
    Percent-based 12 column grid
    
               
    col-3
    
             
    
           
    
-          
    
+          
    
             
    
               
    col-4
    
             
    
@@ -275,7 +275,7 @@ 
    Percent-based 12 column grid
    
               
    col-4
    
             
    
           
    
-          
    
+          
    
             
    
               
    col-9
    
             
    
@@ -287,7 +287,7 @@ 
    Percent-based 12 column grid
    
             
    
           
    
 
-          
    <div class="row mb-1 text-lh-lg">
+          
    <div class="row mb-1">
   <div class="col-sm-2">
     <div class="black-hl text-md text-mono text-700 center">col-2</div>
   </div>
@@ -298,7 +298,7 @@ 
    Percent-based 12 column grid
    
     <div class="black-hl text-md text-mono text-700 center">col-3</div>
   </div>
 </div>
-<div class="row mb-1 text-lh-lg">
+<div class="row mb-1">
   <div class="col-sm-4">
     <div class="black-hl text-md text-mono text-700 center">col-4</div>
   </div>
@@ -309,7 +309,7 @@ 
    Percent-based 12 column grid
    
     <div class="black-hl text-md text-mono text-700 center">col-4</div>
   </div>
 </div>
-<div class="row mb-1 text-lh-lg">
+<div class="row mb-1">
   <div class="col-sm-9">
     <div class="black-hl text-md text-mono text-700 center">col-9</div>
   </div>
@@ -322,7 +322,7 @@ 
    Percent-based 12 column grid
    
 </div>
    
 
           
    With breakpoints
    
-          
    
+          
    
             
    
               
    sm
    
             
    
@@ -336,7 +336,7 @@ 
    With breakpoints
    
               
    sm
    
             
    
           
    
-          
    
+          
    
             
    
               
    md6, lg4
    
             
    
@@ -347,7 +347,7 @@ 
    With breakpoints
    
               
    md6, lg4
    
             
    
           
    
-          
    
+          
    
             
    
               
    lg9
    
             
    
@@ -356,7 +356,7 @@ 
    With breakpoints
    
             
    
           
    
 
-          
    <div class="row mb-1 text-lh-lg">
+          
    <div class="row mb-1">
   <div class="col-sm">
     <div class="black-hl text-md text-mono text-700 center">sm</div>
   </div>
@@ -370,7 +370,7 @@ 
    With breakpoints
    
     <div class="black-hl text-md text-mono text-700 center">sm</div>
   </div>
 </div>
-<div class="row mb-1 text-lh-lg">
+<div class="row mb-1">
   <div class="col-md-6 col-lg-4">
     <div class="black-hl text-md text-mono text-700 center">md6, lg4</div>
   </div>
@@ -381,7 +381,7 @@ 
    With breakpoints
    
     <div class="black-hl text-md text-mono text-700 center">md6, lg4</div>
   </div>
 </div>
-<div class="row mb-8 text-lh-lg">
+<div class="row mb-8">
   <div class="col-lg-9">
     <div class="black-hl text-md text-mono text-700 center">lg9</div>
   </div>

From a11cf975b927303582e7a2cbd484233877484142 Mon Sep 17 00:00:00 2001
From: Chris Johnson 
Date: Mon, 6 Nov 2017 16:24:32 -0800
Subject: [PATCH 14/16] Added shapes & icons section to stylesheet.

---
 base.css             | 231 +++++++++++++++++++++++++++++++++----------
 index.html           |  92 +++++++++++++++--
 sass/base.scss       |   1 +
 sass/elements.scss   |  62 ------------
 sass/icons.scss      |  32 +++++-
 sass/shapes.scss     | 142 ++++++++++++++++++++++++++
 sass/typography.scss |  57 ++++++++++-
 7 files changed, 490 insertions(+), 127 deletions(-)
 create mode 100644 sass/shapes.scss

diff --git a/base.css b/base.css
index 836c273..4f4ff82 100644
--- a/base.css
+++ b/base.css
@@ -5,8 +5,6 @@
  * 2. Prevent iOS text size adjust after orientation change, without disabling
  *    user zoom.
  */
-@import url("https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900");
-@import url("https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&text=%E2%86%90|%E2%86%92");
 html {
   font-family: sans-serif;
   /* 1 */
@@ -708,12 +706,56 @@ th {
 /**********************
   Base text styles
 **********************/
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Thin.ttf") format("truetype");
+  font-weight: 100; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-ExtraLight.ttf") format("truetype");
+  font-weight: 200; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Light.ttf") format("truetype");
+  font-weight: 300; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Regular.ttf") format("truetype");
+  font-weight: 400; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Medium.ttf") format("truetype");
+  font-weight: 500; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-SemiBold.ttf") format("truetype");
+  font-weight: 600; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Bold.ttf") format("truetype");
+  font-weight: 700; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-ExtraBold.ttf") format("truetype");
+  font-weight: 800; }
+
+@font-face {
+  font-family: "Work Sans";
+  src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Black.ttf") format("truetype");
+  font-weight: 900; }
+
 * {
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased; }
 
 body {
-  /*font-family: "San Francisco Text", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 4rem;
   line-height: 6rem;
@@ -989,12 +1031,34 @@ input[type="text"] {
 .input-group.error .error-label {
   display: block; }
 
-.arrow-right:before {
+/*
+  Available/supported icons:
+
+  →
+  ←
+  ∙
+
+*/
+.icon-arrow-right:before {
   content: "→"; }
 
-.arrow-left:before {
+.icon-arrow-left:before {
   content: "←"; }
 
+.icon-arrow-up:before {
+  content: "↑"; }
+
+.icon-arrow-down:before {
+  content: "↓"; }
+
+.icon-cross:before {
+  content: "×"; }
+
+.icon-ellipsis:before {
+  content: "...";
+  position: relative;
+  bottom: 6px; }
+
 .selected:before {
   content: "∙"; }
 
@@ -1023,6 +1087,116 @@ input[type="text"] {
   border-bottom: 18px solid #000;
   border-top: 0 solid transparent; }
 
+/**********************
+  Shapes
+**********************/
+.circle {
+  display: inline-block;
+  padding: 2rem;
+  border-radius: 50%;
+  border: 2px solid black;
+  text-align: center; }
+
+.circle-sm {
+  padding: 1rem; }
+
+.circle-lg {
+  padding: 4rem; }
+
+.circle-fill {
+  background-color: black; }
+
+.circle-red {
+  background-color: red;
+  border-color: red; }
+
+.circle-pill {
+  border-radius: 9999px;
+  width: 10rem; }
+
+.circle-pill.circle-lg {
+  width: 20rem; }
+
+.square {
+  display: inline-block;
+  padding: 2rem;
+  border: 2px solid black;
+  text-align: center; }
+
+.square-sm {
+  padding: 1rem; }
+
+.square-lg {
+  padding: 4rem; }
+
+.square-fill {
+  background-color: black; }
+
+.square-red {
+  background-color: red;
+  border-color: red; }
+
+.square-rect {
+  width: 10rem; }
+
+.square-rect.square-lg {
+  width: 20rem; }
+
+.triangle-base {
+  display: inline-block;
+  width: 0;
+  height: 0; }
+
+.triangle-up {
+  border-left: 2rem solid transparent;
+  border-right: 2rem solid transparent;
+  border-bottom: 4rem solid black; }
+
+.triangle-down {
+  border-left: 2rem solid transparent;
+  border-right: 2rem solid transparent;
+  border-top: 4rem solid black; }
+
+.triangle-right {
+  border-top: 2rem solid transparent;
+  border-bottom: 2rem solid transparent;
+  border-left: 4rem solid black; }
+
+.triangle-left {
+  border-top: 2rem solid transparent;
+  border-bottom: 2rem solid transparent;
+  border-right: 4rem solid black; }
+
+/**********************
+  Urbit logo
+**********************/
+.urbit-logo {
+  width: 72px;
+  height: 72px;
+  display: inline-block;
+  border-radius: 50%;
+  vertical-align: middle;
+  border: 5px solid white;
+  background-color: transparent; }
+  .urbit-logo:before {
+    content: "~";
+    color: #FFFFFF;
+    font-size: 72px;
+    vertical-align: middle;
+    line-height: 54px;
+    text-align: center;
+    width: 2rem;
+    display: inline-block;
+    font-family: "Work Sans";
+    font-weight: 600;
+    margin-right: 30px;
+    margin-top: 3px; }
+
+.urbit-logo-solid {
+  border-color: black; }
+  .urbit-logo-solid:before {
+    color: black; }
+
 /**********************
   Base elements
 **********************/
@@ -1086,53 +1260,6 @@ ol > li:before {
   width: 6rem;
   text-align: left; }
 
-/**********************
-  Shapes
-**********************/
-.circle {
-  display: inline-block;
-  padding: 1rem;
-  border-radius: 50%;
-  border: 3px solid black;
-  text-align: center; }
-
-.pill {
-  display: inline-block;
-  padding: 1rem;
-  border-radius: 9999px;
-  border: 3px solid black;
-  text-align: center; }
-
-/**********************
-  Urbit logo
-**********************/
-.urbit-logo {
-  width: 72px;
-  height: 72px;
-  display: inline-block;
-  border-radius: 50%;
-  vertical-align: middle;
-  border: 5px solid white;
-  background-color: transparent; }
-  .urbit-logo:before {
-    content: "~";
-    color: #FFFFFF;
-    font-size: 72px;
-    vertical-align: middle;
-    line-height: 54px;
-    text-align: center;
-    width: 2rem;
-    display: inline-block;
-    font-family: "Work Sans";
-    font-weight: 600;
-    margin-right: 30px;
-    margin-top: 3px; }
-
-.urbit-logo-solid {
-  border-color: black; }
-  .urbit-logo-solid:before {
-    color: black; }
-
 /**********************
   Utility classes
 **********************/
diff --git a/index.html b/index.html
index fb4ad78..8fef226 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,6 @@
   
   base.css - Urbit
   
-  
-
   
 
 
@@ -50,6 +48,7 @@ 
    Hey, this is the base stylesheet for Urbit.​‌
                 
  • Buttons
    • 
                 
  • Forms / inputs
    • 
                 
  • Icons
    • 
+                
  • Shapes
    •
  • Source code & contributing
    • @@ -575,20 +574,97 @@

    Forms

    </div> -

    Icons / Circles

    +

    Icons

    -

    Line of filler text.

    +

    Icons are roughly text-sized symbols, usually implemented in a font set (currently Work Sans)

    +

    Two ways to implement icons:

    +
      +
    • Use Unicode symbol directly in code, wrapped by an <icon> tag
      • +
    • Use a predefined "icon-" css class (with additional positioning/styling presets)
      • +

    - - + ↑ + + ↓ + + ← + → + + + 🅱 + 🅰 +

    +

    + + + ... 

    <h3>
-  <icon class="arrow-left"></icon>
-  <icon class="arrow-right"></icon>
+  <icon>↑</icon>
+  <icon class="icon-arrow-up"></icon>
+  <icon>↓</icon>
+  <icon class="icon-arrow-down"></icon>
+  <icon>←</icon>
+  <icon>→</icon>
+  <icon class="icon-arrow-left"></icon>
+  <icon class="icon-arrow-right"></icon>
+  <icon>🅱</icon>
+  <icon>🅰</icon>
+</h3>
+<h3>
+  <icon class="icon-cross"></icon>
+  <icon class="icon-ellipsis"></icon>
+  <icon>...</icon>
 </h3>
    + +

    Shapes

    + +

    Shapes are CSS-drawn figures that are expandable, dynamic, or impossible to fit into a character set.

    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + 
    <!-- only circles shown for brevity; inspect source to get full set -->
+<div class="circle"></div>
+<div class="circle circle-fill"></div>
+<div class="circle circle-red"></div>
+<div class="circle circle-pill"></div>
+<br />
+<div class="circle circle-lg"></div>
+<div class="circle circle-lg circle-fill"></div>
+<div class="circle circle-lg circle-red"></div>
+<div class="circle circle-lg circle-pill"></div>
    diff --git a/sass/base.scss b/sass/base.scss index 53cfc04..4a1dc44 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -5,6 +5,7 @@ @import "buttons"; @import "forms"; @import "icons"; +@import "shapes"; @import "elements"; @import "utilities"; diff --git a/sass/elements.scss b/sass/elements.scss index 2dd9228..5c3e80a 100644 --- a/sass/elements.scss +++ b/sass/elements.scss @@ -76,65 +76,3 @@ ol > li:before { width: 6rem; text-align: left; } - -/********************** - Shapes -**********************/ - -.circle { - display: inline-block; - padding: 1rem; - border-radius: 50%; - border: 3px solid black; - - text-align: center; -} - -.pill { - display: inline-block; - padding: 1rem; - border-radius: 9999px; - border: 3px solid black; - - text-align: center; -} - -/********************** - Urbit logo -**********************/ - -.urbit-logo { - width: 72px; - height: 72px; - display: inline-block; - border-radius: 50%; - vertical-align: middle; - - border: 5px solid white; - background-color: transparent; - - &:before { - content: "~"; - color: #FFFFFF; - font-size: 72px; - vertical-align: middle; - line-height: 54px; - text-align: center; - width: 2rem; - display: inline-block; - - font-family: "Work Sans"; - font-weight: 600; - - margin-right: 30px; - margin-top: 3px; - } -} - -.urbit-logo-solid { - border-color: black; - - &:before { - color: black; - } -} diff --git a/sass/icons.scss b/sass/icons.scss index 2338f0b..201c1ca 100644 --- a/sass/icons.scss +++ b/sass/icons.scss @@ -1,14 +1,42 @@ -.arrow-right:before { +/* + Available/supported icons: + + → + ← + ∙ + +*/ + +.icon-arrow-right:before { content: "→"; } -.arrow-left:before { +.icon-arrow-left:before { content: "←"; } +.icon-arrow-up:before { + content: "↑"; +} + +.icon-arrow-down:before { + content: "↓"; +} + +.icon-cross:before { + content: "×"; +} + +.icon-ellipsis:before { + content: "..."; + position: relative; + bottom: 6px; +} + .selected:before{ content: "∙" } + //not production ready .icon{ margin-right:.6rem; diff --git a/sass/shapes.scss b/sass/shapes.scss new file mode 100644 index 0000000..22d5b3e --- /dev/null +++ b/sass/shapes.scss @@ -0,0 +1,142 @@ +/********************** + Shapes +**********************/ + +.circle { + display: inline-block; + padding: 2rem; + border-radius: 50%; + border: 2px solid black; + + text-align: center; +} + +.circle-sm { + padding: 1rem; +} + +.circle-lg { + padding: 4rem; +} + +.circle-fill { + background-color: black; +} + +.circle-red { + background-color: red; + border-color: red; +} + +.circle-pill { + border-radius: 9999px; + width: 10rem; +} + +.circle-pill.circle-lg { + width: 20rem; +} + +.square { + display: inline-block; + padding: 2rem; + border: 2px solid black; + + text-align: center; +} + +.square-sm { + padding: 1rem; +} + +.square-lg { + padding: 4rem; +} + +.square-fill { + background-color: black; +} + +.square-red { + background-color: red; + border-color: red; +} + +.square-rect { + width: 10rem; +} + +.square-rect.square-lg { + width: 20rem; +} + +.triangle-base { + display: inline-block; + + width: 0; + height: 0; +} + +.triangle-up { + border-left: 2rem solid transparent; + border-right: 2rem solid transparent; + border-bottom: 4rem solid black; +} + +.triangle-down { + border-left: 2rem solid transparent; + border-right: 2rem solid transparent; + border-top: 4rem solid black; +} + +.triangle-right { + border-top: 2rem solid transparent; + border-bottom: 2rem solid transparent; + border-left: 4rem solid black; +} + +.triangle-left { + border-top: 2rem solid transparent; + border-bottom: 2rem solid transparent; + border-right: 4rem solid black; +} + +/********************** + Urbit logo +**********************/ + +.urbit-logo { + width: 72px; + height: 72px; + display: inline-block; + border-radius: 50%; + vertical-align: middle; + + border: 5px solid white; + background-color: transparent; + + &:before { + content: "~"; + color: #FFFFFF; + font-size: 72px; + vertical-align: middle; + line-height: 54px; + text-align: center; + width: 2rem; + display: inline-block; + + font-family: "Work Sans"; + font-weight: 600; + + margin-right: 30px; + margin-top: 3px; + } +} + +.urbit-logo-solid { + border-color: black; + + &:before { + color: black; + } +} diff --git a/sass/typography.scss b/sass/typography.scss index 641d032..4a67156 100644 --- a/sass/typography.scss +++ b/sass/typography.scss @@ -16,8 +16,60 @@ /********************** Base text styles **********************/ -@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900'); -@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&text=%E2%86%90|%E2%86%92'); + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Thin.ttf") format("truetype"); + font-weight: 100; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-ExtraLight.ttf") format("truetype"); + font-weight: 200; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Light.ttf") format("truetype"); + font-weight: 300; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Regular.ttf") format("truetype"); + font-weight: 400; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Medium.ttf") format("truetype"); + font-weight: 500; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-SemiBold.ttf") format("truetype"); + font-weight: 600; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Bold.ttf") format("truetype"); + font-weight: 700; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-ExtraBold.ttf") format("truetype"); + font-weight: 800; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Black.ttf") format("truetype"); + font-weight: 900; +} * { font-smoothing: antialiased; @@ -25,7 +77,6 @@ } body { - /*font-family: "San Francisco Text", "Helvetica Neue", Helvetica, Arial, sans-serif;*/ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 4rem; line-height: 6rem; From f37198125ef0252f2dd9d5abbe4bbf3bba01eaab Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Mon, 6 Nov 2017 17:16:38 -0800 Subject: [PATCH 15/16] Added checkboxes, radio inputs, and select dropdown to forms section. --- base.css | 33 ++++++++++++++++++++++++++++++++- index.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- sass/forms.scss | 38 +++++++++++++++++++++++++++++++++++++- 3 files changed, 115 insertions(+), 4 deletions(-) diff --git a/base.css b/base.css index 4f4ff82..9d2bc5b 100644 --- a/base.css +++ b/base.css @@ -1010,7 +1010,7 @@ label { textarea, input[type="text"] { - border: .5rem solid #000; + border: 2px solid black; padding: 12px; width: 100%; } @@ -1031,6 +1031,37 @@ input[type="text"] { .input-group.error .error-label { display: block; } +.checkbox-group label, +.checkbox-group input, +.radio-group label, +.radio-group input { + font-weight: 400; + display: inline-block; } + +.select-dropdown { + display: flex; + border: 2px solid black; + overflow: hidden; + background-color: white; } + +.select-dropdown select { + padding: 5px 8px; + width: 130%; + border: none; + box-shadow: none; + background: transparent; + background-image: none; + -webkit-appearance: none; } + +.select-dropdown select:focus { + outline: none; } + +.select-dropdown .triangle-down { + border-width: 2rem 1rem 0rem 1rem; + position: relative; + top: 14px; + right: 8px; } + /* Available/supported icons: diff --git a/index.html b/index.html index 8fef226..2d04aa9 100644 --- a/index.html +++ b/index.html @@ -542,17 +542,61 @@

    Forms

    Age must be a number.
    +
    +
    + Diet options? +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    + Favorite food? +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
    + +
    + +
    +
    +
    - + - 
    <div class="row">
+          
    <!-- only subset of forms shown for brevity; inspect source to get full set -->
+<div class="row">
   <div class="col-md-4">
     <div class="input-group">
       <label>Name</label>
diff --git a/sass/forms.scss b/sass/forms.scss
index 8d24e61..585f325 100644
--- a/sass/forms.scss
+++ b/sass/forms.scss
@@ -5,7 +5,7 @@ label {
 
 textarea,
 input[type="text"] {
-  border: .5rem solid #000;
+  border: 2px solid black;
   padding: 12px;
   width: 100%;
 }
@@ -32,3 +32,39 @@ input[type="text"] {
     display: block;
   }
 }
+
+.checkbox-group label,
+.checkbox-group input,
+.radio-group label,
+.radio-group input {
+  font-weight: 400;
+  display: inline-block;
+}
+
+.select-dropdown {
+  display: flex;
+  border: 2px solid black;
+  overflow: hidden;
+  background-color: white;
+}
+
+.select-dropdown select {
+  padding: 5px 8px;
+  width: 130%;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  background-image: none;
+  -webkit-appearance: none;
+}
+
+.select-dropdown select:focus {
+  outline: none;
+}
+
+.select-dropdown .triangle-down {
+  border-width: 2rem 1rem 0rem 1rem;
+  position: relative;
+  top: 14px;
+  right: 8px;
+}

From c57f2daf4b70ee657df9047b1521df1f2ad67a9c Mon Sep 17 00:00:00 2001
From: Galen Wolfe-Pauly 
Date: Fri, 1 Dec 2017 15:36:38 -0800
Subject: [PATCH 16/16] add source code pro and remove segoe

---
 base.css             | 32 +++++++++++++++++++++++++++++++-
 sass/typography.scss | 33 ++++++++++++++++++++++++++++++++-
 2 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/base.css b/base.css
index 9d2bc5b..8577495 100644
--- a/base.css
+++ b/base.css
@@ -751,12 +751,42 @@ th {
   src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Black.ttf") format("truetype");
   font-weight: 900; }
 
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-extralight.woff");
+  font-weight: 200; }
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-light.woff");
+  font-weight: 300; }
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-regular.woff");
+  font-weight: 400; }
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-medium.woff");
+  font-weight: 500; }
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-bold.woff");
+  font-weight: 600; }
+
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-black.woff");
+  font-weight: 700; }
+
 * {
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased; }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 4rem;
   line-height: 6rem;
   color: #373A3C; }
diff --git a/sass/typography.scss b/sass/typography.scss
index 4a67156..e03c4d2 100644
--- a/sass/typography.scss
+++ b/sass/typography.scss
@@ -71,13 +71,44 @@
  font-weight: 900;
 }
 
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-extralight.woff");
+  font-weight: 200;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-light.woff");
+  font-weight: 300;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-regular.woff");
+  font-weight: 400;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-medium.woff");
+  font-weight: 500;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-bold.woff");
+  font-weight: 600;
+}
+@font-face {
+  font-family: "Source Code Pro";
+  src: url("//media.urbit.org/fonts/scp-black.woff");
+  font-weight: 700;
+}
+
 * {
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 4rem;
   line-height: 6rem;
   color: $gray-dark;