+
+
+
+ Loading
+
+
+
+
+
+
+
+
diff --git a/dist/plain-ui.css b/dist/plain-ui.css
index dc436ea..9c12e06 100644
--- a/dist/plain-ui.css
+++ b/dist/plain-ui.css
@@ -1982,2481 +1982,2486 @@ dt {
*
*/
/**
- * Sizing
*
- * Width and Height Classes,
- * Sizes with percentage will calculate with the Reflex Grid
*
*
*/
-.w-0 {
- width: 0;
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ *
+ * 
+ *
+ * food truck yr franzen pabst
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ * food truck yr franzen pabst
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ * masonry
+ *
+ *
- *
- *
- * food truck yr franzen pabst
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
- */
-/**
- *
- *
- *
- *
- */
-/**
- *
- *
- *
- * food truck yr franzen pabst
- *
- *
- *
- */
-/**
- * masonry
- *
- *
+ * 
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ */
+/**
+ *
+ *
+ *
+ *
+ *
+ */
+:root {
+ --reflex-columns: 12;
+ --reflex-grid-spacing: 15px;
+ --reflex-xs: 576px;
+ --reflex-sm: 768px;
+ --reflex-md: 992px;
+ --reflex-lg: 1200px;
+ --reflex-xlg: 1600px;
+ --reflex-xxs-max: 575px;
+ --reflex-xs-max: 767px;
+ --reflex-sm-max: 991px;
+ --reflex-md-max: 1199px;
+ --reflex-lg-max: 1599px;
}
-.h-0 {
- height: 0;
+.container,
+.container-full {
+ box-sizing: border-box;
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 30px;
+ padding-left: 30px;
}
-.w-1 {
- width: 1px;
+.container .grid,
+.container-full .grid {
+ margin-right: -15px;
+ margin-left: -15px;
}
-.h-1 {
- height: 1px;
+@media (min-width: 576px) {
+ .container {
+ max-width: 576px;
+ }
}
-
-.w-col-1 {
- width: 8.3333333333%;
+@media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
}
-
-.h-col-1 {
- height: 8.3333333333%;
+@media (min-width: 992px) {
+ .container {
+ max-width: 992px;
+ }
}
-
-.w-col-2 {
- width: 16.6666666667%;
+@media (min-width: 1200px) {
+ .container {
+ max-width: 1200px;
+ }
}
-
-.h-col-2 {
- height: 16.6666666667%;
+@media (min-width: 1600px) {
+ .container {
+ max-width: 1600px;
+ }
+}
+.grid {
+ box-sizing: border-box;
+ display: block;
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0;
+ margin: 0 auto;
+ position: relative;
+ letter-spacing: -0.31em;
+ *letter-spacing: normal;
+ word-spacing: -0.43em;
+ list-style-type: none;
}
-.w-col-3 {
- width: 25%;
+.grid::before, .grid::after {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
}
-.h-col-3 {
- height: 25%;
+[class*=col-] {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
+ position: relative;
+ width: 100%;
+ vertical-align: top;
+ padding: 15px;
+ display: inline-block;
+ *display: inline;
+ zoom: 1;
}
-.w-col-4 {
- width: 33.3333333333%;
+[class*=col-]::before, [class*=col-]::after {
+ box-sizing: border-box;
+ letter-spacing: normal;
+ word-spacing: normal;
+ white-space: normal;
}
-.h-col-4 {
- height: 33.3333333333%;
+[class*=col-] .grid {
+ flex: 1 1 auto;
+ margin: -15px;
}
-.w-col-5 {
- width: 41.6666666667%;
+.col-12 {
+ width: 100%;
+ *width: 99.9%;
}
-.h-col-5 {
- height: 41.6666666667%;
+.col-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
}
-.w-col-6 {
- width: 50%;
+.col-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
}
-.h-col-6 {
- height: 50%;
+.col-9 {
+ width: 75%;
+ *width: 74.9%;
}
-.w-col-7 {
- width: 58.3333333333%;
+.col-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
}
-.h-col-7 {
- height: 58.3333333333%;
+.col-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
}
-.w-col-8 {
- width: 66.6666666667%;
+.col-6 {
+ width: 50%;
+ *width: 49.9%;
}
-.h-col-8 {
- height: 66.6666666667%;
+.col-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
}
-.w-col-9 {
- width: 75%;
+.col-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
}
-.h-col-9 {
- height: 75%;
+.col-3 {
+ width: 25%;
+ *width: 24.9%;
}
-.w-col-10 {
- width: 83.3333333333%;
+.col-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
}
-.h-col-10 {
- height: 83.3333333333%;
+.col-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
}
-.w-col-11 {
- width: 91.6666666667%;
-}
-
-.h-col-11 {
- height: 91.6666666667%;
-}
+@media (min-width: 576px) {
+ .col-xs-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
-.w-col-12 {
- width: 100%;
-}
+ .col-xs-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
-.h-col-12 {
- height: 100%;
-}
+ .col-xs-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
-.w-1 {
- width: 0.5rem;
-}
+ .col-xs-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
-.w-2 {
- width: 1rem;
-}
+ .col-xs-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
-.w-3 {
- width: 1.5rem;
-}
+ .col-xs-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
-.w-4 {
- width: 2rem;
-}
+ .col-xs-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
-.w-5 {
- width: 2.5rem;
-}
+ .col-xs-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
-.w-6 {
- width: 3rem;
-}
+ .col-xs-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
-.w-7 {
- width: 3.5rem;
-}
+ .col-xs-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
-.w-8 {
- width: 4rem;
-}
+ .col-xs-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
-.w-9 {
- width: 4.5rem;
+ .col-xs-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
}
+@media (min-width: 768px) {
+ .col-sm-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
-.w-10 {
- width: 5rem;
-}
+ .col-sm-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
-.w-11 {
- width: 5.5rem;
-}
+ .col-sm-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
-.w-12 {
- width: 6rem;
-}
+ .col-sm-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
-.w-13 {
- width: 6.5rem;
-}
+ .col-sm-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
-.w-14 {
- width: 7rem;
-}
+ .col-sm-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
-.w-15 {
- width: 7.5rem;
-}
+ .col-sm-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
-.w-16 {
- width: 8rem;
-}
+ .col-sm-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
-.w-17 {
- width: 8.5rem;
-}
+ .col-sm-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
-.w-18 {
- width: 9rem;
-}
+ .col-sm-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
-.w-19 {
- width: 9.5rem;
-}
+ .col-sm-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
-.w-20 {
- width: 10rem;
+ .col-sm-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
}
+@media (min-width: 992px) {
+ .col-md-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
-.w-21 {
- width: 10.5rem;
-}
+ .col-md-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
-.w-22 {
- width: 11rem;
-}
+ .col-md-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
-.w-23 {
- width: 11.5rem;
-}
+ .col-md-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
-.w-24 {
- width: 12rem;
-}
+ .col-md-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
-.w-25 {
- width: 12.5rem;
-}
+ .col-md-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
-.w-26 {
- width: 13rem;
-}
+ .col-md-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
-.w-27 {
- width: 13.5rem;
-}
+ .col-md-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
-.w-28 {
- width: 14rem;
-}
+ .col-md-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
-.w-29 {
- width: 14.5rem;
-}
+ .col-md-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
-.w-30 {
- width: 15rem;
-}
+ .col-md-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
-.w-31 {
- width: 15.5rem;
+ .col-md-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
}
+@media (min-width: 1200px) {
+ .col-lg-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
-.w-32 {
- width: 16rem;
-}
+ .col-lg-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
-.w-33 {
- width: 16.5rem;
-}
+ .col-lg-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
-.w-34 {
- width: 17rem;
-}
+ .col-lg-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
-.w-35 {
- width: 17.5rem;
-}
+ .col-lg-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
-.w-36 {
- width: 18rem;
-}
+ .col-lg-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
-.w-37 {
- width: 18.5rem;
-}
+ .col-lg-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
-.w-38 {
- width: 19rem;
-}
+ .col-lg-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
-.w-39 {
- width: 19.5rem;
-}
+ .col-lg-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
-.w-40 {
- width: 20rem;
-}
+ .col-lg-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
-.w-41 {
- width: 20.5rem;
-}
+ .col-lg-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
-.w-42 {
- width: 21rem;
+ .col-lg-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
}
+@media (min-width: 1600px) {
+ .col-xlg-12 {
+ width: 100%;
+ *width: 99.9%;
+ }
-.w-43 {
- width: 21.5rem;
-}
+ .col-xlg-11 {
+ width: 91.66666667%;
+ *width: 91.56666667%;
+ }
-.w-44 {
- width: 22rem;
-}
+ .col-xlg-10 {
+ width: 83.33333333%;
+ *width: 83.23333333%;
+ }
-.w-45 {
- width: 22.5rem;
-}
+ .col-xlg-9 {
+ width: 75%;
+ *width: 74.9%;
+ }
-.w-46 {
- width: 23rem;
-}
+ .col-xlg-8 {
+ width: 66.66666667%;
+ *width: 66.56666667%;
+ }
-.w-47 {
- width: 23.5rem;
-}
+ .col-xlg-7 {
+ width: 58.33333333%;
+ *width: 58.23333333%;
+ }
-.w-48 {
- width: 24rem;
-}
+ .col-xlg-6 {
+ width: 50%;
+ *width: 49.9%;
+ }
-.w-49 {
- width: 24.5rem;
-}
+ .col-xlg-5 {
+ width: 41.66666667%;
+ *width: 41.56666667%;
+ }
-.w-50 {
- width: 25rem;
-}
+ .col-xlg-4 {
+ width: 33.33333333%;
+ *width: 33.23333333%;
+ }
-.h-1 {
- height: 0.5rem;
-}
+ .col-xlg-3 {
+ width: 25%;
+ *width: 24.9%;
+ }
-.h-2 {
- height: 1rem;
-}
+ .col-xlg-2 {
+ width: 16.66666667%;
+ *width: 16.56666667%;
+ }
-.h-3 {
- height: 1.5rem;
+ .col-xlg-1 {
+ width: 8.33333333%;
+ *width: 8.23333333%;
+ }
}
-
-.h-4 {
- height: 2rem;
+.col-auto {
+ flex: 1 0 0px;
+ width: auto;
}
-.h-5 {
- height: 2.5rem;
+@media (min-width: 576px) {
+ .col-xs-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
}
-
-.h-6 {
- height: 3rem;
+@media (min-width: 768px) {
+ .col-sm-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
}
-
-.h-7 {
- height: 3.5rem;
+@media (min-width: 992px) {
+ .col-md-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
}
-
-.h-8 {
- height: 4rem;
+@media (min-width: 1200px) {
+ .col-lg-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
}
-
-.h-9 {
- height: 4.5rem;
+@media (min-width: 1600px) {
+ .col-xlg-auto {
+ flex: 1 0 0px;
+ width: auto;
+ }
}
-
-.h-10 {
- height: 5rem;
+.order-12 {
+ order: 12;
}
-.h-11 {
- height: 5.5rem;
+.order-11 {
+ order: 11;
}
-.h-12 {
- height: 6rem;
+.order-10 {
+ order: 10;
}
-.h-13 {
- height: 6.5rem;
+.order-9 {
+ order: 9;
}
-.h-14 {
- height: 7rem;
+.order-8 {
+ order: 8;
}
-.h-15 {
- height: 7.5rem;
+.order-7 {
+ order: 7;
}
-.h-16 {
- height: 8rem;
+.order-6 {
+ order: 6;
}
-.h-17 {
- height: 8.5rem;
+.order-5 {
+ order: 5;
}
-.h-18 {
- height: 9rem;
+.order-4 {
+ order: 4;
}
-.h-19 {
- height: 9.5rem;
+.order-3 {
+ order: 3;
}
-.h-20 {
- height: 10rem;
+.order-2 {
+ order: 2;
}
-.h-21 {
- height: 10.5rem;
+.order-1 {
+ order: 1;
}
-.h-22 {
- height: 11rem;
+.order-0 {
+ order: 0;
}
-.h-23 {
- height: 11.5rem;
-}
-
-.h-24 {
- height: 12rem;
-}
+@media (min-width: 576px) {
+ .order-xs-12 {
+ order: 12;
+ }
-.h-25 {
- height: 12.5rem;
-}
+ .order-xs-11 {
+ order: 11;
+ }
-.h-26 {
- height: 13rem;
-}
+ .order-xs-10 {
+ order: 10;
+ }
-.h-27 {
- height: 13.5rem;
-}
+ .order-xs-9 {
+ order: 9;
+ }
-.h-28 {
- height: 14rem;
-}
+ .order-xs-8 {
+ order: 8;
+ }
-.h-29 {
- height: 14.5rem;
-}
+ .order-xs-7 {
+ order: 7;
+ }
-.h-30 {
- height: 15rem;
-}
+ .order-xs-6 {
+ order: 6;
+ }
-.h-31 {
- height: 15.5rem;
-}
+ .order-xs-5 {
+ order: 5;
+ }
-.h-32 {
- height: 16rem;
-}
+ .order-xs-4 {
+ order: 4;
+ }
-.h-33 {
- height: 16.5rem;
-}
+ .order-xs-3 {
+ order: 3;
+ }
-.h-34 {
- height: 17rem;
-}
+ .order-xs-2 {
+ order: 2;
+ }
-.h-35 {
- height: 17.5rem;
-}
+ .order-xs-1 {
+ order: 1;
+ }
-.h-36 {
- height: 18rem;
+ .order-xs-0 {
+ order: 0;
+ }
}
+@media (min-width: 768px) {
+ .order-sm-12 {
+ order: 12;
+ }
-.h-37 {
- height: 18.5rem;
-}
+ .order-sm-11 {
+ order: 11;
+ }
-.h-38 {
- height: 19rem;
-}
+ .order-sm-10 {
+ order: 10;
+ }
-.h-39 {
- height: 19.5rem;
-}
+ .order-sm-9 {
+ order: 9;
+ }
-.h-40 {
- height: 20rem;
-}
+ .order-sm-8 {
+ order: 8;
+ }
-.h-41 {
- height: 20.5rem;
-}
+ .order-sm-7 {
+ order: 7;
+ }
-.h-42 {
- height: 21rem;
-}
+ .order-sm-6 {
+ order: 6;
+ }
-.h-43 {
- height: 21.5rem;
-}
+ .order-sm-5 {
+ order: 5;
+ }
-.h-44 {
- height: 22rem;
-}
+ .order-sm-4 {
+ order: 4;
+ }
-.h-45 {
- height: 22.5rem;
-}
+ .order-sm-3 {
+ order: 3;
+ }
-.h-46 {
- height: 23rem;
-}
+ .order-sm-2 {
+ order: 2;
+ }
-.h-47 {
- height: 23.5rem;
-}
+ .order-sm-1 {
+ order: 1;
+ }
-.h-48 {
- height: 24rem;
+ .order-sm-0 {
+ order: 0;
+ }
}
+@media (min-width: 992px) {
+ .order-md-12 {
+ order: 12;
+ }
-.h-49 {
- height: 24.5rem;
-}
+ .order-md-11 {
+ order: 11;
+ }
-.h-50 {
- height: 25rem;
-}
+ .order-md-10 {
+ order: 10;
+ }
-/**
- *
- *
- */
-.m-top-0 {
- margin-top: 0;
-}
+ .order-md-9 {
+ order: 9;
+ }
-.m-top-1 {
- margin-top: 1px;
-}
+ .order-md-8 {
+ order: 8;
+ }
-.m-top-2 {
- margin-top: 0.125rem;
-}
+ .order-md-7 {
+ order: 7;
+ }
-.m-top-3 {
- margin-top: 0.5rem;
-}
+ .order-md-6 {
+ order: 6;
+ }
-.m-top-4 {
- margin-top: 1.125rem;
-}
+ .order-md-5 {
+ order: 5;
+ }
-.m-top-5 {
- margin-top: 2rem;
-}
+ .order-md-4 {
+ order: 4;
+ }
-.m-top-6 {
- margin-top: 3.125rem;
-}
+ .order-md-3 {
+ order: 3;
+ }
-.m-top-7 {
- margin-top: 4.5rem;
-}
+ .order-md-2 {
+ order: 2;
+ }
-.m-top-8 {
- margin-top: 6.125rem;
-}
+ .order-md-1 {
+ order: 1;
+ }
-.m-top-9 {
- margin-top: 8rem;
+ .order-md-0 {
+ order: 0;
+ }
}
+@media (min-width: 1200px) {
+ .order-lg-12 {
+ order: 12;
+ }
-.m-top-10 {
- margin-top: 10.125rem;
-}
+ .order-lg-11 {
+ order: 11;
+ }
-.m-bottom-0 {
- margin-bottom: 0;
-}
+ .order-lg-10 {
+ order: 10;
+ }
-.m-bottom-1 {
- margin-bottom: 1px;
-}
+ .order-lg-9 {
+ order: 9;
+ }
-.m-bottom-2 {
- margin-bottom: 0.125rem;
-}
+ .order-lg-8 {
+ order: 8;
+ }
-.m-bottom-3 {
- margin-bottom: 0.5rem;
-}
+ .order-lg-7 {
+ order: 7;
+ }
-.m-bottom-4 {
- margin-bottom: 1.125rem;
-}
+ .order-lg-6 {
+ order: 6;
+ }
-.m-bottom-5 {
- margin-bottom: 2rem;
-}
+ .order-lg-5 {
+ order: 5;
+ }
-.m-bottom-6 {
- margin-bottom: 3.125rem;
-}
+ .order-lg-4 {
+ order: 4;
+ }
-.m-bottom-7 {
- margin-bottom: 4.5rem;
-}
+ .order-lg-3 {
+ order: 3;
+ }
-.m-bottom-8 {
- margin-bottom: 6.125rem;
-}
+ .order-lg-2 {
+ order: 2;
+ }
-.m-bottom-9 {
- margin-bottom: 8rem;
-}
+ .order-lg-1 {
+ order: 1;
+ }
-.m-bottom-10 {
- margin-bottom: 10.125rem;
+ .order-lg-0 {
+ order: 0;
+ }
}
+@media (min-width: 1600px) {
+ .order-xlg-12 {
+ order: 12;
+ }
-.m-left-0 {
- margin-left: 0;
-}
+ .order-xlg-11 {
+ order: 11;
+ }
-.m-left-1 {
- margin-left: 1px;
-}
+ .order-xlg-10 {
+ order: 10;
+ }
-.m-left-2 {
- margin-left: 0.125rem;
-}
+ .order-xlg-9 {
+ order: 9;
+ }
-.m-left-3 {
- margin-left: 0.5rem;
-}
+ .order-xlg-8 {
+ order: 8;
+ }
-.m-left-4 {
- margin-left: 1.125rem;
-}
+ .order-xlg-7 {
+ order: 7;
+ }
-.m-left-5 {
- margin-left: 2rem;
-}
+ .order-xlg-6 {
+ order: 6;
+ }
-.m-left-6 {
- margin-left: 3.125rem;
-}
+ .order-xlg-5 {
+ order: 5;
+ }
-.m-left-7 {
- margin-left: 4.5rem;
-}
+ .order-xlg-4 {
+ order: 4;
+ }
-.m-left-8 {
- margin-left: 6.125rem;
-}
+ .order-xlg-3 {
+ order: 3;
+ }
-.m-left-9 {
- margin-left: 8rem;
-}
+ .order-xlg-2 {
+ order: 2;
+ }
-.m-left-10 {
- margin-left: 10.125rem;
-}
+ .order-xlg-1 {
+ order: 1;
+ }
-.m-right-0 {
- margin-right: 0;
+ .order-xlg-0 {
+ order: 0;
+ }
}
-
-.m-right-1 {
- margin-right: 1px;
+.offset-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
}
-.m-right-2 {
- margin-right: 0.125rem;
+.offset-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
}
-.m-right-3 {
- margin-right: 0.5rem;
+.offset-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
}
-.m-right-4 {
- margin-right: 1.125rem;
+.offset-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
}
-.m-right-5 {
- margin-right: 2rem;
+.offset-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
}
-.m-right-6 {
- margin-right: 3.125rem;
+.offset-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
}
-.m-right-7 {
- margin-right: 4.5rem;
+.offset-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
}
-.m-right-8 {
- margin-right: 6.125rem;
+.offset-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
}
-.m-right-9 {
- margin-right: 8rem;
+.offset-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
}
-.m-right-10 {
- margin-right: 10.125rem;
+.offset-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
}
-.p-top-0 {
- padding-top: 0;
+.offset-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
}
-.p-top-1 {
- padding-top: 1px;
-}
+@media (min-width: 576px) {
+ .offset-xs-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
-.p-top-0 {
- padding-top: 0.125rem;
-}
+ .offset-xs-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
-.p-top-1 {
- padding-top: 0rem;
-}
+ .offset-xs-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
-.p-top-2 {
- padding-top: 0.125rem;
-}
+ .offset-xs-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
-.p-top-3 {
- padding-top: 0.5rem;
-}
+ .offset-xs-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
-.p-top-4 {
- padding-top: 1.125rem;
-}
+ .offset-xs-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
-.p-top-5 {
- padding-top: 2rem;
-}
+ .offset-xs-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
-.p-top-6 {
- padding-top: 3.125rem;
-}
+ .offset-xs-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
-.p-top-7 {
- padding-top: 4.5rem;
-}
+ .offset-xs-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
-.p-top-8 {
- padding-top: 6.125rem;
-}
+ .offset-xs-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
-.p-top-9 {
- padding-top: 8rem;
-}
+ .offset-xs-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
-.p-top-10 {
- padding-top: 10.125rem;
+ .offset-xs-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
}
+@media (min-width: 768px) {
+ .offset-sm-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
-.p-bottom-0 {
- padding-bottom: 0;
-}
+ .offset-sm-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
-.p-bottom-1 {
- padding-bottom: 1px;
-}
+ .offset-sm-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
-.p-bottom-0 {
- padding-bottom: 0.125rem;
-}
+ .offset-sm-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
-.p-bottom-1 {
- padding-bottom: 0rem;
-}
+ .offset-sm-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
-.p-bottom-2 {
- padding-bottom: 0.125rem;
-}
+ .offset-sm-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
-.p-bottom-3 {
- padding-bottom: 0.5rem;
-}
+ .offset-sm-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
-.p-bottom-4 {
- padding-bottom: 1.125rem;
-}
+ .offset-sm-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
-.p-bottom-5 {
- padding-bottom: 2rem;
-}
+ .offset-sm-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
-.p-bottom-6 {
- padding-bottom: 3.125rem;
-}
+ .offset-sm-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
-.p-bottom-7 {
- padding-bottom: 4.5rem;
-}
+ .offset-sm-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
-.p-bottom-8 {
- padding-bottom: 6.125rem;
+ .offset-sm-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
}
+@media (min-width: 992px) {
+ .offset-md-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
-.p-bottom-9 {
- padding-bottom: 8rem;
-}
+ .offset-md-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
-.p-bottom-10 {
- padding-bottom: 10.125rem;
-}
+ .offset-md-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
-.p-left-0 {
- padding-left: 0;
-}
+ .offset-md-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
-.p-left-1 {
- padding-left: 1px;
-}
+ .offset-md-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
-.p-left-0 {
- padding-left: 0.125rem;
-}
+ .offset-md-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
-.p-left-1 {
- padding-left: 0rem;
-}
+ .offset-md-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
-.p-left-2 {
- padding-left: 0.125rem;
-}
+ .offset-md-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
-.p-left-3 {
- padding-left: 0.5rem;
-}
+ .offset-md-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
-.p-left-4 {
- padding-left: 1.125rem;
-}
+ .offset-md-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
-.p-left-5 {
- padding-left: 2rem;
-}
+ .offset-md-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
-.p-left-6 {
- padding-left: 3.125rem;
+ .offset-md-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
}
+@media (min-width: 1200px) {
+ .offset-lg-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
-.p-left-7 {
- padding-left: 4.5rem;
-}
+ .offset-lg-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
-.p-left-8 {
- padding-left: 6.125rem;
-}
+ .offset-lg-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
-.p-left-9 {
- padding-left: 8rem;
-}
+ .offset-lg-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
-.p-left-10 {
- padding-left: 10.125rem;
-}
+ .offset-lg-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
-.p-right-0 {
- padding-right: 0;
-}
+ .offset-lg-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
-.p-right-1 {
- padding-right: 1px;
-}
+ .offset-lg-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
-.p-right-0 {
- padding-right: 0.125rem;
-}
+ .offset-lg-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
+ }
-.p-right-1 {
- padding-right: 0rem;
-}
+ .offset-lg-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
+ }
-.p-right-2 {
- padding-right: 0.125rem;
-}
+ .offset-lg-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
+ }
-.p-right-3 {
- padding-right: 0.5rem;
-}
+ .offset-lg-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
+ }
-.p-right-4 {
- padding-right: 1.125rem;
-}
-
-.p-right-5 {
- padding-right: 2rem;
-}
-
-.p-right-6 {
- padding-right: 3.125rem;
-}
-
-.p-right-7 {
- padding-right: 4.5rem;
+ .offset-lg-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
+ }
}
+@media (min-width: 1600px) {
+ .offset-xlg-11 {
+ margin-left: 91.66666667%;
+ *margin-left: 91.56666667%;
+ }
-.p-right-8 {
- padding-right: 6.125rem;
-}
+ .offset-xlg-10 {
+ margin-left: 83.33333333%;
+ *margin-left: 83.23333333%;
+ }
-.p-right-9 {
- padding-right: 8rem;
-}
+ .offset-xlg-9 {
+ margin-left: 75%;
+ *margin-left: 74.9%;
+ }
-.p-right-10 {
- padding-right: 10.125rem;
-}
+ .offset-xlg-8 {
+ margin-left: 66.66666667%;
+ *margin-left: 66.56666667%;
+ }
-/**
- *
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
- *
- *
- */
-/**
- *
- *
- *
- *
- */
-/**
- *
+ *
+ *
+ *
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
- *
- */
-/**
- *
- *
- *
- *
- *
- */
-:root {
- --reflex-columns: 12;
- --reflex-grid-spacing: 15px;
- --reflex-xs: 576px;
- --reflex-sm: 768px;
- --reflex-md: 992px;
- --reflex-lg: 1200px;
- --reflex-xlg: 1600px;
- --reflex-xxs-max: 575px;
- --reflex-xs-max: 767px;
- --reflex-sm-max: 991px;
- --reflex-md-max: 1199px;
- --reflex-lg-max: 1599px;
-}
+ .offset-xlg-7 {
+ margin-left: 58.33333333%;
+ *margin-left: 58.23333333%;
+ }
-.container,
-.container-full {
- box-sizing: border-box;
- width: 100%;
- margin-right: auto;
- margin-left: auto;
- padding-right: 30px;
- padding-left: 30px;
-}
+ .offset-xlg-6 {
+ margin-left: 50%;
+ *margin-left: 49.9%;
+ }
-.container .grid,
-.container-full .grid {
- margin-right: -15px;
- margin-left: -15px;
-}
+ .offset-xlg-5 {
+ margin-left: 41.66666667%;
+ *margin-left: 41.56666667%;
+ }
-@media (min-width: 576px) {
- .container {
- max-width: 576px;
+ .offset-xlg-4 {
+ margin-left: 33.33333333%;
+ *margin-left: 33.23333333%;
}
-}
-@media (min-width: 768px) {
- .container {
- max-width: 768px;
+
+ .offset-xlg-3 {
+ margin-left: 25%;
+ *margin-left: 24.9%;
}
-}
-@media (min-width: 992px) {
- .container {
- max-width: 992px;
+
+ .offset-xlg-2 {
+ margin-left: 16.66666667%;
+ *margin-left: 16.56666667%;
}
-}
-@media (min-width: 1200px) {
- .container {
- max-width: 1200px;
+
+ .offset-xlg-1 {
+ margin-left: 8.33333333%;
+ *margin-left: 8.23333333%;
}
-}
-@media (min-width: 1600px) {
- .container {
- max-width: 1600px;
+
+ .offset-xlg-0 {
+ margin-left: 0;
+ *margin-left: -0.1%;
}
}
-.grid {
- box-sizing: border-box;
- display: block;
- display: flex;
+.wrap {
flex-wrap: wrap;
- padding: 0;
- margin: 0 auto;
- position: relative;
- letter-spacing: -0.31em;
- *letter-spacing: normal;
- word-spacing: -0.43em;
- list-style-type: none;
}
-.grid::before, .grid::after {
- box-sizing: border-box;
- letter-spacing: normal;
- word-spacing: normal;
- white-space: normal;
+.no-wrap {
+ flex-wrap: nowrap;
}
-[class*=col-] {
- box-sizing: border-box;
- letter-spacing: normal;
- word-spacing: normal;
- white-space: normal;
- position: relative;
- width: 100%;
- vertical-align: top;
- padding: 15px;
- display: inline-block;
- *display: inline;
- zoom: 1;
+.no-wrap [class*=col-] {
+ flex-shrink: 1;
}
-[class*=col-]::before, [class*=col-]::after {
- box-sizing: border-box;
- letter-spacing: normal;
- word-spacing: normal;
- white-space: normal;
+.wrap-reverse {
+ flex-wrap: wrap-reverse;
}
-[class*=col-] .grid {
- flex: 1 1 auto;
- margin: -15px;
+.direction-row {
+ flex-direction: row;
}
-.col-12 {
- width: 100%;
- *width: 99.9%;
+.direction-row-reverse {
+ flex-direction: row-reverse;
}
-.col-11 {
- width: 91.66666667%;
- *width: 91.56666667%;
+.direction-column {
+ flex-direction: column;
}
-.col-10 {
- width: 83.33333333%;
- *width: 83.23333333%;
+.direction-column-reverse {
+ flex-direction: column-reverse;
}
-.col-9 {
- width: 75%;
- *width: 74.9%;
+.align-start {
+ align-items: flex-start;
}
-.col-8 {
- width: 66.66666667%;
- *width: 66.56666667%;
+.align-end {
+ align-items: flex-end;
}
-.col-7 {
- width: 58.33333333%;
- *width: 58.23333333%;
+.align-end [class*=col-] {
+ vertical-align: bottom;
}
-.col-6 {
- width: 50%;
- *width: 49.9%;
+.align-center {
+ align-items: center;
}
-.col-5 {
- width: 41.66666667%;
- *width: 41.56666667%;
+.align-center [class*=col-] {
+ vertical-align: middle;
}
-.col-4 {
- width: 33.33333333%;
- *width: 33.23333333%;
+.align-baseline {
+ align-items: baseline;
}
-.col-3 {
- width: 25%;
- *width: 24.9%;
+.align-content-start {
+ align-content: flex-start;
}
-.col-2 {
- width: 16.66666667%;
- *width: 16.56666667%;
+.align-content-end {
+ align-content: flex-end;
}
-.col-1 {
- width: 8.33333333%;
- *width: 8.23333333%;
+.align-content-end [class*=col-] {
+ vertical-align: bottom;
}
-@media (min-width: 576px) {
- .col-xs-12 {
- width: 100%;
- *width: 99.9%;
- }
-
- .col-xs-11 {
- width: 91.66666667%;
- *width: 91.56666667%;
- }
-
- .col-xs-10 {
- width: 83.33333333%;
- *width: 83.23333333%;
- }
+.align-content-center {
+ align-content: center;
+}
- .col-xs-9 {
- width: 75%;
- *width: 74.9%;
- }
+.align-content-space-between {
+ align-content: space-between;
+}
- .col-xs-8 {
- width: 66.66666667%;
- *width: 66.56666667%;
- }
+.align-content-space-around {
+ align-content: space-around;
+}
- .col-xs-7 {
- width: 58.33333333%;
- *width: 58.23333333%;
- }
+.align-self-stretch {
+ align-self: stretch;
+}
- .col-xs-6 {
- width: 50%;
- *width: 49.9%;
- }
+.align-self-start {
+ align-self: flex-start;
+}
- .col-xs-5 {
- width: 41.66666667%;
- *width: 41.56666667%;
- }
+.align-self-end {
+ align-self: flex-end;
+ vertical-align: bottom;
+}
- .col-xs-4 {
- width: 33.33333333%;
- *width: 33.23333333%;
- }
+.align-self-center {
+ align-self: center;
+ vertical-align: middle;
+}
- .col-xs-3 {
- width: 25%;
- *width: 24.9%;
- }
+.align-self-baseline {
+ align-self: baseline;
+ vertical-align: baseline;
+}
- .col-xs-2 {
- width: 16.66666667%;
- *width: 16.56666667%;
- }
+.justify-start {
+ justify-content: flex-start;
+}
- .col-xs-1 {
- width: 8.33333333%;
- *width: 8.23333333%;
- }
+.justify-start.grid {
+ text-align: left;
}
-@media (min-width: 768px) {
- .col-sm-12 {
- width: 100%;
- *width: 99.9%;
- }
- .col-sm-11 {
- width: 91.66666667%;
- *width: 91.56666667%;
- }
+.justify-end {
+ justify-content: flex-end;
+}
- .col-sm-10 {
- width: 83.33333333%;
- *width: 83.23333333%;
- }
+.justify-end.grid {
+ text-align: right;
+ -moz-text-align-last: right;
+ text-align-last: right;
+}
- .col-sm-9 {
- width: 75%;
- *width: 74.9%;
- }
+.justify-end.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
- .col-sm-8 {
- width: 66.66666667%;
- *width: 66.56666667%;
- }
+.justify-center {
+ justify-content: center;
+}
- .col-sm-7 {
- width: 58.33333333%;
- *width: 58.23333333%;
- }
+.justify-center.grid {
+ text-align: center;
+ -moz-text-align-last: center;
+ text-align-last: center;
+}
- .col-sm-6 {
- width: 50%;
- *width: 49.9%;
- }
+.justify-center.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
- .col-sm-5 {
- width: 41.66666667%;
- *width: 41.56666667%;
- }
+.justify-space-between {
+ justify-content: space-between;
+}
- .col-sm-4 {
- width: 33.33333333%;
- *width: 33.23333333%;
- }
+.justify-space-between.grid {
+ text-align: justify;
+ -moz-text-align-last: justify;
+ text-align-last: justify;
+}
- .col-sm-3 {
- width: 25%;
- *width: 24.9%;
- }
+.justify-space-between.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
- .col-sm-2 {
- width: 16.66666667%;
- *width: 16.56666667%;
- }
+.justify-space-around {
+ justify-content: space-around;
+}
- .col-sm-1 {
- width: 8.33333333%;
- *width: 8.23333333%;
- }
+.justify-space-around.grid {
+ text-align: justify;
+ -moz-text-align-last: justify;
+ text-align-last: justify;
}
-@media (min-width: 992px) {
- .col-md-12 {
- width: 100%;
- *width: 99.9%;
- }
- .col-md-11 {
- width: 91.66666667%;
- *width: 91.56666667%;
- }
+.justify-space-around.grid [class*=col-] {
+ text-align: left;
+ text-align: start;
+ -moz-text-align-last: left;
+ -moz-text-align-last: start;
+ text-align-last: left;
+ text-align-last: start;
+}
- .col-md-10 {
- width: 83.33333333%;
- *width: 83.23333333%;
- }
+.grid-bleed [class*=col-] {
+ padding: 0;
+}
- .col-md-9 {
- width: 75%;
- *width: 74.9%;
- }
+.col-grid {
+ display: flex;
+ flex-direction: column;
+}
- .col-md-8 {
- width: 66.66666667%;
- *width: 66.56666667%;
- }
+.col-grid.direction-row {
+ flex-direction: row;
+}
- .col-md-7 {
- width: 58.33333333%;
- *width: 58.23333333%;
- }
+.col-bleed {
+ padding: 0;
+}
- .col-md-6 {
- width: 50%;
- *width: 49.9%;
- }
+.col-bleed-x {
+ padding: 15px 0;
+}
- .col-md-5 {
- width: 41.66666667%;
- *width: 41.56666667%;
- }
+.col-bleed-y {
+ padding: 0 15px;
+}
- .col-md-4 {
- width: 33.33333333%;
- *width: 33.23333333%;
- }
+.flex-img {
+ display: block;
+ flex: 0 0 auto;
+ max-width: 100%;
+ height: auto;
+ width: 100%;
+ *width: auto;
+}
- .col-md-3 {
- width: 25%;
- *width: 24.9%;
- }
+.flex-footer {
+ width: 100%;
+ margin-top: auto;
+ margin-bottom: 0;
+}
- .col-md-2 {
- width: 16.66666667%;
- *width: 16.56666667%;
- }
+.flex-footer > :last-child {
+ margin-bottom: 0;
+}
- .col-md-1 {
- width: 8.33333333%;
- *width: 8.23333333%;
+@media (max-width: 575px) {
+ .hidden-xxs {
+ display: none;
}
}
-@media (min-width: 1200px) {
- .col-lg-12 {
- width: 100%;
- *width: 99.9%;
+@media (min-width: 576px) {
+ .hidden-xs-up {
+ display: none;
}
-
- .col-lg-11 {
- width: 91.66666667%;
- *width: 91.56666667%;
+}
+@media (max-width: 767px) {
+ .hidden-xs-down {
+ display: none;
}
-
- .col-lg-10 {
- width: 83.33333333%;
- *width: 83.23333333%;
+}
+@media (min-width: 576px) and (max-width: 767px) {
+ .hidden-xs {
+ display: none;
}
-
- .col-lg-9 {
- width: 75%;
- *width: 74.9%;
+}
+@media (min-width: 768px) {
+ .hidden-sm-up {
+ display: none;
}
-
- .col-lg-8 {
- width: 66.66666667%;
- *width: 66.56666667%;
+}
+@media (max-width: 991px) {
+ .hidden-sm-down {
+ display: none;
}
-
- .col-lg-7 {
- width: 58.33333333%;
- *width: 58.23333333%;
+}
+@media (min-width: 768px) and (max-width: 991px) {
+ .hidden-sm {
+ display: none;
}
-
- .col-lg-6 {
- width: 50%;
- *width: 49.9%;
+}
+@media (min-width: 992px) {
+ .hidden-md-up {
+ display: none;
}
-
- .col-lg-5 {
- width: 41.66666667%;
- *width: 41.56666667%;
+}
+@media (max-width: 1199px) {
+ .hidden-md-down {
+ display: none;
}
-
- .col-lg-4 {
- width: 33.33333333%;
- *width: 33.23333333%;
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+ .hidden-md {
+ display: none;
}
-
- .col-lg-3 {
- width: 25%;
- *width: 24.9%;
+}
+@media (min-width: 1200px) {
+ .hidden-lg-up {
+ display: none;
}
-
- .col-lg-2 {
- width: 16.66666667%;
- *width: 16.56666667%;
+}
+@media (max-width: 1599px) {
+ .hidden-lg-down {
+ display: none;
}
-
- .col-lg-1 {
- width: 8.33333333%;
- *width: 8.23333333%;
+}
+@media (min-width: 1200px) and (max-width: 1599px) {
+ .hidden-lg {
+ display: none;
}
}
@media (min-width: 1600px) {
- .col-xlg-12 {
- width: 100%;
- *width: 99.9%;
+ .hidden-xlg {
+ display: none;
}
+}
+/**
+ *
+ *
+ *
+ *
+ */
+/**
+ * Sizing
+ *
+ * Width and Height Classes,
+ * Sizes with percentage will calculate with the Reflex Grid
+ *
+ *
+ */
+.w-0 {
+ width: 0;
+}
- .col-xlg-11 {
- width: 91.66666667%;
- *width: 91.56666667%;
- }
+.h-0 {
+ height: 0;
+}
- .col-xlg-10 {
- width: 83.33333333%;
- *width: 83.23333333%;
- }
+.w-1 {
+ width: 1px;
+}
- .col-xlg-9 {
- width: 75%;
- *width: 74.9%;
- }
+.h-1 {
+ height: 1px;
+}
- .col-xlg-8 {
- width: 66.66666667%;
- *width: 66.56666667%;
- }
+.w-col-1 {
+ width: 8.3333333333%;
+}
- .col-xlg-7 {
- width: 58.33333333%;
- *width: 58.23333333%;
- }
+.h-col-1 {
+ height: 8.3333333333%;
+}
- .col-xlg-6 {
- width: 50%;
- *width: 49.9%;
- }
+.w-col-2 {
+ width: 16.6666666667%;
+}
- .col-xlg-5 {
- width: 41.66666667%;
- *width: 41.56666667%;
- }
+.h-col-2 {
+ height: 16.6666666667%;
+}
- .col-xlg-4 {
- width: 33.33333333%;
- *width: 33.23333333%;
- }
+.w-col-3 {
+ width: 25%;
+}
- .col-xlg-3 {
- width: 25%;
- *width: 24.9%;
- }
+.h-col-3 {
+ height: 25%;
+}
- .col-xlg-2 {
- width: 16.66666667%;
- *width: 16.56666667%;
- }
+.w-col-4 {
+ width: 33.3333333333%;
+}
- .col-xlg-1 {
- width: 8.33333333%;
- *width: 8.23333333%;
- }
+.h-col-4 {
+ height: 33.3333333333%;
}
-.col-auto {
- flex: 1 0 0px;
- width: auto;
+
+.w-col-5 {
+ width: 41.6666666667%;
}
-@media (min-width: 576px) {
- .col-xs-auto {
- flex: 1 0 0px;
- width: auto;
- }
+.h-col-5 {
+ height: 41.6666666667%;
}
-@media (min-width: 768px) {
- .col-sm-auto {
- flex: 1 0 0px;
- width: auto;
- }
+
+.w-col-6 {
+ width: 50%;
}
-@media (min-width: 992px) {
- .col-md-auto {
- flex: 1 0 0px;
- width: auto;
- }
+
+.h-col-6 {
+ height: 50%;
}
-@media (min-width: 1200px) {
- .col-lg-auto {
- flex: 1 0 0px;
- width: auto;
- }
+
+.w-col-7 {
+ width: 58.3333333333%;
}
-@media (min-width: 1600px) {
- .col-xlg-auto {
- flex: 1 0 0px;
- width: auto;
- }
+
+.h-col-7 {
+ height: 58.3333333333%;
}
-.order-12 {
- order: 12;
+
+.w-col-8 {
+ width: 66.6666666667%;
}
-.order-11 {
- order: 11;
+.h-col-8 {
+ height: 66.6666666667%;
}
-.order-10 {
- order: 10;
+.w-col-9 {
+ width: 75%;
}
-.order-9 {
- order: 9;
+.h-col-9 {
+ height: 75%;
}
-.order-8 {
- order: 8;
+.w-col-10 {
+ width: 83.3333333333%;
}
-.order-7 {
- order: 7;
+.h-col-10 {
+ height: 83.3333333333%;
}
-.order-6 {
- order: 6;
+.w-col-11 {
+ width: 91.6666666667%;
}
-.order-5 {
- order: 5;
+.h-col-11 {
+ height: 91.6666666667%;
}
-.order-4 {
- order: 4;
+.w-col-12 {
+ width: 100%;
}
-.order-3 {
- order: 3;
+.h-col-12 {
+ height: 100%;
}
-.order-2 {
- order: 2;
+.w-1 {
+ width: 0.5rem;
}
-.order-1 {
- order: 1;
+.w-2 {
+ width: 1rem;
}
-.order-0 {
- order: 0;
+.w-3 {
+ width: 1.5rem;
}
-@media (min-width: 576px) {
- .order-xs-12 {
- order: 12;
- }
+.w-4 {
+ width: 2rem;
+}
- .order-xs-11 {
- order: 11;
- }
+.w-5 {
+ width: 2.5rem;
+}
+
+.w-6 {
+ width: 3rem;
+}
- .order-xs-10 {
- order: 10;
- }
+.w-7 {
+ width: 3.5rem;
+}
- .order-xs-9 {
- order: 9;
- }
+.w-8 {
+ width: 4rem;
+}
- .order-xs-8 {
- order: 8;
- }
+.w-9 {
+ width: 4.5rem;
+}
- .order-xs-7 {
- order: 7;
- }
+.w-10 {
+ width: 5rem;
+}
- .order-xs-6 {
- order: 6;
- }
+.w-11 {
+ width: 5.5rem;
+}
- .order-xs-5 {
- order: 5;
- }
+.w-12 {
+ width: 6rem;
+}
- .order-xs-4 {
- order: 4;
- }
+.w-13 {
+ width: 6.5rem;
+}
- .order-xs-3 {
- order: 3;
- }
+.w-14 {
+ width: 7rem;
+}
- .order-xs-2 {
- order: 2;
- }
+.w-15 {
+ width: 7.5rem;
+}
- .order-xs-1 {
- order: 1;
- }
+.w-16 {
+ width: 8rem;
+}
- .order-xs-0 {
- order: 0;
- }
+.w-17 {
+ width: 8.5rem;
}
-@media (min-width: 768px) {
- .order-sm-12 {
- order: 12;
- }
- .order-sm-11 {
- order: 11;
- }
+.w-18 {
+ width: 9rem;
+}
- .order-sm-10 {
- order: 10;
- }
+.w-19 {
+ width: 9.5rem;
+}
- .order-sm-9 {
- order: 9;
- }
+.w-20 {
+ width: 10rem;
+}
- .order-sm-8 {
- order: 8;
- }
+.w-21 {
+ width: 10.5rem;
+}
- .order-sm-7 {
- order: 7;
- }
+.w-22 {
+ width: 11rem;
+}
- .order-sm-6 {
- order: 6;
- }
+.w-23 {
+ width: 11.5rem;
+}
- .order-sm-5 {
- order: 5;
- }
+.w-24 {
+ width: 12rem;
+}
- .order-sm-4 {
- order: 4;
- }
+.w-25 {
+ width: 12.5rem;
+}
- .order-sm-3 {
- order: 3;
- }
+.w-26 {
+ width: 13rem;
+}
- .order-sm-2 {
- order: 2;
- }
+.w-27 {
+ width: 13.5rem;
+}
- .order-sm-1 {
- order: 1;
- }
+.w-28 {
+ width: 14rem;
+}
- .order-sm-0 {
- order: 0;
- }
+.w-29 {
+ width: 14.5rem;
}
-@media (min-width: 992px) {
- .order-md-12 {
- order: 12;
- }
- .order-md-11 {
- order: 11;
- }
+.w-30 {
+ width: 15rem;
+}
- .order-md-10 {
- order: 10;
- }
+.w-31 {
+ width: 15.5rem;
+}
- .order-md-9 {
- order: 9;
- }
+.w-32 {
+ width: 16rem;
+}
- .order-md-8 {
- order: 8;
- }
+.w-33 {
+ width: 16.5rem;
+}
- .order-md-7 {
- order: 7;
- }
+.w-34 {
+ width: 17rem;
+}
- .order-md-6 {
- order: 6;
- }
+.w-35 {
+ width: 17.5rem;
+}
- .order-md-5 {
- order: 5;
- }
+.w-36 {
+ width: 18rem;
+}
- .order-md-4 {
- order: 4;
- }
+.w-37 {
+ width: 18.5rem;
+}
- .order-md-3 {
- order: 3;
- }
+.w-38 {
+ width: 19rem;
+}
- .order-md-2 {
- order: 2;
- }
+.w-39 {
+ width: 19.5rem;
+}
- .order-md-1 {
- order: 1;
- }
+.w-40 {
+ width: 20rem;
+}
- .order-md-0 {
- order: 0;
- }
+.w-41 {
+ width: 20.5rem;
}
-@media (min-width: 1200px) {
- .order-lg-12 {
- order: 12;
- }
- .order-lg-11 {
- order: 11;
- }
+.w-42 {
+ width: 21rem;
+}
- .order-lg-10 {
- order: 10;
- }
+.w-43 {
+ width: 21.5rem;
+}
- .order-lg-9 {
- order: 9;
- }
+.w-44 {
+ width: 22rem;
+}
- .order-lg-8 {
- order: 8;
- }
+.w-45 {
+ width: 22.5rem;
+}
- .order-lg-7 {
- order: 7;
- }
+.w-46 {
+ width: 23rem;
+}
- .order-lg-6 {
- order: 6;
- }
+.w-47 {
+ width: 23.5rem;
+}
- .order-lg-5 {
- order: 5;
- }
+.w-48 {
+ width: 24rem;
+}
- .order-lg-4 {
- order: 4;
- }
+.w-49 {
+ width: 24.5rem;
+}
- .order-lg-3 {
- order: 3;
- }
+.w-50 {
+ width: 25rem;
+}
- .order-lg-2 {
- order: 2;
- }
+.h-1 {
+ height: 0.5rem;
+}
- .order-lg-1 {
- order: 1;
- }
+.h-2 {
+ height: 1rem;
+}
- .order-lg-0 {
- order: 0;
- }
+.h-3 {
+ height: 1.5rem;
}
-@media (min-width: 1600px) {
- .order-xlg-12 {
- order: 12;
- }
- .order-xlg-11 {
- order: 11;
- }
+.h-4 {
+ height: 2rem;
+}
- .order-xlg-10 {
- order: 10;
- }
+.h-5 {
+ height: 2.5rem;
+}
- .order-xlg-9 {
- order: 9;
- }
+.h-6 {
+ height: 3rem;
+}
- .order-xlg-8 {
- order: 8;
- }
+.h-7 {
+ height: 3.5rem;
+}
- .order-xlg-7 {
- order: 7;
- }
+.h-8 {
+ height: 4rem;
+}
- .order-xlg-6 {
- order: 6;
- }
+.h-9 {
+ height: 4.5rem;
+}
- .order-xlg-5 {
- order: 5;
- }
+.h-10 {
+ height: 5rem;
+}
- .order-xlg-4 {
- order: 4;
- }
+.h-11 {
+ height: 5.5rem;
+}
- .order-xlg-3 {
- order: 3;
- }
+.h-12 {
+ height: 6rem;
+}
- .order-xlg-2 {
- order: 2;
- }
+.h-13 {
+ height: 6.5rem;
+}
- .order-xlg-1 {
- order: 1;
- }
+.h-14 {
+ height: 7rem;
+}
- .order-xlg-0 {
- order: 0;
- }
+.h-15 {
+ height: 7.5rem;
}
-.offset-11 {
- margin-left: 91.66666667%;
- *margin-left: 91.56666667%;
+
+.h-16 {
+ height: 8rem;
}
-.offset-10 {
- margin-left: 83.33333333%;
- *margin-left: 83.23333333%;
+.h-17 {
+ height: 8.5rem;
}
-.offset-9 {
- margin-left: 75%;
- *margin-left: 74.9%;
+.h-18 {
+ height: 9rem;
}
-.offset-8 {
- margin-left: 66.66666667%;
- *margin-left: 66.56666667%;
+.h-19 {
+ height: 9.5rem;
}
-.offset-7 {
- margin-left: 58.33333333%;
- *margin-left: 58.23333333%;
+.h-20 {
+ height: 10rem;
}
-.offset-6 {
- margin-left: 50%;
- *margin-left: 49.9%;
+.h-21 {
+ height: 10.5rem;
}
-.offset-5 {
- margin-left: 41.66666667%;
- *margin-left: 41.56666667%;
+.h-22 {
+ height: 11rem;
}
-.offset-4 {
- margin-left: 33.33333333%;
- *margin-left: 33.23333333%;
+.h-23 {
+ height: 11.5rem;
}
-.offset-3 {
- margin-left: 25%;
- *margin-left: 24.9%;
+.h-24 {
+ height: 12rem;
}
-.offset-2 {
- margin-left: 16.66666667%;
- *margin-left: 16.56666667%;
+.h-25 {
+ height: 12.5rem;
}
-.offset-1 {
- margin-left: 8.33333333%;
- *margin-left: 8.23333333%;
+.h-26 {
+ height: 13rem;
}
-@media (min-width: 576px) {
- .offset-xs-11 {
- margin-left: 91.66666667%;
- *margin-left: 91.56666667%;
- }
+.h-27 {
+ height: 13.5rem;
+}
- .offset-xs-10 {
- margin-left: 83.33333333%;
- *margin-left: 83.23333333%;
- }
+.h-28 {
+ height: 14rem;
+}
- .offset-xs-9 {
- margin-left: 75%;
- *margin-left: 74.9%;
- }
+.h-29 {
+ height: 14.5rem;
+}
- .offset-xs-8 {
- margin-left: 66.66666667%;
- *margin-left: 66.56666667%;
- }
+.h-30 {
+ height: 15rem;
+}
- .offset-xs-7 {
- margin-left: 58.33333333%;
- *margin-left: 58.23333333%;
- }
+.h-31 {
+ height: 15.5rem;
+}
- .offset-xs-6 {
- margin-left: 50%;
- *margin-left: 49.9%;
- }
+.h-32 {
+ height: 16rem;
+}
- .offset-xs-5 {
- margin-left: 41.66666667%;
- *margin-left: 41.56666667%;
- }
+.h-33 {
+ height: 16.5rem;
+}
- .offset-xs-4 {
- margin-left: 33.33333333%;
- *margin-left: 33.23333333%;
- }
+.h-34 {
+ height: 17rem;
+}
- .offset-xs-3 {
- margin-left: 25%;
- *margin-left: 24.9%;
- }
+.h-35 {
+ height: 17.5rem;
+}
- .offset-xs-2 {
- margin-left: 16.66666667%;
- *margin-left: 16.56666667%;
- }
+.h-36 {
+ height: 18rem;
+}
- .offset-xs-1 {
- margin-left: 8.33333333%;
- *margin-left: 8.23333333%;
- }
+.h-37 {
+ height: 18.5rem;
+}
- .offset-xs-0 {
- margin-left: 0;
- *margin-left: -0.1%;
- }
+.h-38 {
+ height: 19rem;
+}
+
+.h-39 {
+ height: 19.5rem;
}
-@media (min-width: 768px) {
- .offset-sm-11 {
- margin-left: 91.66666667%;
- *margin-left: 91.56666667%;
- }
- .offset-sm-10 {
- margin-left: 83.33333333%;
- *margin-left: 83.23333333%;
- }
+.h-40 {
+ height: 20rem;
+}
- .offset-sm-9 {
- margin-left: 75%;
- *margin-left: 74.9%;
- }
+.h-41 {
+ height: 20.5rem;
+}
- .offset-sm-8 {
- margin-left: 66.66666667%;
- *margin-left: 66.56666667%;
- }
+.h-42 {
+ height: 21rem;
+}
- .offset-sm-7 {
- margin-left: 58.33333333%;
- *margin-left: 58.23333333%;
- }
+.h-43 {
+ height: 21.5rem;
+}
- .offset-sm-6 {
- margin-left: 50%;
- *margin-left: 49.9%;
- }
+.h-44 {
+ height: 22rem;
+}
- .offset-sm-5 {
- margin-left: 41.66666667%;
- *margin-left: 41.56666667%;
- }
+.h-45 {
+ height: 22.5rem;
+}
- .offset-sm-4 {
- margin-left: 33.33333333%;
- *margin-left: 33.23333333%;
- }
+.h-46 {
+ height: 23rem;
+}
- .offset-sm-3 {
- margin-left: 25%;
- *margin-left: 24.9%;
- }
+.h-47 {
+ height: 23.5rem;
+}
- .offset-sm-2 {
- margin-left: 16.66666667%;
- *margin-left: 16.56666667%;
- }
+.h-48 {
+ height: 24rem;
+}
- .offset-sm-1 {
- margin-left: 8.33333333%;
- *margin-left: 8.23333333%;
- }
+.h-49 {
+ height: 24.5rem;
+}
- .offset-sm-0 {
- margin-left: 0;
- *margin-left: -0.1%;
- }
+.h-50 {
+ height: 25rem;
}
-@media (min-width: 992px) {
- .offset-md-11 {
- margin-left: 91.66666667%;
- *margin-left: 91.56666667%;
- }
- .offset-md-10 {
- margin-left: 83.33333333%;
- *margin-left: 83.23333333%;
- }
+/**
+ *
+ *
+ */
+.m-top-0 {
+ margin-top: 0;
+}
- .offset-md-9 {
- margin-left: 75%;
- *margin-left: 74.9%;
- }
+.m-top-1 {
+ margin-top: 1px;
+}
- .offset-md-8 {
- margin-left: 66.66666667%;
- *margin-left: 66.56666667%;
- }
+.m-top-2 {
+ margin-top: 0.125rem;
+}
- .offset-md-7 {
- margin-left: 58.33333333%;
- *margin-left: 58.23333333%;
- }
+.m-top-3 {
+ margin-top: 0.5rem;
+}
- .offset-md-6 {
- margin-left: 50%;
- *margin-left: 49.9%;
- }
+.m-top-4 {
+ margin-top: 1.125rem;
+}
- .offset-md-5 {
- margin-left: 41.66666667%;
- *margin-left: 41.56666667%;
- }
+.m-top-5 {
+ margin-top: 2rem;
+}
- .offset-md-4 {
- margin-left: 33.33333333%;
- *margin-left: 33.23333333%;
- }
+.m-top-6 {
+ margin-top: 3.125rem;
+}
- .offset-md-3 {
- margin-left: 25%;
- *margin-left: 24.9%;
- }
+.m-top-7 {
+ margin-top: 4.5rem;
+}
- .offset-md-2 {
- margin-left: 16.66666667%;
- *margin-left: 16.56666667%;
- }
+.m-top-8 {
+ margin-top: 6.125rem;
+}
- .offset-md-1 {
- margin-left: 8.33333333%;
- *margin-left: 8.23333333%;
- }
+.m-top-9 {
+ margin-top: 8rem;
+}
- .offset-md-0 {
- margin-left: 0;
- *margin-left: -0.1%;
- }
+.m-top-10 {
+ margin-top: 10.125rem;
}
-@media (min-width: 1200px) {
- .offset-lg-11 {
- margin-left: 91.66666667%;
- *margin-left: 91.56666667%;
- }
- .offset-lg-10 {
- margin-left: 83.33333333%;
- *margin-left: 83.23333333%;
- }
+.m-bottom-0 {
+ margin-bottom: 0;
+}
- .offset-lg-9 {
- margin-left: 75%;
- *margin-left: 74.9%;
- }
+.m-bottom-1 {
+ margin-bottom: 1px;
+}
- .offset-lg-8 {
- margin-left: 66.66666667%;
- *margin-left: 66.56666667%;
- }
+.m-bottom-2 {
+ margin-bottom: 0.125rem;
+}
- .offset-lg-7 {
- margin-left: 58.33333333%;
- *margin-left: 58.23333333%;
- }
+.m-bottom-3 {
+ margin-bottom: 0.5rem;
+}
- .offset-lg-6 {
- margin-left: 50%;
- *margin-left: 49.9%;
- }
+.m-bottom-4 {
+ margin-bottom: 1.125rem;
+}
- .offset-lg-5 {
- margin-left: 41.66666667%;
- *margin-left: 41.56666667%;
- }
+.m-bottom-5 {
+ margin-bottom: 2rem;
+}
- .offset-lg-4 {
- margin-left: 33.33333333%;
- *margin-left: 33.23333333%;
- }
+.m-bottom-6 {
+ margin-bottom: 3.125rem;
+}
- .offset-lg-3 {
- margin-left: 25%;
- *margin-left: 24.9%;
- }
+.m-bottom-7 {
+ margin-bottom: 4.5rem;
+}
- .offset-lg-2 {
- margin-left: 16.66666667%;
- *margin-left: 16.56666667%;
- }
+.m-bottom-8 {
+ margin-bottom: 6.125rem;
+}
- .offset-lg-1 {
- margin-left: 8.33333333%;
- *margin-left: 8.23333333%;
- }
+.m-bottom-9 {
+ margin-bottom: 8rem;
+}
- .offset-lg-0 {
- margin-left: 0;
- *margin-left: -0.1%;
- }
+.m-bottom-10 {
+ margin-bottom: 10.125rem;
}
-@media (min-width: 1600px) {
- .offset-xlg-11 {
- margin-left: 91.66666667%;
- *margin-left: 91.56666667%;
- }
- .offset-xlg-10 {
- margin-left: 83.33333333%;
- *margin-left: 83.23333333%;
- }
+.m-left-0 {
+ margin-left: 0;
+}
- .offset-xlg-9 {
- margin-left: 75%;
- *margin-left: 74.9%;
- }
+.m-left-1 {
+ margin-left: 1px;
+}
- .offset-xlg-8 {
- margin-left: 66.66666667%;
- *margin-left: 66.56666667%;
- }
+.m-left-2 {
+ margin-left: 0.125rem;
+}
- .offset-xlg-7 {
- margin-left: 58.33333333%;
- *margin-left: 58.23333333%;
- }
+.m-left-3 {
+ margin-left: 0.5rem;
+}
- .offset-xlg-6 {
- margin-left: 50%;
- *margin-left: 49.9%;
- }
+.m-left-4 {
+ margin-left: 1.125rem;
+}
- .offset-xlg-5 {
- margin-left: 41.66666667%;
- *margin-left: 41.56666667%;
- }
+.m-left-5 {
+ margin-left: 2rem;
+}
- .offset-xlg-4 {
- margin-left: 33.33333333%;
- *margin-left: 33.23333333%;
- }
+.m-left-6 {
+ margin-left: 3.125rem;
+}
- .offset-xlg-3 {
- margin-left: 25%;
- *margin-left: 24.9%;
- }
+.m-left-7 {
+ margin-left: 4.5rem;
+}
- .offset-xlg-2 {
- margin-left: 16.66666667%;
- *margin-left: 16.56666667%;
- }
+.m-left-8 {
+ margin-left: 6.125rem;
+}
- .offset-xlg-1 {
- margin-left: 8.33333333%;
- *margin-left: 8.23333333%;
- }
+.m-left-9 {
+ margin-left: 8rem;
+}
- .offset-xlg-0 {
- margin-left: 0;
- *margin-left: -0.1%;
- }
+.m-left-10 {
+ margin-left: 10.125rem;
}
-.wrap {
- flex-wrap: wrap;
+
+.m-right-0 {
+ margin-right: 0;
}
-.no-wrap {
- flex-wrap: nowrap;
+.m-right-1 {
+ margin-right: 1px;
}
-.no-wrap [class*=col-] {
- flex-shrink: 1;
+.m-right-2 {
+ margin-right: 0.125rem;
}
-.wrap-reverse {
- flex-wrap: wrap-reverse;
+.m-right-3 {
+ margin-right: 0.5rem;
}
-.direction-row {
- flex-direction: row;
+.m-right-4 {
+ margin-right: 1.125rem;
}
-.direction-row-reverse {
- flex-direction: row-reverse;
+.m-right-5 {
+ margin-right: 2rem;
}
-.direction-column {
- flex-direction: column;
+.m-right-6 {
+ margin-right: 3.125rem;
}
-.direction-column-reverse {
- flex-direction: column-reverse;
+.m-right-7 {
+ margin-right: 4.5rem;
}
-.align-start {
- align-items: flex-start;
+.m-right-8 {
+ margin-right: 6.125rem;
}
-.align-end {
- align-items: flex-end;
+.m-right-9 {
+ margin-right: 8rem;
}
-.align-end [class*=col-] {
- vertical-align: bottom;
+.m-right-10 {
+ margin-right: 10.125rem;
}
-.align-center {
- align-items: center;
+.p-top-0 {
+ padding-top: 0;
}
-.align-center [class*=col-] {
- vertical-align: middle;
+.p-top-1 {
+ padding-top: 1px;
}
-.align-baseline {
- align-items: baseline;
+.p-top-0 {
+ padding-top: 0.125rem;
}
-.align-content-start {
- align-content: flex-start;
+.p-top-1 {
+ padding-top: 0rem;
}
-.align-content-end {
- align-content: flex-end;
+.p-top-2 {
+ padding-top: 0.125rem;
}
-.align-content-end [class*=col-] {
- vertical-align: bottom;
+.p-top-3 {
+ padding-top: 0.5rem;
}
-.align-content-center {
- align-content: center;
+.p-top-4 {
+ padding-top: 1.125rem;
}
-.align-content-space-between {
- align-content: space-between;
+.p-top-5 {
+ padding-top: 2rem;
}
-.align-content-space-around {
- align-content: space-around;
+.p-top-6 {
+ padding-top: 3.125rem;
}
-.align-self-stretch {
- align-self: stretch;
+.p-top-7 {
+ padding-top: 4.5rem;
}
-.align-self-start {
- align-self: flex-start;
+.p-top-8 {
+ padding-top: 6.125rem;
}
-.align-self-end {
- align-self: flex-end;
- vertical-align: bottom;
+.p-top-9 {
+ padding-top: 8rem;
}
-.align-self-center {
- align-self: center;
- vertical-align: middle;
+.p-top-10 {
+ padding-top: 10.125rem;
}
-.align-self-baseline {
- align-self: baseline;
- vertical-align: baseline;
+.p-bottom-0 {
+ padding-bottom: 0;
}
-.justify-start {
- justify-content: flex-start;
+.p-bottom-1 {
+ padding-bottom: 1px;
}
-.justify-start.grid {
- text-align: left;
+.p-bottom-0 {
+ padding-bottom: 0.125rem;
}
-.justify-end {
- justify-content: flex-end;
+.p-bottom-1 {
+ padding-bottom: 0rem;
}
-.justify-end.grid {
- text-align: right;
- -moz-text-align-last: right;
- text-align-last: right;
+.p-bottom-2 {
+ padding-bottom: 0.125rem;
}
-.justify-end.grid [class*=col-] {
- text-align: left;
- text-align: start;
- -moz-text-align-last: left;
- -moz-text-align-last: start;
- text-align-last: left;
- text-align-last: start;
+.p-bottom-3 {
+ padding-bottom: 0.5rem;
}
-.justify-center {
- justify-content: center;
+.p-bottom-4 {
+ padding-bottom: 1.125rem;
}
-.justify-center.grid {
- text-align: center;
- -moz-text-align-last: center;
- text-align-last: center;
+.p-bottom-5 {
+ padding-bottom: 2rem;
}
-.justify-center.grid [class*=col-] {
- text-align: left;
- text-align: start;
- -moz-text-align-last: left;
- -moz-text-align-last: start;
- text-align-last: left;
- text-align-last: start;
+.p-bottom-6 {
+ padding-bottom: 3.125rem;
}
-.justify-space-between {
- justify-content: space-between;
+.p-bottom-7 {
+ padding-bottom: 4.5rem;
}
-.justify-space-between.grid {
- text-align: justify;
- -moz-text-align-last: justify;
- text-align-last: justify;
+.p-bottom-8 {
+ padding-bottom: 6.125rem;
}
-.justify-space-between.grid [class*=col-] {
- text-align: left;
- text-align: start;
- -moz-text-align-last: left;
- -moz-text-align-last: start;
- text-align-last: left;
- text-align-last: start;
+.p-bottom-9 {
+ padding-bottom: 8rem;
}
-.justify-space-around {
- justify-content: space-around;
+.p-bottom-10 {
+ padding-bottom: 10.125rem;
}
-.justify-space-around.grid {
- text-align: justify;
- -moz-text-align-last: justify;
- text-align-last: justify;
+.p-left-0 {
+ padding-left: 0;
}
-.justify-space-around.grid [class*=col-] {
- text-align: left;
- text-align: start;
- -moz-text-align-last: left;
- -moz-text-align-last: start;
- text-align-last: left;
- text-align-last: start;
+.p-left-1 {
+ padding-left: 1px;
}
-.grid-bleed [class*=col-] {
- padding: 0;
+.p-left-0 {
+ padding-left: 0.125rem;
}
-.col-grid {
- display: flex;
- flex-direction: column;
+.p-left-1 {
+ padding-left: 0rem;
}
-.col-grid.direction-row {
- flex-direction: row;
+.p-left-2 {
+ padding-left: 0.125rem;
}
-.col-bleed {
- padding: 0;
+.p-left-3 {
+ padding-left: 0.5rem;
}
-.col-bleed-x {
- padding: 15px 0;
+.p-left-4 {
+ padding-left: 1.125rem;
}
-.col-bleed-y {
- padding: 0 15px;
+.p-left-5 {
+ padding-left: 2rem;
}
-.flex-img {
- display: block;
- flex: 0 0 auto;
- max-width: 100%;
- height: auto;
- width: 100%;
- *width: auto;
+.p-left-6 {
+ padding-left: 3.125rem;
}
-.flex-footer {
- width: 100%;
- margin-top: auto;
- margin-bottom: 0;
+.p-left-7 {
+ padding-left: 4.5rem;
}
-.flex-footer > :last-child {
- margin-bottom: 0;
+.p-left-8 {
+ padding-left: 6.125rem;
}
-@media (max-width: 575px) {
- .hidden-xxs {
- display: none;
- }
+.p-left-9 {
+ padding-left: 8rem;
}
-@media (min-width: 576px) {
- .hidden-xs-up {
- display: none;
- }
+
+.p-left-10 {
+ padding-left: 10.125rem;
}
-@media (max-width: 767px) {
- .hidden-xs-down {
- display: none;
- }
+
+.p-right-0 {
+ padding-right: 0;
}
-@media (min-width: 576px) and (max-width: 767px) {
- .hidden-xs {
- display: none;
- }
+
+.p-right-1 {
+ padding-right: 1px;
}
-@media (min-width: 768px) {
- .hidden-sm-up {
- display: none;
- }
+
+.p-right-0 {
+ padding-right: 0.125rem;
}
-@media (max-width: 991px) {
- .hidden-sm-down {
- display: none;
- }
+
+.p-right-1 {
+ padding-right: 0rem;
}
-@media (min-width: 768px) and (max-width: 991px) {
- .hidden-sm {
- display: none;
- }
+
+.p-right-2 {
+ padding-right: 0.125rem;
}
-@media (min-width: 992px) {
- .hidden-md-up {
- display: none;
- }
+
+.p-right-3 {
+ padding-right: 0.5rem;
}
-@media (max-width: 1199px) {
- .hidden-md-down {
- display: none;
- }
+
+.p-right-4 {
+ padding-right: 1.125rem;
}
-@media (min-width: 992px) and (max-width: 1199px) {
- .hidden-md {
- display: none;
- }
+
+.p-right-5 {
+ padding-right: 2rem;
}
-@media (min-width: 1200px) {
- .hidden-lg-up {
- display: none;
- }
+
+.p-right-6 {
+ padding-right: 3.125rem;
}
-@media (max-width: 1599px) {
- .hidden-lg-down {
- display: none;
- }
+
+.p-right-7 {
+ padding-right: 4.5rem;
}
-@media (min-width: 1200px) and (max-width: 1599px) {
- .hidden-lg {
- display: none;
- }
+
+.p-right-8 {
+ padding-right: 6.125rem;
}
-@media (min-width: 1600px) {
- .hidden-xlg {
- display: none;
- }
+
+.p-right-9 {
+ padding-right: 8rem;
+}
+
+.p-right-10 {
+ padding-right: 10.125rem;
}
+
a {
color: #fff;
}
@@ -4547,106 +4552,6 @@ body {
z-index: 10;
}
-/**
- *
- *
- */
-.w-col-1 {
- width: 8.3333333333%;
-}
-
-.w-col-2 {
- width: 16.6666666667%;
-}
-
-.w-col-3 {
- width: 25%;
-}
-
-.w-col-4 {
- width: 33.3333333333%;
-}
-
-.w-col-5 {
- width: 41.6666666667%;
-}
-
-.w-col-6 {
- width: 50%;
-}
-
-.w-col-7 {
- width: 58.3333333333%;
-}
-
-.w-col-8 {
- width: 66.6666666667%;
-}
-
-.w-col-9 {
- width: 75%;
-}
-
-.w-col-10 {
- width: 83.3333333333%;
-}
-
-.w-col-11 {
- width: 91.6666666667%;
-}
-
-.w-col-12 {
- width: 100%;
-}
-
-.w-1 {
- width: 1em;
-}
-
-.w-2 {
- width: 2em;
-}
-
-.w-3 {
- width: 3em;
-}
-
-.w-4 {
- width: 4em;
-}
-
-.w-5 {
- width: 5em;
-}
-
-.w-6 {
- width: 6em;
-}
-
-.w-7 {
- width: 7em;
-}
-
-.w-8 {
- width: 8em;
-}
-
-.w-9 {
- width: 9em;
-}
-
-.w-10 {
- width: 10em;
-}
-
-.w-11 {
- width: 11em;
-}
-
-.w-12 {
- width: 12em;
-}
-
/**
*
*
@@ -4716,23 +4621,23 @@ body {
font-weight: bolder !important;
}
-.text-size-default {
+.t-size-default {
font-size: 1rem !important;
}
-.text-size-small {
+.t-size-small {
font-size: 0.75rem !important;
}
-.text-size-medium {
+.t-size-medium {
font-size: 1.5rem !important;
}
-.text-size-large {
+.t-size-large {
font-size: 2rem !important;
}
-.text-size-big {
+.t-size-big {
font-size: 3rem !important;
}
@@ -5342,6 +5247,63 @@ img.media {
transform: scale(1);
}
+.loading {
+ height: 60px;
+ width: 47px;
+ margin: 0 auto;
+ display: flex;
+ align-items: center;
+}
+.loading span {
+ display: block;
+ width: 15px;
+ height: 80px;
+ background: #d95959;
+ -webkit-animation-name: plain-ui__loading-animation;
+ animation-name: plain-ui__loading-animation;
+ -webkit-animation-duration: 0.5s;
+ animation-duration: 0.5s;
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+ -webkit-animation-delay: 0.15s;
+ animation-delay: 0.15s;
+ border-top: 1px solid #a62626;
+ border-bottom: 1px solid #a62626;
+}
+.loading span:first-child {
+ margin-right: 1px;
+ -webkit-animation-delay: 0s;
+ animation-delay: 0s;
+}
+.loading span:last-child {
+ margin-left: 1px;
+ -webkit-animation-delay: 0.3s;
+ animation-delay: 0.3s;
+}
+
+@-webkit-keyframes plain-ui__loading-animation {
+ 0% {
+ height: 60px;
+ }
+ 50% {
+ height: 40px;
+ }
+ 100% {
+ height: 60px;
+ }
+}
+
+@keyframes plain-ui__loading-animation {
+ 0% {
+ height: 60px;
+ }
+ 50% {
+ height: 40px;
+ }
+ 100% {
+ height: 60px;
+ }
+}
.masonry {
display: flex;
width: 100%;
diff --git a/src/scss/components/_loading.scss b/src/scss/components/_loading.scss
index 6e54a12..3e2792b 100644
--- a/src/scss/components/_loading.scss
+++ b/src/scss/components/_loading.scss
@@ -4,7 +4,49 @@
*
*/
-@mixin component__loading()
+$plain-ui__loading__background-color: $plain-ui__danger-light !default;
+
+@mixin plain-ui__component__loading()
{
+ .loading {
+ height: 60px;
+ width: 47px;
+ margin: 0 auto;
+
+ display: flex;
+ align-items: center;
+
+ span {
+ display: block;
+ width: 15px;
+ height: 80px;
+
+ background: $plain-ui__loading__background-color;
+
+ animation-name: plain-ui__loading-animation;
+ animation-duration: 0.5s;
+ animation-iteration-count: infinite;
+
+ animation-delay: 0.15s;
+
+ border-top: 1px solid darken($plain-ui__loading__background-color, 20%);
+ border-bottom: 1px solid darken($plain-ui__loading__background-color, 20%);
+
+ &:first-child {
+ margin-right: 1px;
+ animation-delay: 0s;
+ }
+
+ &:last-child {
+ margin-left: 1px;
+ animation-delay: 0.3s;
+ }
+ }
+ }
+ @keyframes plain-ui__loading-animation {
+ 0% { height: 60px; }
+ 50% { height: 40px; }
+ 100% { height: 60px; }
+ }
}
\ No newline at end of file
diff --git a/src/scss/helpers/_core.scss b/src/scss/helpers/_core.scss
index 0b9261c..89dcd3e 100644
--- a/src/scss/helpers/_core.scss
+++ b/src/scss/helpers/_core.scss
@@ -43,24 +43,7 @@
}
}
- /**
- *
- *
- */
-
- @for $i from 1 through $reflex-columns {
- .w-col-#{$i} {
- width: percentage(($i / $reflex-columns));
- }
- }
-
- $plain-ui__width: 12;
- @for $i from 1 through $plain-ui__width {
- .w-#{$i} {
- width: #{$i}em;
- }
- }
/**
*
@@ -134,7 +117,7 @@
}
@each $name, $font-size in $plain-ui__font-sizes {
- .text-size-#{$name} {
+ .t-size-#{$name} {
font-size: $font-size !important;
//@include plain-ui__breakpoints-font-size($plain-ui__font-size-breakpoints, $font-size, getDefault($plain-ui__font-sizes), true);
}
diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss
index c5c999d..11fc561 100644
--- a/src/scss/helpers/_spacing.scss
+++ b/src/scss/helpers/_spacing.scss
@@ -27,7 +27,6 @@ $plain-ui__helpers__spacing-steps: 10 !default;
@for $i from 2 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@include spacing('m', 'margin', $direction, $i, $value);
- //@include plain-ui__breakpoints-calculate('margin-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
}
}
@@ -39,6 +38,5 @@ $plain-ui__helpers__spacing-steps: 10 !default;
@for $i from 0 through $plain-ui__helpers__spacing-steps {
$value: $plain-ui__helpers__spacing-gap * factor($i - 1) * 1rem;
@include spacing('p', 'padding', $direction, $i, $value);
- //@include plain-ui__breakpoints-calculate('padding-'#{$direction}, factor($i), $plain-ui__helpers__spacing-breakpoints, true);
}
}
\ No newline at end of file
diff --git a/src/scss/plain-ui.scss b/src/scss/plain-ui.scss
index 7c6c17c..655113a 100644
--- a/src/scss/plain-ui.scss
+++ b/src/scss/plain-ui.scss
@@ -8,10 +8,6 @@
'variables',
'core',
- 'helpers/core',
- 'helpers/sizing',
- 'helpers/spacing',
-
'components/badge',
'components/button',
'components/field',
@@ -24,9 +20,14 @@
'components/slider',
'components/bar',
'components/modal',
+ 'components/loading',
'layout/masonry',
- 'layout/flex';
+ 'layout/flex',
+
+ 'helpers/core',
+ 'helpers/sizing',
+ 'helpers/spacing';
@include plain-ui__core();
@include plain-ui__helpers__core();
@@ -46,5 +47,6 @@
@include plain-ui__component__bar();
@include plain-ui__component__tabs();
@include plain-ui__component__modal();
+@include plain-ui__component__loading();
@include plain-ui__layout__masonry();
\ No newline at end of file
- *
- *
- *