.gridable--row {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
overflow: hidden;
margin-left: -20px; }
.gridable--col {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding-left: 20px; }
@media only screen and (max-width: 1024px) {
.gridable--col.is-empty {
display: none; } }
.gridable--col.col-1 {
flex-basis: 8.33333%;
width: 8.33333%;
max-width: 8.33333%; }
.gridable--col.col-2 {
flex-basis: 16.66667%;
width: 16.66667%;
max-width: 16.66667%; }
.gridable--col.col-3 {
flex-basis: 25%;
width: 25%;
max-width: 25%; }
.gridable--col.col-4 {
flex-basis: 33.33333%;
width: 33.33333%;
max-width: 33.33333%; }
.gridable--col.col-5 {
flex-basis: 41.66667%;
width: 41.66667%;
max-width: 41.66667%; }
.gridable--col.col-6 {
flex-basis: 50%;
width: 50%;
max-width: 50%; }
.gridable--col.col-7 {
flex-basis: 58.33333%;
width: 58.33333%;
max-width: 58.33333%; }
.gridable--col.col-8 {
flex-basis: 66.66667%;
width: 66.66667%;
max-width: 66.66667%; }
.gridable--col.col-9 {
flex-basis: 75%;
width: 75%;
max-width: 75%; }
.gridable--col.col-10 {
flex-basis: 83.33333%;
width: 83.33333%;
max-width: 83.33333%; }
.gridable--col.col-11 {
flex-basis: 91.66667%;
width: 91.66667%;
max-width: 91.66667%; }
.gridable--col.col-12 {
flex-basis: 100%;
width: 100%;
max-width: 100%; }
@media only screen and (max-width: 1024px) {
.gridable--col[class*="col-"] {
flex-basis: 100%;
width: 100%;
max-width: 100%; } }
.gridable--col {
overflow: hidden;
box-sizing: border-box; } .row-style--boxed {
background-color: #eef1f2; }
.col-style--boxed {
background-color: #23252d; }
.col-style--boxed * {
color: white; }