picasso 0.5.2 → 0.6.0

data/README.md

@@ -21,10 +21,10 @@ En el `config.rb` agregar:
 
 ```ruby
 require 'picasso'
-gem 'picasso', '~> 0.5.2'
+gem 'picasso', '~> 0.6.0'
 ```
 
-Para versiones anteriores a 0.5.2, también se debe agregar como dependencia en el `config.rb`:
+Para versiones anteriores a 0.6.0, también se debe agregar como dependencia en el `config.rb`:
 
 ```ruby
 require 'magick'
@@ -72,6 +72,9 @@ $ (sudo) apt-get install ruby-oily-png
 
 # Changelog
 
+## 0.6.0
+* Mejoras en las grillas: Se agregan clases para el manejo de columnas antes diferentes resoluciones (`-small`, `-medium`, `-large`), posibilidad de posicionar columnas de manera relativa, centrado de columnas y ocultación. 
+
 ## 0.5.2
 * Refactor del componente `input()` utilizando un nuevo diseño.
 

data/docs/_picasso.html

@@ -1911,17 +1911,26 @@ body {
 .row-col [class^="col"]:first-child {
   margin-left: 0;
 }
+.row-col [class*="pull"], .row-col [class*="push"] {
+  position: relative;
+}
 .row-col .col1 {
   width: 6.34058%;
 }
 .ie7 .row-col .col1 {
   width: 6.24858%;
 }
-.row-col [class^="col"].offset1 {
-  margin-left: 10.50725%;
+.row-col .offset1,
+.row-col .offset1:first-child {
+  margin-left: 6.34058%;
+}
+.row-col .push1,
+.row-col .push1:first-child {
+  left: 8.51449%;
 }
-.row-col [class^="col"].offset1:first-child {
-  margin-left: 8.42391%;
+.row-col .pull1,
+.row-col .pull1:first-child {
+  left: -8.51449%;
 }
 .row-col .col2 {
   width: 14.85507%;
@@ -1929,11 +1938,17 @@ body {
 .ie7 .row-col .col2 {
   width: 14.76307%;
 }
-.row-col [class^="col"].offset2 {
-  margin-left: 19.02174%;
+.row-col .offset2,
+.row-col .offset2:first-child {
+  margin-left: 14.85507%;
 }
-.row-col [class^="col"].offset2:first-child {
-  margin-left: 16.93841%;
+.row-col .push2,
+.row-col .push2:first-child {
+  left: 17.02899%;
+}
+.row-col .pull2,
+.row-col .pull2:first-child {
+  left: -17.02899%;
 }
 .row-col .col3 {
   width: 23.36957%;
@@ -1941,11 +1956,17 @@ body {
 .ie7 .row-col .col3 {
   width: 23.27757%;
 }
-.row-col [class^="col"].offset3 {
-  margin-left: 27.53623%;
+.row-col .offset3,
+.row-col .offset3:first-child {
+  margin-left: 23.36957%;
+}
+.row-col .push3,
+.row-col .push3:first-child {
+  left: 25.54348%;
 }
-.row-col [class^="col"].offset3:first-child {
-  margin-left: 25.4529%;
+.row-col .pull3,
+.row-col .pull3:first-child {
+  left: -25.54348%;
 }
 .row-col .col4 {
   width: 31.88406%;
@@ -1953,11 +1974,17 @@ body {
 .ie7 .row-col .col4 {
   width: 31.79206%;
 }
-.row-col [class^="col"].offset4 {
-  margin-left: 36.05072%;
+.row-col .offset4,
+.row-col .offset4:first-child {
+  margin-left: 31.88406%;
 }
-.row-col [class^="col"].offset4:first-child {
-  margin-left: 33.96739%;
+.row-col .push4,
+.row-col .push4:first-child {
+  left: 34.05797%;
+}
+.row-col .pull4,
+.row-col .pull4:first-child {
+  left: -34.05797%;
 }
 .row-col .col5 {
   width: 40.39855%;
@@ -1965,11 +1992,17 @@ body {
 .ie7 .row-col .col5 {
   width: 40.30655%;
 }
-.row-col [class^="col"].offset5 {
-  margin-left: 44.56522%;
+.row-col .offset5,
+.row-col .offset5:first-child {
+  margin-left: 40.39855%;
+}
+.row-col .push5,
+.row-col .push5:first-child {
+  left: 42.57246%;
 }
-.row-col [class^="col"].offset5:first-child {
-  margin-left: 42.48188%;
+.row-col .pull5,
+.row-col .pull5:first-child {
+  left: -42.57246%;
 }
 .row-col .col6 {
   width: 48.91304%;
@@ -1977,11 +2010,17 @@ body {
 .ie7 .row-col .col6 {
   width: 48.82104%;
 }
-.row-col [class^="col"].offset6 {
-  margin-left: 53.07971%;
+.row-col .offset6,
+.row-col .offset6:first-child {
+  margin-left: 48.91304%;
 }
-.row-col [class^="col"].offset6:first-child {
-  margin-left: 50.99638%;
+.row-col .push6,
+.row-col .push6:first-child {
+  left: 51.08696%;
+}
+.row-col .pull6,
+.row-col .pull6:first-child {
+  left: -51.08696%;
 }
 .row-col .col7 {
   width: 57.42754%;
@@ -1989,11 +2028,17 @@ body {
 .ie7 .row-col .col7 {
   width: 57.33554%;
 }
-.row-col [class^="col"].offset7 {
-  margin-left: 61.5942%;
+.row-col .offset7,
+.row-col .offset7:first-child {
+  margin-left: 57.42754%;
+}
+.row-col .push7,
+.row-col .push7:first-child {
+  left: 59.60145%;
 }
-.row-col [class^="col"].offset7:first-child {
-  margin-left: 59.51087%;
+.row-col .pull7,
+.row-col .pull7:first-child {
+  left: -59.60145%;
 }
 .row-col .col8 {
   width: 65.94203%;
@@ -2001,11 +2046,17 @@ body {
 .ie7 .row-col .col8 {
   width: 65.85003%;
 }
-.row-col [class^="col"].offset8 {
-  margin-left: 70.1087%;
+.row-col .offset8,
+.row-col .offset8:first-child {
+  margin-left: 65.94203%;
 }
-.row-col [class^="col"].offset8:first-child {
-  margin-left: 68.02536%;
+.row-col .push8,
+.row-col .push8:first-child {
+  left: 68.11594%;
+}
+.row-col .pull8,
+.row-col .pull8:first-child {
+  left: -68.11594%;
 }
 .row-col .col9 {
   width: 74.45652%;
@@ -2013,11 +2064,17 @@ body {
 .ie7 .row-col .col9 {
   width: 74.36452%;
 }
-.row-col [class^="col"].offset9 {
-  margin-left: 78.62319%;
+.row-col .offset9,
+.row-col .offset9:first-child {
+  margin-left: 74.45652%;
+}
+.row-col .push9,
+.row-col .push9:first-child {
+  left: 76.63043%;
 }
-.row-col [class^="col"].offset9:first-child {
-  margin-left: 76.53986%;
+.row-col .pull9,
+.row-col .pull9:first-child {
+  left: -76.63043%;
 }
 .row-col .col10 {
   width: 82.97101%;
@@ -2025,11 +2082,17 @@ body {
 .ie7 .row-col .col10 {
   width: 82.87901%;
 }
-.row-col [class^="col"].offset10 {
-  margin-left: 87.13768%;
+.row-col .offset10,
+.row-col .offset10:first-child {
+  margin-left: 82.97101%;
 }
-.row-col [class^="col"].offset10:first-child {
-  margin-left: 85.05435%;
+.row-col .push10,
+.row-col .push10:first-child {
+  left: 85.14493%;
+}
+.row-col .pull10,
+.row-col .pull10:first-child {
+  left: -85.14493%;
 }
 .row-col .col11 {
   width: 91.48551%;
@@ -2037,20 +2100,671 @@ body {
 .ie7 .row-col .col11 {
   width: 91.39351%;
 }
-.row-col [class^="col"].offset11 {
-  margin-left: 95.65217%;
+.row-col .offset11,
+.row-col .offset11:first-child {
+  margin-left: 91.48551%;
+}
+.row-col .push11,
+.row-col .push11:first-child {
+  left: 93.65942%;
 }
-.row-col [class^="col"].offset11:first-child {
-  margin-left: 93.56884%;
+.row-col .pull11,
+.row-col .pull11:first-child {
+  left: -93.65942%;
 }
 .row-col .col12 {
   width: 100%;
 }
-.row-col [class^="col"].offset12 {
-  margin-left: 104.16667%;
+.row-col .offset12,
+.row-col .offset12:first-child {
+  margin-left: 100%;
+}
+.row-col .push12,
+.row-col .push12:first-child {
+  left: 102.17391%;
+}
+.row-col .pull12,
+.row-col .pull12:first-child {
+  left: -102.17391%;
+}
+.row-col .first {
+  margin-left: 0;
 }
-.row-col [class^="col"].offset12:first-child {
-  margin-left: 102.08333%;
+.row-col .col0 {
+  display: none;
+}
+.row-col .centered,
+.row-col .centered:first-child {
+  margin-left: auto;
+  margin-right: auto;
+  float: none;
+}
+@media (max-width: 480px) {
+  .row-col [class^="col-small"] {
+    width: 100%;
+    display: block;
+    float: left;
+    margin-left: 2.17391%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .row-col [class^="col-small"]:first-child {
+    margin-left: 0;
+  }
+  .row-col [class*="pull"], .row-col [class*="push"] {
+    position: relative;
+  }
+  .row-col .col1-small {
+    width: 6.34058%;
+  }
+  .row-col .offset1-small,
+  .row-col .offset1-small:first-child {
+    margin-left: 6.34058%;
+  }
+  .row-col .push1-small,
+  .row-col .push1-small:first-child {
+    left: 8.51449%;
+  }
+  .row-col .pull1-small,
+  .row-col .pull1-small:first-child {
+    left: -8.51449%;
+  }
+  .row-col .col2-small {
+    width: 14.85507%;
+  }
+  .row-col .offset2-small,
+  .row-col .offset2-small:first-child {
+    margin-left: 14.85507%;
+  }
+  .row-col .push2-small,
+  .row-col .push2-small:first-child {
+    left: 17.02899%;
+  }
+  .row-col .pull2-small,
+  .row-col .pull2-small:first-child {
+    left: -17.02899%;
+  }
+  .row-col .col3-small {
+    width: 23.36957%;
+  }
+  .row-col .offset3-small,
+  .row-col .offset3-small:first-child {
+    margin-left: 23.36957%;
+  }
+  .row-col .push3-small,
+  .row-col .push3-small:first-child {
+    left: 25.54348%;
+  }
+  .row-col .pull3-small,
+  .row-col .pull3-small:first-child {
+    left: -25.54348%;
+  }
+  .row-col .col4-small {
+    width: 31.88406%;
+  }
+  .row-col .offset4-small,
+  .row-col .offset4-small:first-child {
+    margin-left: 31.88406%;
+  }
+  .row-col .push4-small,
+  .row-col .push4-small:first-child {
+    left: 34.05797%;
+  }
+  .row-col .pull4-small,
+  .row-col .pull4-small:first-child {
+    left: -34.05797%;
+  }
+  .row-col .col5-small {
+    width: 40.39855%;
+  }
+  .row-col .offset5-small,
+  .row-col .offset5-small:first-child {
+    margin-left: 40.39855%;
+  }
+  .row-col .push5-small,
+  .row-col .push5-small:first-child {
+    left: 42.57246%;
+  }
+  .row-col .pull5-small,
+  .row-col .pull5-small:first-child {
+    left: -42.57246%;
+  }
+  .row-col .col6-small {
+    width: 48.91304%;
+  }
+  .row-col .offset6-small,
+  .row-col .offset6-small:first-child {
+    margin-left: 48.91304%;
+  }
+  .row-col .push6-small,
+  .row-col .push6-small:first-child {
+    left: 51.08696%;
+  }
+  .row-col .pull6-small,
+  .row-col .pull6-small:first-child {
+    left: -51.08696%;
+  }
+  .row-col .col7-small {
+    width: 57.42754%;
+  }
+  .row-col .offset7-small,
+  .row-col .offset7-small:first-child {
+    margin-left: 57.42754%;
+  }
+  .row-col .push7-small,
+  .row-col .push7-small:first-child {
+    left: 59.60145%;
+  }
+  .row-col .pull7-small,
+  .row-col .pull7-small:first-child {
+    left: -59.60145%;
+  }
+  .row-col .col8-small {
+    width: 65.94203%;
+  }
+  .row-col .offset8-small,
+  .row-col .offset8-small:first-child {
+    margin-left: 65.94203%;
+  }
+  .row-col .push8-small,
+  .row-col .push8-small:first-child {
+    left: 68.11594%;
+  }
+  .row-col .pull8-small,
+  .row-col .pull8-small:first-child {
+    left: -68.11594%;
+  }
+  .row-col .col9-small {
+    width: 74.45652%;
+  }
+  .row-col .offset9-small,
+  .row-col .offset9-small:first-child {
+    margin-left: 74.45652%;
+  }
+  .row-col .push9-small,
+  .row-col .push9-small:first-child {
+    left: 76.63043%;
+  }
+  .row-col .pull9-small,
+  .row-col .pull9-small:first-child {
+    left: -76.63043%;
+  }
+  .row-col .col10-small {
+    width: 82.97101%;
+  }
+  .row-col .offset10-small,
+  .row-col .offset10-small:first-child {
+    margin-left: 82.97101%;
+  }
+  .row-col .push10-small,
+  .row-col .push10-small:first-child {
+    left: 85.14493%;
+  }
+  .row-col .pull10-small,
+  .row-col .pull10-small:first-child {
+    left: -85.14493%;
+  }
+  .row-col .col11-small {
+    width: 91.48551%;
+  }
+  .row-col .offset11-small,
+  .row-col .offset11-small:first-child {
+    margin-left: 91.48551%;
+  }
+  .row-col .push11-small,
+  .row-col .push11-small:first-child {
+    left: 93.65942%;
+  }
+  .row-col .pull11-small,
+  .row-col .pull11-small:first-child {
+    left: -93.65942%;
+  }
+  .row-col .col12-small {
+    width: 100%;
+  }
+  .row-col .offset12-small,
+  .row-col .offset12-small:first-child {
+    margin-left: 100%;
+  }
+  .row-col .push12-small,
+  .row-col .push12-small:first-child {
+    left: 102.17391%;
+  }
+  .row-col .pull12-small,
+  .row-col .pull12-small:first-child {
+    left: -102.17391%;
+  }
+  .row-col .first-small {
+    margin-left: 0;
+  }
+  .row-col .col0-small {
+    display: none;
+  }
+  .row-col .centered-small,
+  .row-col .centered-small:first-child {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+}
+@media (min-width: 481px) and (max-width: 800px) {
+  .row-col [class^="col-medium"] {
+    width: 100%;
+    display: block;
+    float: left;
+    margin-left: 2.17391%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .row-col [class^="col-medium"]:first-child {
+    margin-left: 0;
+  }
+  .row-col [class*="pull"], .row-col [class*="push"] {
+    position: relative;
+  }
+  .row-col .col1-medium {
+    width: 6.34058%;
+  }
+  .row-col .offset1-medium,
+  .row-col .offset1-medium:first-child {
+    margin-left: 6.34058%;
+  }
+  .row-col .push1-medium,
+  .row-col .push1-medium:first-child {
+    left: 8.51449%;
+  }
+  .row-col .pull1-medium,
+  .row-col .pull1-medium:first-child {
+    left: -8.51449%;
+  }
+  .row-col .col2-medium {
+    width: 14.85507%;
+  }
+  .row-col .offset2-medium,
+  .row-col .offset2-medium:first-child {
+    margin-left: 14.85507%;
+  }
+  .row-col .push2-medium,
+  .row-col .push2-medium:first-child {
+    left: 17.02899%;
+  }
+  .row-col .pull2-medium,
+  .row-col .pull2-medium:first-child {
+    left: -17.02899%;
+  }
+  .row-col .col3-medium {
+    width: 23.36957%;
+  }
+  .row-col .offset3-medium,
+  .row-col .offset3-medium:first-child {
+    margin-left: 23.36957%;
+  }
+  .row-col .push3-medium,
+  .row-col .push3-medium:first-child {
+    left: 25.54348%;
+  }
+  .row-col .pull3-medium,
+  .row-col .pull3-medium:first-child {
+    left: -25.54348%;
+  }
+  .row-col .col4-medium {
+    width: 31.88406%;
+  }
+  .row-col .offset4-medium,
+  .row-col .offset4-medium:first-child {
+    margin-left: 31.88406%;
+  }
+  .row-col .push4-medium,
+  .row-col .push4-medium:first-child {
+    left: 34.05797%;
+  }
+  .row-col .pull4-medium,
+  .row-col .pull4-medium:first-child {
+    left: -34.05797%;
+  }
+  .row-col .col5-medium {
+    width: 40.39855%;
+  }
+  .row-col .offset5-medium,
+  .row-col .offset5-medium:first-child {
+    margin-left: 40.39855%;
+  }
+  .row-col .push5-medium,
+  .row-col .push5-medium:first-child {
+    left: 42.57246%;
+  }
+  .row-col .pull5-medium,
+  .row-col .pull5-medium:first-child {
+    left: -42.57246%;
+  }
+  .row-col .col6-medium {
+    width: 48.91304%;
+  }
+  .row-col .offset6-medium,
+  .row-col .offset6-medium:first-child {
+    margin-left: 48.91304%;
+  }
+  .row-col .push6-medium,
+  .row-col .push6-medium:first-child {
+    left: 51.08696%;
+  }
+  .row-col .pull6-medium,
+  .row-col .pull6-medium:first-child {
+    left: -51.08696%;
+  }
+  .row-col .col7-medium {
+    width: 57.42754%;
+  }
+  .row-col .offset7-medium,
+  .row-col .offset7-medium:first-child {
+    margin-left: 57.42754%;
+  }
+  .row-col .push7-medium,
+  .row-col .push7-medium:first-child {
+    left: 59.60145%;
+  }
+  .row-col .pull7-medium,
+  .row-col .pull7-medium:first-child {
+    left: -59.60145%;
+  }
+  .row-col .col8-medium {
+    width: 65.94203%;
+  }
+  .row-col .offset8-medium,
+  .row-col .offset8-medium:first-child {
+    margin-left: 65.94203%;
+  }
+  .row-col .push8-medium,
+  .row-col .push8-medium:first-child {
+    left: 68.11594%;
+  }
+  .row-col .pull8-medium,
+  .row-col .pull8-medium:first-child {
+    left: -68.11594%;
+  }
+  .row-col .col9-medium {
+    width: 74.45652%;
+  }
+  .row-col .offset9-medium,
+  .row-col .offset9-medium:first-child {
+    margin-left: 74.45652%;
+  }
+  .row-col .push9-medium,
+  .row-col .push9-medium:first-child {
+    left: 76.63043%;
+  }
+  .row-col .pull9-medium,
+  .row-col .pull9-medium:first-child {
+    left: -76.63043%;
+  }
+  .row-col .col10-medium {
+    width: 82.97101%;
+  }
+  .row-col .offset10-medium,
+  .row-col .offset10-medium:first-child {
+    margin-left: 82.97101%;
+  }
+  .row-col .push10-medium,
+  .row-col .push10-medium:first-child {
+    left: 85.14493%;
+  }
+  .row-col .pull10-medium,
+  .row-col .pull10-medium:first-child {
+    left: -85.14493%;
+  }
+  .row-col .col11-medium {
+    width: 91.48551%;
+  }
+  .row-col .offset11-medium,
+  .row-col .offset11-medium:first-child {
+    margin-left: 91.48551%;
+  }
+  .row-col .push11-medium,
+  .row-col .push11-medium:first-child {
+    left: 93.65942%;
+  }
+  .row-col .pull11-medium,
+  .row-col .pull11-medium:first-child {
+    left: -93.65942%;
+  }
+  .row-col .col12-medium {
+    width: 100%;
+  }
+  .row-col .offset12-medium,
+  .row-col .offset12-medium:first-child {
+    margin-left: 100%;
+  }
+  .row-col .push12-medium,
+  .row-col .push12-medium:first-child {
+    left: 102.17391%;
+  }
+  .row-col .pull12-medium,
+  .row-col .pull12-medium:first-child {
+    left: -102.17391%;
+  }
+  .row-col .first-medium {
+    margin-left: 0;
+  }
+  .row-col .col0-medium {
+    display: none;
+  }
+  .row-col .centered-medium,
+  .row-col .centered-medium:first-child {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
+}
+@media (min-width: 801px) and (max-width: 1024px) {
+  .row-col [class^="col-large"] {
+    width: 100%;
+    display: block;
+    float: left;
+    margin-left: 2.17391%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .row-col [class^="col-large"]:first-child {
+    margin-left: 0;
+  }
+  .row-col [class*="pull"], .row-col [class*="push"] {
+    position: relative;
+  }
+  .row-col .col1-large {
+    width: 6.34058%;
+  }
+  .row-col .offset1-large,
+  .row-col .offset1-large:first-child {
+    margin-left: 6.34058%;
+  }
+  .row-col .push1-large,
+  .row-col .push1-large:first-child {
+    left: 8.51449%;
+  }
+  .row-col .pull1-large,
+  .row-col .pull1-large:first-child {
+    left: -8.51449%;
+  }
+  .row-col .col2-large {
+    width: 14.85507%;
+  }
+  .row-col .offset2-large,
+  .row-col .offset2-large:first-child {
+    margin-left: 14.85507%;
+  }
+  .row-col .push2-large,
+  .row-col .push2-large:first-child {
+    left: 17.02899%;
+  }
+  .row-col .pull2-large,
+  .row-col .pull2-large:first-child {
+    left: -17.02899%;
+  }
+  .row-col .col3-large {
+    width: 23.36957%;
+  }
+  .row-col .offset3-large,
+  .row-col .offset3-large:first-child {
+    margin-left: 23.36957%;
+  }
+  .row-col .push3-large,
+  .row-col .push3-large:first-child {
+    left: 25.54348%;
+  }
+  .row-col .pull3-large,
+  .row-col .pull3-large:first-child {
+    left: -25.54348%;
+  }
+  .row-col .col4-large {
+    width: 31.88406%;
+  }
+  .row-col .offset4-large,
+  .row-col .offset4-large:first-child {
+    margin-left: 31.88406%;
+  }
+  .row-col .push4-large,
+  .row-col .push4-large:first-child {
+    left: 34.05797%;
+  }
+  .row-col .pull4-large,
+  .row-col .pull4-large:first-child {
+    left: -34.05797%;
+  }
+  .row-col .col5-large {
+    width: 40.39855%;
+  }
+  .row-col .offset5-large,
+  .row-col .offset5-large:first-child {
+    margin-left: 40.39855%;
+  }
+  .row-col .push5-large,
+  .row-col .push5-large:first-child {
+    left: 42.57246%;
+  }
+  .row-col .pull5-large,
+  .row-col .pull5-large:first-child {
+    left: -42.57246%;
+  }
+  .row-col .col6-large {
+    width: 48.91304%;
+  }
+  .row-col .offset6-large,
+  .row-col .offset6-large:first-child {
+    margin-left: 48.91304%;
+  }
+  .row-col .push6-large,
+  .row-col .push6-large:first-child {
+    left: 51.08696%;
+  }
+  .row-col .pull6-large,
+  .row-col .pull6-large:first-child {
+    left: -51.08696%;
+  }
+  .row-col .col7-large {
+    width: 57.42754%;
+  }
+  .row-col .offset7-large,
+  .row-col .offset7-large:first-child {
+    margin-left: 57.42754%;
+  }
+  .row-col .push7-large,
+  .row-col .push7-large:first-child {
+    left: 59.60145%;
+  }
+  .row-col .pull7-large,
+  .row-col .pull7-large:first-child {
+    left: -59.60145%;
+  }
+  .row-col .col8-large {
+    width: 65.94203%;
+  }
+  .row-col .offset8-large,
+  .row-col .offset8-large:first-child {
+    margin-left: 65.94203%;
+  }
+  .row-col .push8-large,
+  .row-col .push8-large:first-child {
+    left: 68.11594%;
+  }
+  .row-col .pull8-large,
+  .row-col .pull8-large:first-child {
+    left: -68.11594%;
+  }
+  .row-col .col9-large {
+    width: 74.45652%;
+  }
+  .row-col .offset9-large,
+  .row-col .offset9-large:first-child {
+    margin-left: 74.45652%;
+  }
+  .row-col .push9-large,
+  .row-col .push9-large:first-child {
+    left: 76.63043%;
+  }
+  .row-col .pull9-large,
+  .row-col .pull9-large:first-child {
+    left: -76.63043%;
+  }
+  .row-col .col10-large {
+    width: 82.97101%;
+  }
+  .row-col .offset10-large,
+  .row-col .offset10-large:first-child {
+    margin-left: 82.97101%;
+  }
+  .row-col .push10-large,
+  .row-col .push10-large:first-child {
+    left: 85.14493%;
+  }
+  .row-col .pull10-large,
+  .row-col .pull10-large:first-child {
+    left: -85.14493%;
+  }
+  .row-col .col11-large {
+    width: 91.48551%;
+  }
+  .row-col .offset11-large,
+  .row-col .offset11-large:first-child {
+    margin-left: 91.48551%;
+  }
+  .row-col .push11-large,
+  .row-col .push11-large:first-child {
+    left: 93.65942%;
+  }
+  .row-col .pull11-large,
+  .row-col .pull11-large:first-child {
+    left: -93.65942%;
+  }
+  .row-col .col12-large {
+    width: 100%;
+  }
+  .row-col .offset12-large,
+  .row-col .offset12-large:first-child {
+    margin-left: 100%;
+  }
+  .row-col .push12-large,
+  .row-col .push12-large:first-child {
+    left: 102.17391%;
+  }
+  .row-col .pull12-large,
+  .row-col .pull12-large:first-child {
+    left: -102.17391%;
+  }
+  .row-col .first-large {
+    margin-left: 0;
+  }
+  .row-col .col0-large {
+    display: none;
+  }
+  .row-col .centered-large,
+  .row-col .centered-large:first-child {
+    margin-left: auto;
+    margin-right: auto;
+    float: none;
+  }
 }
 
 .row-col {