flint-gs
Version:
Flint is a highly advanced Sass grid framework designed for rapid responsive development.
1,777 lines (1,763 loc) • 92.9 kB
CSS
@charset "UTF-8";
/*! sassyjson - v1.1.8 - 2014-06-01 */
body {
margin: 0;
padding: 0;
}
/* >> Bootcamp >> */
html {
position: relative;
}
html:after {
transform: translateX(-50%);
content: " ";
position: absolute;
display: block;
top: 0;
left: 50%;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
opacity: 0.25;
z-index: 9999;
pointer-events: none;
}
*, *:before, *:after {
box-sizing: border-box;
}
@media (min-width: 60.0625em) {
html:after {
max-width: 80em;
background-image: url("data:image/svg+xml,%3Csvg%20version%3D%271%2E1%27%20xmlns%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F1999%2Fxlink%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27gr%27%20x1%3D%270%25%27%20y1%3D%270%25%27%20x2%3D%27100%25%27%20y2%3D%270%25%27%3E%3Cstop%20offset%3D%270%25%27%20style%3D%27stop%2Dcolor%3A%20%23f33%3B%27%20%2F%3E%3Cstop%20offset%3D%27100%25%27%20style%3D%27stop%2Dcolor%3A%20%23ff6666%3B%27%20%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%270%2E78125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%277%2E03125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2713%2E28125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2719%2E53125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2725%2E78125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2732%2E03125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2738%2E28125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2744%2E53125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2750%2E78125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2757%2E03125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2763%2E28125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2769%2E53125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2775%2E78125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2782%2E03125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2788%2E28125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2794%2E53125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%274%2E6875%25%27%20height%3D%27100%25%27%2F%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-position: 0 0;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
html:after {
max-width: 60em;
background-image: url("data:image/svg+xml,%3Csvg%20version%3D%271%2E1%27%20xmlns%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F1999%2Fxlink%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27gr%27%20x1%3D%270%25%27%20y1%3D%270%25%27%20x2%3D%27100%25%27%20y2%3D%270%25%27%3E%3Cstop%20offset%3D%270%25%27%20style%3D%27stop%2Dcolor%3A%20%23f33%3B%27%20%2F%3E%3Cstop%20offset%3D%27100%25%27%20style%3D%27stop%2Dcolor%3A%20%23ff6666%3B%27%20%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%271%2E04167%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%279%2E375%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2717%2E70833%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2726%2E04167%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2734%2E375%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2742%2E70833%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2751%2E04167%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2759%2E375%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2767%2E70833%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2776%2E04167%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2784%2E375%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2792%2E70833%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%276%2E25%25%27%20height%3D%27100%25%27%2F%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-position: 0 0;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
html:after {
max-width: 40em;
background-image: url("data:image/svg+xml,%3Csvg%20version%3D%271%2E1%27%20xmlns%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F1999%2Fxlink%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27gr%27%20x1%3D%270%25%27%20y1%3D%270%25%27%20x2%3D%27100%25%27%20y2%3D%270%25%27%3E%3Cstop%20offset%3D%270%25%27%20style%3D%27stop%2Dcolor%3A%20%23f33%3B%27%20%2F%3E%3Cstop%20offset%3D%27100%25%27%20style%3D%27stop%2Dcolor%3A%20%23ff6666%3B%27%20%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%271%2E5625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2714%2E0625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2726%2E5625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2739%2E0625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2751%2E5625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2764%2E0625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2776%2E5625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2789%2E0625%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%279%2E375%25%27%20height%3D%27100%25%27%2F%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-position: 0 0;
}
}
@media (min-width: 0) and (max-width: 20em) {
html:after {
max-width: 20em;
background-image: url("data:image/svg+xml,%3Csvg%20version%3D%271%2E1%27%20xmlns%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww%2Ew3%2Eorg%2F1999%2Fxlink%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27gr%27%20x1%3D%270%25%27%20y1%3D%270%25%27%20x2%3D%27100%25%27%20y2%3D%270%25%27%3E%3Cstop%20offset%3D%270%25%27%20style%3D%27stop%2Dcolor%3A%20%23f33%3B%27%20%2F%3E%3Cstop%20offset%3D%27100%25%27%20style%3D%27stop%2Dcolor%3A%20%23ff6666%3B%27%20%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%273%2E125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%2718%2E75%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2728%2E125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%2718%2E75%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2753%2E125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%2718%2E75%25%27%20height%3D%27100%25%27%2F%3E%3Crect%20x%3D%2778%2E125%25%27%20fill%3D%27url%28%23gr%29%27%20width%3D%2718%2E75%25%27%20height%3D%27100%25%27%2F%3E%3C%2Fsvg%3E");
background-size: 100% 100%;
background-position: 0 0;
}
}
*, *:before, *:after {
box-sizing: border-box;
}
@media (min-width: 60.0625em) {
.instance {
float: left;
width: 23.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 1;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
.parent-instance {
float: left;
width: 93.75%;
margin-right: auto;
margin-left: auto;
-flint-instance-count: 4;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-gutter: center;
-flint-output-width: 18.75em;
-flint-output-margin-right: auto;
-flint-output-margin-left: auto;
}
@media (min-width: 60.0625em) {
.parent-instance {
width: 23.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 1;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 4;
-flint-gutter: normal;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.parent-instance {
width: 32.29167%;
margin-right: 1.04167%;
margin-left: 0;
-flint-instance-count: 2;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 4;
-flint-gutter: alpha;
-flint-output-width: 19.375em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.parent-instance {
width: 48.4375%;
margin-right: 0;
margin-left: 1.5625%;
-flint-instance-count: 3;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 4;
-flint-gutter: omega;
-flint-output-width: 19.375em;
-flint-output-margin-right: 0;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 0) and (max-width: 20em) {
.parent-instance {
float: none;
}
}
.parent-instance .child-instance {
float: left;
width: 43.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 8;
-flint-parent-selector: .parent-instance::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 2;
-flint-context: 4;
-flint-gutter: normal;
-flint-output-width: 8.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.parent-instance .child-instance {
width: 50%;
margin-right: 0;
margin-left: 0;
-flint-instance-count: 5;
-flint-parent-selector: .parent-instance::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 2;
-flint-context: 4;
-flint-gutter: row;
-flint-output-width: 9.375em;
-flint-output-margin-right: 0;
-flint-output-margin-left: 0;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.parent-instance .child-instance {
width: 37.09677%;
margin-right: 3.22581%;
margin-left: 3.22581%;
-flint-instance-count: 6;
-flint-parent-selector: .parent-instance::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 2;
-flint-context: 4;
-flint-gutter: inside;
-flint-output-width: 7.1875em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.parent-instance .child-instance {
width: 43.54839%;
margin-right: 3.22581%;
margin-left: 3.22581%;
-flint-instance-count: 7;
-flint-parent-selector: .parent-instance::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 2;
-flint-context: 4;
-flint-gutter: normal;
-flint-output-width: 8.4375em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.parent-instance {
float: left;
width: 31.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 1;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.parent-instance .child-instance {
float: left;
width: 14.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 2;
-flint-parent-selector: .parent-instance::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 2;
-flint-output-width: 8.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.parent-instance {
float: left;
width: 23.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 1;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.parent-instance .child-instance {
float: left;
width: 10.9375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 2;
-flint-parent-selector: .parent-instance::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 2;
-flint-output-width: 8.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
Test Results {
Success: true;
Stats: ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔;
Tests: 76;
Asserts: 177;
Passed: 76;
Failed: 0;
Skipped: 0;
}
/* << Bootcamp << */
.col-1 {
float: left;
width: 18.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 4;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 1;
-flint-output-width: 3.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-1 {
width: 4.6875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 1;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 1;
-flint-output-width: 3.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-1 {
width: 6.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 2;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 1;
-flint-output-width: 3.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-1 {
width: 9.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 3;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 1;
-flint-output-width: 3.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-1:before {
content: "1 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-1:before {
content: "1 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-1:before {
content: "1 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-1:before {
content: "1 of 4";
}
}
.col-1 .col-1-child {
float: left;
width: 66.66667%;
margin-right: 16.66667%;
margin-left: 16.66667%;
-flint-instance-count: 8;
-flint-parent-selector: .col-1::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 1;
-flint-context: 1;
-flint-output-width: 2.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-1 .col-1-child {
width: 66.66667%;
margin-right: 16.66667%;
margin-left: 16.66667%;
-flint-instance-count: 5;
-flint-parent-selector: .col-1::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 1;
-flint-context: 1;
-flint-output-width: 2.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-1 .col-1-child {
width: 66.66667%;
margin-right: 16.66667%;
margin-left: 16.66667%;
-flint-instance-count: 6;
-flint-parent-selector: .col-1::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 1;
-flint-context: 1;
-flint-output-width: 2.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-1 .col-1-child {
width: 66.66667%;
margin-right: 16.66667%;
margin-left: 16.66667%;
-flint-instance-count: 7;
-flint-parent-selector: .col-1::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 1;
-flint-context: 1;
-flint-output-width: 2.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-1 .col-1-child:before {
content: "1 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-1 .col-1-child:before {
content: "1 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-1 .col-1-child:before {
content: "1 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-1 .col-1-child:before {
content: "1 of 4";
}
}
.col-1 div {
height: 100% !important;
}
.col-2 {
float: left;
width: 43.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 12;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 2;
-flint-output-width: 8.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-2 {
width: 10.9375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 9;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 2;
-flint-output-width: 8.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-2 {
width: 14.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 10;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 2;
-flint-output-width: 8.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-2 {
width: 21.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 11;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 2;
-flint-output-width: 8.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-2:before {
content: "2 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-2:before {
content: "2 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-2:before {
content: "2 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-2:before {
content: "2 of 4";
}
}
.col-2 .col-2-child {
float: left;
width: 85.71429%;
margin-right: 7.14286%;
margin-left: 7.14286%;
-flint-instance-count: 16;
-flint-parent-selector: .col-2::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 2;
-flint-context: 2;
-flint-output-width: 7.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-2 .col-2-child {
width: 85.71429%;
margin-right: 7.14286%;
margin-left: 7.14286%;
-flint-instance-count: 13;
-flint-parent-selector: .col-2::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 2;
-flint-context: 2;
-flint-output-width: 7.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-2 .col-2-child {
width: 85.71429%;
margin-right: 7.14286%;
margin-left: 7.14286%;
-flint-instance-count: 14;
-flint-parent-selector: .col-2::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 2;
-flint-context: 2;
-flint-output-width: 7.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-2 .col-2-child {
width: 85.71429%;
margin-right: 7.14286%;
margin-left: 7.14286%;
-flint-instance-count: 15;
-flint-parent-selector: .col-2::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 2;
-flint-context: 2;
-flint-output-width: 7.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-2 .col-2-child:before {
content: "2 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-2 .col-2-child:before {
content: "2 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-2 .col-2-child:before {
content: "2 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-2 .col-2-child:before {
content: "2 of 4";
}
}
.col-2 div {
height: 100% !important;
}
.col-3 {
float: left;
width: 68.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 20;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 3;
-flint-output-width: 13.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-3 {
width: 17.1875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 17;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 3;
-flint-output-width: 13.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-3 {
width: 22.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 18;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 3;
-flint-output-width: 13.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-3 {
width: 34.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 19;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 3;
-flint-output-width: 13.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-3:before {
content: "3 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-3:before {
content: "3 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-3:before {
content: "3 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-3:before {
content: "3 of 4";
}
}
.col-3 .col-3-child {
float: left;
width: 90.90909%;
margin-right: 4.54545%;
margin-left: 4.54545%;
-flint-instance-count: 24;
-flint-parent-selector: .col-3::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 3;
-flint-context: 3;
-flint-output-width: 12.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-3 .col-3-child {
width: 90.90909%;
margin-right: 4.54545%;
margin-left: 4.54545%;
-flint-instance-count: 21;
-flint-parent-selector: .col-3::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 3;
-flint-context: 3;
-flint-output-width: 12.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-3 .col-3-child {
width: 90.90909%;
margin-right: 4.54545%;
margin-left: 4.54545%;
-flint-instance-count: 22;
-flint-parent-selector: .col-3::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 3;
-flint-context: 3;
-flint-output-width: 12.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-3 .col-3-child {
width: 90.90909%;
margin-right: 4.54545%;
margin-left: 4.54545%;
-flint-instance-count: 23;
-flint-parent-selector: .col-3::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 3;
-flint-context: 3;
-flint-output-width: 12.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-3 .col-3-child:before {
content: "3 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-3 .col-3-child:before {
content: "3 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-3 .col-3-child:before {
content: "3 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-3 .col-3-child:before {
content: "3 of 4";
}
}
.col-3 div {
height: 100% !important;
}
.col-4 {
float: left;
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 28;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-4 {
width: 23.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 25;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-4 {
width: 31.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 26;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-4 {
width: 46.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 27;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-4:before {
content: "4 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-4:before {
content: "4 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-4:before {
content: "4 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-4:before {
content: "4 of 4";
}
}
.col-4 .col-4-child {
float: left;
width: 93.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 32;
-flint-parent-selector: .col-4::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-context: 4;
-flint-output-width: 17.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-4 .col-4-child {
width: 93.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 29;
-flint-parent-selector: .col-4::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 4;
-flint-context: 4;
-flint-output-width: 17.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-4 .col-4-child {
width: 93.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 30;
-flint-parent-selector: .col-4::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 4;
-flint-context: 4;
-flint-output-width: 17.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-4 .col-4-child {
width: 93.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 31;
-flint-parent-selector: .col-4::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 4;
-flint-context: 4;
-flint-output-width: 17.5em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-4 .col-4-child:before {
content: "4 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-4 .col-4-child:before {
content: "4 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-4 .col-4-child:before {
content: "4 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-4 .col-4-child:before {
content: "4 of 4";
}
}
.col-4 div {
height: 100% !important;
}
.col-5 {
float: left;
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 36;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-5 {
width: 29.6875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 33;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 5;
-flint-output-width: 23.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-5 {
width: 39.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 34;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 5;
-flint-output-width: 23.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-5 {
width: 59.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 35;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 5;
-flint-output-width: 23.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-5:before {
content: "5 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-5:before {
content: "5 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-5:before {
content: "5 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-5:before {
content: "4 of 4";
}
}
.col-5 .col-5-child {
float: left;
width: 43.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 40;
-flint-parent-selector: .col-5::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 2;
-flint-context: 4;
-flint-output-width: 8.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-5 .col-5-child {
width: 44.73684%;
margin-right: 2.63158%;
margin-left: 2.63158%;
-flint-instance-count: 37;
-flint-parent-selector: .col-5::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 2.5;
-flint-context: 5;
-flint-output-width: 10.625em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-5 .col-5-child {
width: 44.73684%;
margin-right: 2.63158%;
margin-left: 2.63158%;
-flint-instance-count: 38;
-flint-parent-selector: .col-5::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 2.5;
-flint-context: 5;
-flint-output-width: 10.625em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-5 .col-5-child {
width: 44.73684%;
margin-right: 2.63158%;
margin-left: 2.63158%;
-flint-instance-count: 39;
-flint-parent-selector: .col-5::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 2.5;
-flint-context: 5;
-flint-output-width: 10.625em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-5 .col-5-child:before {
content: "2.5 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-5 .col-5-child:before {
content: "2.5 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-5 .col-5-child:before {
content: "2.5 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-5 .col-5-child:before {
content: "2.5 of 4";
}
}
.col-5 div {
height: 100% !important;
}
.col-6 {
float: left;
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 44;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-6 {
width: 35.9375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 41;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 6;
-flint-output-width: 28.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-6 {
width: 47.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 42;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 6;
-flint-output-width: 28.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-6 {
width: 71.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 43;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 6;
-flint-output-width: 28.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-6:before {
content: "6 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-6:before {
content: "6 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-6:before {
content: "6 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-6:before {
content: "4 of 4";
}
}
.col-6 .col-6-child {
float: left;
width: 43.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 48;
-flint-parent-selector: .col-6::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 2;
-flint-context: 4;
-flint-output-width: 8.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-6 .col-6-child {
width: 45.65217%;
margin-right: 2.17391%;
margin-left: 2.17391%;
-flint-instance-count: 45;
-flint-parent-selector: .col-6::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 3;
-flint-context: 6;
-flint-output-width: 13.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-6 .col-6-child {
width: 45.65217%;
margin-right: 2.17391%;
margin-left: 2.17391%;
-flint-instance-count: 46;
-flint-parent-selector: .col-6::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 3;
-flint-context: 6;
-flint-output-width: 13.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-6 .col-6-child {
width: 45.65217%;
margin-right: 2.17391%;
margin-left: 2.17391%;
-flint-instance-count: 47;
-flint-parent-selector: .col-6::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 3;
-flint-context: 6;
-flint-output-width: 13.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-6 .col-6-child:before {
content: "3 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-6 .col-6-child:before {
content: "3 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-6 .col-6-child:before {
content: "3 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-6 .col-6-child:before {
content: "3 of 4";
}
}
.col-6 div {
height: 100% !important;
}
.col-7 {
float: left;
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 52;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-7 {
width: 42.1875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 49;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 7;
-flint-output-width: 33.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-7 {
width: 56.25%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 50;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 7;
-flint-output-width: 33.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-7 {
width: 84.375%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 51;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 7;
-flint-output-width: 33.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-7:before {
content: "7 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-7:before {
content: "7 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-7:before {
content: "7 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-7:before {
content: "4 of 4";
}
}
.col-7 .col-7-child {
float: left;
width: 43.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 56;
-flint-parent-selector: .col-7::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 2;
-flint-context: 4;
-flint-output-width: 8.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-7 .col-7-child {
width: 46.2963%;
margin-right: 1.85185%;
margin-left: 1.85185%;
-flint-instance-count: 53;
-flint-parent-selector: .col-7::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 3.5;
-flint-context: 7;
-flint-output-width: 15.625em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-7 .col-7-child {
width: 46.2963%;
margin-right: 1.85185%;
margin-left: 1.85185%;
-flint-instance-count: 54;
-flint-parent-selector: .col-7::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 3.5;
-flint-context: 7;
-flint-output-width: 15.625em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-7 .col-7-child {
width: 46.2963%;
margin-right: 1.85185%;
margin-left: 1.85185%;
-flint-instance-count: 55;
-flint-parent-selector: .col-7::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 3.5;
-flint-context: 7;
-flint-output-width: 15.625em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-7 .col-7-child:before {
content: "3.5 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-7 .col-7-child:before {
content: "3.5 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-7 .col-7-child:before {
content: "3.5 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-7 .col-7-child:before {
content: "3.5 of 4";
}
}
.col-7 div {
height: 100% !important;
}
.col-8 {
float: left;
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 60;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-8 {
width: 48.4375%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 57;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 8;
-flint-output-width: 38.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-8 {
width: 64.58333%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 58;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 8;
-flint-output-width: 38.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-8 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 59;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 8;
-flint-output-width: 38.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-8:before {
content: "8 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-8:before {
content: "8 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-8:before {
content: "8 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-8:before {
content: "4 of 4";
}
}
.col-8 .col-8-child {
float: left;
width: 43.33333%;
margin-right: 3.33333%;
margin-left: 3.33333%;
-flint-instance-count: 64;
-flint-parent-selector: .col-8::mobile;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 2;
-flint-context: 4;
-flint-output-width: 8.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
@media (min-width: 60.0625em) {
.col-8 .col-8-child {
width: 46.77419%;
margin-right: 1.6129%;
margin-left: 1.6129%;
-flint-instance-count: 61;
-flint-parent-selector: .col-8::desktop;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 4;
-flint-context: 8;
-flint-output-width: 18.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-8 .col-8-child {
width: 46.77419%;
margin-right: 1.6129%;
margin-left: 1.6129%;
-flint-instance-count: 62;
-flint-parent-selector: .col-8::laptop;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 4;
-flint-context: 8;
-flint-output-width: 18.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-8 .col-8-child {
width: 46.77419%;
margin-right: 1.6129%;
margin-left: 1.6129%;
-flint-instance-count: 63;
-flint-parent-selector: .col-8::tablet;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 4;
-flint-context: 8;
-flint-output-width: 18.125em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-8 .col-8-child:before {
content: "4 of 16";
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-8 .col-8-child:before {
content: "4 of 12";
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-8 .col-8-child:before {
content: "4 of 8";
}
}
@media (min-width: 0) and (max-width: 20em) {
.col-8 .col-8-child:before {
content: "4 of 4";
}
}
.col-8 div {
height: 100% !important;
}
.col-9 {
float: left;
width: 93.75%;
margin-right: 3.125%;
margin-left: 3.125%;
-flint-instance-count: 68;
-flint-parent-selector: none;
-flint-key: mobile;
-flint-breakpoint: 20em;
-flint-columns: 4;
-flint-span: 4;
-flint-output-width: 18.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
clear: both;
}
@media (min-width: 60.0625em) {
.col-9 {
width: 54.6875%;
margin-right: 0.78125%;
margin-left: 0.78125%;
-flint-instance-count: 65;
-flint-parent-selector: none;
-flint-key: desktop;
-flint-breakpoint: 80em;
-flint-columns: 16;
-flint-span: 9;
-flint-output-width: 43.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 40.0625em) and (max-width: 60em) {
.col-9 {
width: 72.91667%;
margin-right: 1.04167%;
margin-left: 1.04167%;
-flint-instance-count: 66;
-flint-parent-selector: none;
-flint-key: laptop;
-flint-breakpoint: 60em;
-flint-columns: 12;
-flint-span: 9;
-flint-output-width: 43.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 20.0625em) and (max-width: 40em) {
.col-9 {
width: 96.875%;
margin-right: 1.5625%;
margin-left: 1.5625%;
-flint-instance-count: 67;
-flint-parent-selector: none;
-flint-key: tablet;
-flint-breakpoint: 40em;
-flint-columns: 8;
-flint-span: 8;
-flint-output-width: 38.75em;
-flint-output-margin-right: 0.625em;
-flint-output-margin-left: 0.625em;
}
}
@media (min-width: 60.0625em) {
.col-9:before {
content: "9 of 16";
}
}
@me