*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}body,#header .background,#header .background_image{overflow-x:hidden}img{height:auto;max-width:100%;display:block;border:0}body,form,fieldset,h1,h2,h3,h4,h5,h6,figure,p.active,p.confirm,.ce_gallery ul{margin:0;padding:0}a img{border-bottom:0}header,footer,nav,section,aside,article,figure,figcaption,.custom,.tableless label,.checkbox_container span,.radio_container span{display:block}select,input,textarea{font-size:99%}.ce_gallery ul{list-style-type:none}.ce_gallery li.col_first{clear:left}.block,.ce_gallery ul,.invisible{overflow:hidden}.invisible{width:0;height:0;left:-1000px;position:absolute;top:-1000px}#container:after,.custom:after{height:0;clear:both;display:block;content:".";visibility:hidden}input.text,input.email,textarea{outline:none}textarea{min-height:150px}fieldset{border:0px hidden;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0;-webkit-padding-end:0;-webkit-padding-before:0;-webkit-padding-after:0}fieldset table,input.text,input.email,textarea{width:100%}input.captcha{width:50px}.ce_form td,.formbody td{padding-bottom:5px}.ce_form td.col_0{padding-right:10px;text-align:right}input.checkbox,.tableless .checkbox_container label,.checkbox_container span.mandatory,input.radio,.tableless .radio_container label,.radio_container span.mandatory,.tableless span label,address,.pdf_link img,.ce_download img,.ce_downloads img,.enclosure img,.invisible{display:inline}body.ios input.text,body.ios input.email,body.ios textarea,body.ios input.submit,body.ios input.captcha,input.text,input.submit,.textarea,textarea,input.captcha,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;-moz-border-radious:0}.error,span.mandatory,.confirm{color:#D73219}p.error{margin:0;padding-top:10px}.ce_download img,.ce_downloads img,.enclosure img{vertical-align:top}.ce_downloads p,.enclosure p,p.error{padding-bottom:0}.enclosure{padding-top:20px}table{border-spacing:0}address{font-style:normal}.clear,#clear{height:0.1px;font-size:0.1px;line-height:0.1px}.float_left,.ce_gallery li{float:left}.float_right{float:right}.float_clear,.center,.clear,#clear{clear:both}.center{margin:auto;text-align:center}video{width:100%}.aspect{margin:0;width:100%;display:block}.aspect--16\:9{aspect-ratio:1.7777777778;position:relative}.aspect--16\:9>iframe{width:100%;height:100%;border:0;display:block}iframe{border:0} html{overflow-x:hidden}#header_top,#header_middle,#header_bottom,#hero .ce_text{width:100%}#header .inside,#footer .inside,.container_inside,#hero .content-element-group{max-width:1600px;margin-right:auto;margin-left:auto;padding-inline:90px}#container{padding-top:200px}.container_inside{padding-bottom:120px}.container{max-width:1380px;position:relative;display:block;margin-right:auto;margin-left:auto;padding-inline:60px}.unequal_heights{align-items:flex-start}#wrapper{overflow:clip}@media only screen and (max-width:1200px){#header .inside,#footer .inside,#Hero .ce_text_inside,.container_inside{padding-inline:30px}}@media only screen and (max-width:850px){#header .inside,#footer .inside,#Hero .ce_text_inside,.container_inside{padding-inline:15px}} #header{position:fixed;width:100%;z-index:400;background-color:#FFF9F1;background:#f9efdd;background:linear-gradient(123deg, #f9efdd 0%, #fff9f1 48%, #fbefd9 100%);top:0;left:0;height:max-content}#header .inside,#header .header_left,#header .contact{display:flex;justify-content:space-between;align-items:center}#header .header_left{width:100%;padding-right:3.75%}#header .contact{border-left:1px solid #D9D9D9;align-self:stretch;font-size:0.75em;padding-left:5%}#header .contact .btn{padding:7px 15px;margin-left:30px}#header .btn{margin-bottom:0}#header .logo{width:60px;margin-right:60px;padding:18px 0}#header a{border-bottom:0}#header .mod_navigation ul{font-size:0.822em;font-weight:500}#header .mod_navigation ul,#header .mod_navigation li{list-style:none;padding:0;margin:0;display:flex;align-items:center;line-height:1em}#header .mod_navigation a,#header .mod_navigation strong.active{padding:10px 20px;font-weight:400}#header .mod_navigation strong.active{color:#D73219}#header .menu{display:none}@media only screen and (max-width:1290px){#header .mod_navigation ul{font-size:0.75em}}@media only screen and (max-width:1200px){#header .mod_navigation a{padding:10px 15px}#header .logo{width:65px;margin-right:45px}#header .contact{padding-left:3.8%}}@media only screen and (max-width:970px){#header .mod_navigation a{padding:10px}#header .logo{width:55px;margin-right:20px}#header .contact .btn{margin-left:15px}}@media only screen and (max-width:860px){#header .logo{width:45px;margin-right:15px}#header .mod_navigation ul{font-size:0.7em}#header .mod_navigation a{padding:10px}#header .contact .btn{padding:6px 12px;margin-left:15px;font-size:0.875em}}@media only screen and (max-width:670px){#header .contact{border-left:0}#header .inside{padding-right:0}#header .logo{padding-top:15px;padding-bottom:15px;width:55px}#header .mod_navigation{display:none}#header .menu{display:flex;justify-content:center;align-items:center;background-color:#D73219;color:#fff;height:100%;padding:20px;margin-left:15px;font-size:1.25em}}@media only screen and (max-width:600px){#header{bottom:0;border-bottom:0;border-top:1px solid #D9D9D9}} .video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000}.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}html{scroll-behavior:smooth;scroll-padding-top:180px}body{background:#f9efdd;background:linear-gradient(123deg, #fbead9 0%, #fff9f1 48%, #fcefd9 100%);background-size:400% 400%;animation:gradient 8s ease infinite;font-size:1.35em;line-height:1.35em;font-family:freight-sans-pro, sans-serif;color:#333A3F;font-weight:300;font-style:normal;-moz-font-feature-settings:"lnum";-webkit-font-feature-settings:"lnum";font-feature-settings:"lnum"}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}h1{font:3em/1.25;font-size:clamp(3em, 5vw, 5em);line-height:1em;font-weight:300;font-family:freight-text-pro, serif;margin-bottom:0.25em;text-wrap:balance}h1 .small{display:block;font-size:0.6em;font-weight:700}h2{margin-bottom:15px;font:1.85em/1.35em;font-size:clamp(1.25em, 1.85vw, 1.85em);line-height:1.125em;font-weight:600}.small h2{font-size:clamp(1.25em, 1.4vw, 1.65em)}h3{margin:0 0 10px;font-size:clamp(1.125em, 1.5vw, 1.4em);line-height:1.125em;font-weight:500}p{font-size:clamp(0.9em, 1.7vw, 1em);line-height:1.35em;margin:0 0 1.35em;padding:0}sup{font-size:clamp(0.25em, 0.6vw, 0.4em)}strong{font-weight:600}a{border-bottom:1px solid #333A3F;text-decoration:none;color:#333A3F;transition:all 0.2s ease}a:hover{border-bottom:1px solid #D73219;color:#D73219}h1 a,h3 a,h2 a,h1 a:hover,h3 a:hover,h2 a:hover{border-bottom:0}hr{margin-top:30px;margin-bottom:90px;border:0;border-top:1px solid #D9D9D9}li{margin-bottom:10px}.hide_bullets ul{list-style:none}.red{color:#D73219}.btn a,a.btn,button,.blog .layout_latest p.more a,.ce_download .download-element a{display:inline-block;margin-bottom:30px;padding:15px 25px;text-align:center;background-color:#D73219;border-radius:30px;font-size:1rem;color:#fff;cursor:pointer;border:0;line-height:1.35em;text-transform:uppercase}.btn a:hover,a.btn:hover,button[type=submit]:hover,.blog .layout_latest p.more a:hover,#divisions a.btn:hover,.product_list input.submit:hover,.mod_iso_cart input.submit:hover,.mod_iso_checkout input.submit:hover,.mod_iso_productreader input.submit:hover,.review a.edit:hover{background-color:#87949e;color:#fff}.btn.dark a,a.btn.dark{background-color:#333A3F;color:#fff}.btn.dark a:hover,a.btn.dark:hover{background-color:#D73219;color:#fff}.small,.small p{font-size:clamp(0.75em, 1.35vh, 1.125em)}.small p{margin-bottom:0.875em}.small a,a.small{display:inline-block}.small li{margin-bottom:0}a.download-element:after{display:inline-block;padding:0 0 0 0.25em;border:0;font-family:"Font Awesome 5 Pro";text-transform:none;content:"";font-weight:900}a.download-element{margin-right:0.25em;margin-left:0.25em;padding:0;font-weight:bold}.signup{padding:50px 0}.size33.quote{margin-top:60px}.center_element{margin-right:auto;margin-left:auto}.download-element .size{display:none}.ce_gallery ul{margin:0;padding:0;justify-content:center}.ce_gallery ul li{width:25%;margin-bottom:0;padding:15px}figcaption{text-align:center;font-size:0.875em}#main .mod_navigation ul{width:100%;margin:0 0 30px;padding:18px 0 15px;text-align:center;background-color:#f0f0f0;list-style-type:none}#main .mod_navigation li{display:inline-block}#main .mod_navigation a,#main .mod_navigation strong{display:block;padding-right:15px;padding-left:15px;border-bottom:0}ul{margin-top:0;margin-bottom:1.35em;padding-top:0;padding-bottom:0;padding-left:1em}.meta{font-size:0.75em}.content-element-group.nowrap svg{font-size:2.25em;margin-right:15px;margin-top:10px;color:#D73219}.card,.service{border:1px solid #D73219;padding:60px}.card.media--above figure{margin-bottom:15px}.card.media--above.center_text figure img{margin:auto}.card.vert_center{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.service{container-type:inline-size;flex-wrap:nowrap;margin-bottom:90px;padding:90px;padding-bottom:60px}.service .content-text.media{width:430px;flex-shrink:0;padding-right:120px}.service h2{font-family:freight-text-pro, serif;font-size:clamp(2em, 5vw, 3.25em);font-weight:400;margin-bottom:45px}@container (max-width: 950px){.service .content-text.media{width:370px;padding-right:60px}}@container (max-width: 850px){.service .content-text.media{width:300px;padding-right:30px}}@container (max-width: 850px){.service .content-text.media{width:300px;padding-right:30px}}@container (max-width: 790px){.service .content-text.media{width:270px;padding-right:30px}}.profile{margin-bottom:60px}.profile img{margin-bottom:10px}.profile h3{margin-bottom:0}.social{display:block}.social a{border-bottom:0}.intro{font-size:1.4em;color:#4a545b;text-wrap:balance}.services .rte strong{text-transform:uppercase;font-size:0.9em}.services .rte ul{list-style:none;padding:0;margin-bottom:30px;margin-top:0}.services .rte ul li{margin-bottom:8px}.left-rounded figure{overflow:hidden;border-radius:clamp(30px, 8vw, 190px) 0 0 0}.right-rounded figure{overflow:hidden;border-radius:0 clamp(30px, 8vw, 190px) 0 0}@media only screen and (max-width:1350px){.service{padding-inline:60px;padding-block:45px;padding-bottom:15px}}@media only screen and (max-width:730px){.service{flex-wrap:wrap}.service .content-text.media{text-align:center;max-width:500px;margin:auto;margin-bottom:30px;padding:0}.service .content-text.media h2{margin-bottom:25px}}@media only screen and (max-width:550px){.service{padding-inline:45px;padding-block:30px;padding-bottom:0}} #footer{background-color:#161613;padding-top:75px;font-size:0.75em;line-height:1.35em;color:white}#footer .inside{display:flex}#footer .logo{width:70px;margin-right:25px}#footer a{border-bottom:1px solid #fff;color:white}#footer .contact{display:inline-block;margin-bottom:30px}#footer .copyright{margin-top:100px;font-size:0.8em}#footer .social a{border-bottom:0}#footer address{display:block}#footer .blog{margin-top:30px}#footer ul,#footer li{list-style:none;padding:0;margin:0}#footer .mod_navigation a{border-bottom:0}#footer .size33.address{display:flex;width:41%}#footer .size33{border-right:1px solid #fff;padding-bottom:160px;position:relative;padding-inline:30px}#footer .size33.footer_nav{width:25%}#footer .size33:after{content:" ";width:20px;height:20px;border-radius:50%;background-color:#D73219;position:absolute;top:0;right:-10px}#footer .size33:last-child{border-right:0}#footer .size33:last-child:after{display:none}#footer form{padding:0;margin:0}#footer #mc_embed_signup form,#footer #mc-embedded-subscribe{margin:0 !important}#footer .clear{height:inherit;font-size:inherit}#footer input.btn{font-size:1em !important;background-color:#D73219;padding:7px 15px;display:inline-block;color:#fff;border:0;font-weight:300;text-transform:uppercase;border-radius:5px;cursor:pointer}#footer input.btn:hover{background-color:#fff;color:#D73219}@media only screen and (max-width:1330px){#footer .size33.address{width:450px;flex-shrink:0;flex-basis:450px}.size33.footer_nav{width:200px;flex-basis:200px;flex-shrink:0}}@media only screen and (max-width:900px){#footer .inside{flex-wrap:wrap;padding-bottom:80px}#footer .inside .logo{width:70px;padding-right:10px}#footer .size33,#footer .size33.address,#footer .size33.footer_nav{border:0;padding-left:0;width:100%;flex-basis:100%;padding-bottom:15px}#footer .size33:after,#footer .size33.address:after,#footer .size33.footer_nav:after{display:none}#footer .size33,#footer .size33.footer_nav{padding-left:95px}#footer .copyright{margin-top:10px}#footer .blog{margin-top:0}} /* ====================================================================== Bright Cloud Studio Layout Utility Framework (Pure CSS) DESKTOP-FIRST • max-width media queries ====================================================================== */ /* ====================================================================== PROJECT TOKENS — EDIT THESE PER SITE ====================================================================== */ :root { /* Page gutters (site margins) */ --page-gutter: clamp(16px, 4vw, 60px); /* Max content width */ --container-max: 1200px; /* Default row spacing (desktop) — edit per site */ --row-gap-x: 40px; --row-gap-y: 40px; /* Default column inner padding (desktop) — edit per site if needed */ --row-col-pad-x: 0; /* ====================================================================== SPACING SCALE (PROJECT-CONFIGURABLE) ====================================================================== IMPORTANT: The numbers in spacing utility class names (mb-40, mt-24, etc.) represent spacing STEPS, not fixed pixel values. Changing the --space-* values below will update spacing globally without changing class names. Do NOT assume mb-40 always equals 40px. ====================================================================== */ --space-0: 0; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-40: clamp(24px, 3vw, 40px); --space-60: clamp(32px, 5vw, 60px); --space-80: clamp(40px, 7vw, 80px); /* Major section separation (responsive) */ --space-section: clamp(32px, 6vw, 96px); /* ====================================================================== SINGLE-COLUMN MAX WIDTH TOKENS (EDIT PER SITE) ====================================================================== Used to constrain one-column rows without affecting global containers. Ideal for editorial content, long-form copy, and focused sections. ====================================================================== */ --single-sm: 720px; /* readable text width */ --single-md: 880px; /* default content column */ --single-lg: 1040px; /* wide single-column layouts */ } /* ====================================================================== CONTAINERS — SAFE TO REUSE ACROSS PROJECTS ====================================================================== */ .container { margin-inline: auto; padding-inline: var(--page-gutter); max-width: var(--container-max); } .container-fluid { width: 100%; padding-inline: var(--page-gutter); } /* AUDIT NOTE — .bleed-x .bleed-x applies negative margins to break out of container gutters. Use it for full-bleed backgrounds/sections. Avoid putting .bleed-x on elements inside components that already have their own padding (cards, modals) unless you intend for it to escape. */ /* Full-bleed helper */ .bleed-x { margin-inline: calc(-1 * var(--page-gutter)); padding-inline: 0; } /* ====================================================================== WHY WE DO NOT USE column-gap FOR HORIZONTAL GUTTERS ====================================================================== Flexbox gap adds space ON TOP of percentage-based columns. Example: size66 (66.666%) + size33 (33.333%) + gap > 100% Result: The last column wraps onto the next line. To avoid this, we use the classic gutter technique: - Row has negative half-gutter margins - Columns receive half-gutter padding - Vertical spacing still uses row-gap This keeps percentage math exact and prevents wrapping bugs. DO NOT reintroduce column-gap for horizontal spacing. ====================================================================== */ /* ====================================================================== ROW ENGINE — CORE (LEAVE ALONE) ====================================================================== */ .row, .flex_wrapper { display: flex; flex-wrap: wrap; column-gap: 0; /* Row-level spacing defaults (from project tokens) */ --gap-x: var(--row-gap-x); /* horizontal gutter between columns */ --gap-y: var(--row-gap-y); /* vertical gap between wrapped rows */ --col-pad-x: var(--row-col-pad-x); /* extra inner padding inside each column */ /* IMPORTANT: We do NOT use column-gap for horizontal gutters because gap adds width on top of percentage columns (e.g., 66% + 33% + gap > 100% → wrap). Instead we use the classic gutter technique: - Negative row margins - Matching child padding This keeps columns on one line with exact percentage widths. */ margin-inline: calc(-1 * (var(--gap-x) / 2)); row-gap: var(--gap-y); } /* Trim keeps page margins aligned when column padding is used */ .row.trim, .flex_wrapper.trim { margin-inline: calc(-1 * ((var(--gap-x) / 2) + var(--col-pad-x))); } /* Column padding comes from the row */ .row > *, .flex_wrapper > * { padding-inline: calc((var(--gap-x) / 2) + var(--col-pad-x)); min-width: 0; box-sizing: border-box; } /* ====================================================================== COLUMN WIDTH UTILITIES — HOW flex: 0 0 X% WORKS ====================================================================== flex is shorthand for: flex-grow | flex-shrink | flex-basis Example: flex: 0 0 50%; Means: - flex-grow: 0 → do NOT grow larger than the base size - flex-shrink: 0 → do NOT shrink smaller than the base size - flex-basis: 50% → base width is 50% of the row Why we use this: - Guarantees predictable column widths - Prevents stretching or squishing - Works cleanly with flex-wrap, gaps, and .trim - Avoids layout drift when spacing changes IMPORTANT: These classes control WIDTH ONLY. Do NOT add padding or margins to columns. Spacing is controlled at the ROW level. ====================================================================== */ /* ====================================================================== COLUMN WIDTHS — PREFERRED + LEGACY ALIASES ====================================================================== */ /* AUDIT NOTE — % WIDTHS VS calc() We use clean percentages (50%, 33.333%, etc.) for readability. If you ever see 1px wrapping on some browsers due to rounding + gaps, you can switch to: flex: 0 0 calc(50% - 0.001px); But in practice, with gap and modern browsers, % is usually stable. Leave as-is unless you observe wrapping artifacts. ====================================================================== */ .col { flex: 1 1 0; } .col-auto { flex: 0 0 auto; } .col-1-2 { flex: 0 0 50%; } .col-1-3 { flex: 0 0 33.333%; } .col-2-3 { flex: 0 0 66.666%; } .col-1-4 { flex: 0 0 25%; } .col-3-4 { flex: 0 0 75%; } .col-3-5 { flex: 0 0 60%; } .col-2-5 { flex: 0 0 40%; } .col-30 { flex: 0 0 30%; } .col-20 { flex: 0 0 20%; } /* Fixed ma-widths */ .single-sm, .single-md, .single-lg { max-width: var(--single-md); /* overridden per class */ margin-inline: auto; width: 100%; } .single-sm { max-width: var(--single-sm); } .single-md { max-width: var(--single-md); } .single-lg { max-width: var(--single-lg); } /* Legacy sizeXX aliases */ .size100 { flex: 0 0 100%; } .size75 { flex: 0 0 75%; } .size66 { flex: 0 0 66.666%; } .size50 { flex: 0 0 50%; } .size33 { flex: 0 0 33.333%; } .size25 { flex: 0 0 25%; } .size60 { flex: 0 0 60%; } .size40 { flex: 0 0 40%; } .size30 { flex: 0 0 30%; } .size20 { flex: 0 0 20%; } /* ====================================================================== GAP DECISION GUIDE (READ THIS BEFORE ADDING NEW SPACING) ====================================================================== Use this guide to choose the RIGHT gap utility. Do not invent new gap values unless absolutely necessary. DEFAULT (most sections): gap-fluid → Responsive, balanced spacing across all screen sizes TIGHT / DENSE LAYOUTS: gap-fluid-sm OR gap-16 → Icon grids, specs, compact UI sections SPACIOUS / PREMIUM SECTIONS: gap-fluid-lg OR gap-40 / gap-60 → Hero sections, editorial layouts, feature showcases AXIS-SPECIFIC CONTROL: gap-x-* / gap-y-* → When horizontal and vertical rhythm should differ PRECISION / MATCHING DESIGNS: gap-16 / gap-24 / gap-40 → When spacing must match comps exactly RULE OF THUMB: If unsure, use `gap-fluid`. ====================================================================== */ /* ====================================================================== GAP UTILITIES — EDIT AVAILABLE SIZES AS NEEDED ====================================================================== */ .gap-0 { --gap-x: 0; --gap-y: 0; } .gap-16 { --gap-x: 16px; --gap-y: 16px; } .gap-24 { --gap-x: 24px; --gap-y: 24px; } .gap-40 { --gap-x: 40px; --gap-y: 40px; } .gap-60 { --gap-x: 60px; --gap-y: 60px; } /* ====================================================================== FLUID GAP UTILITIES (CLAMP-BASED) ====================================================================== Use these when spacing should scale smoothly across screen sizes. Prefer these for marketing and editorial layouts. Tiers: - sm: tight, dense layouts - default: most sections - lg: spacious, premium layouts */ .gap-fluid-sm { --gap-x: clamp(8px, 1.5vw, 16px); --gap-y: clamp(8px, 1.5vw, 16px); } .gap-fluid { --gap-x: clamp(12px, 2vw, 32px); --gap-y: clamp(12px, 2vw, 32px); } .gap-fluid-lg { --gap-x: clamp(24px, 4vw, 64px); --gap-y: clamp(24px, 4vw, 64px); } .gap-x-fluid { --gap-x: clamp(12px, 2vw, 40px); } .gap-y-fluid { --gap-y: clamp(12px, 2vw, 40px); } /* ====================================================================== COLUMN INNER PADDING UTILITIES — ALWAYS PAIR WITH .trim ====================================================================== */ .pxc-0 { --col-pad-x: 0; } .pxc-16 { --col-pad-x: 16px; } .pxc-24 { --col-pad-x: 24px; } .pxc-40 { --col-pad-x: 40px; } .pxc-60 { --col-pad-x: 60px; } /* Fluid column padding (default) */ .pxc-fluid { --col-pad-x: clamp(16px, 3vw, 60px); } /* Fluid column padding — SMALL */ .pxc-fluid-sm { --col-pad-x: clamp(8px, 1.5vw, 24px); } /* Fluid column padding — LARGE (optional) */ .pxc-fluid-lg { --col-pad-x: clamp(24px, 4vw, 80px); } /* ====================================================================== RESPONSIVE OVERRIDES — DESKTOP FIRST (MAX-WIDTH) • SIMPLIFIED ====================================================================== SIMPLIFIED RESPONSIVE MODEL (CMS-FRIENDLY) ----------------------------------------- We auto-stack fraction columns on smaller screens. - Desktop: .col-1-2, .size66, etc. behave as expected - Tablet and down: fraction columns become full width (stacked) - No md:* / sm:* classes required ESCAPE HATCH ------------ If you need a row to KEEP columns side-by-side on tablet/mobile, add .no-stack to the row:
...
====================================================================== */ /* Tablet and down: stack fraction columns by default */ @media (max-width: 992px) { /* Default behavior: stack, unless the row opts out */ .row:not(.no-stack) > .col-1-2, .row:not(.no-stack) > .col-1-3, .row:not(.no-stack) > .col-2-3, .row:not(.no-stack) > .col-1-4, .row:not(.no-stack) > .col-3-4, .row:not(.no-stack) > .col-3-5, .row:not(.no-stack) > .col-2-5, .row:not(.no-stack) > .col-30, .row:not(.no-stack) > .col-20, .row:not(.no-stack) > .size100, .row:not(.no-stack) > .size75, .row:not(.no-stack) > .size60, .row:not(.no-stack) > .size40, .row:not(.no-stack) > .size30, .row:not(.no-stack) > .size20, .row:not(.no-stack) > .size66, .row:not(.no-stack) > .size50, .row:not(.no-stack) > .size33, .row:not(.no-stack) > .size25, .flex_wrapper:not(.no-stack) > .col-1-2, .flex_wrapper:not(.no-stack) > .col-1-3, .flex_wrapper:not(.no-stack) > .col-2-3, .flex_wrapper:not(.no-stack) > .col-1-4, .flex_wrapper:not(.no-stack) > .col-3-4, .flex_wrapper:not(.no-stack) > .col-3-5, .flex_wrapper:not(.no-stack) > .col-2-5, .flex_wrapper:not(.no-stack) > .col-30, .flex_wrapper:not(.no-stack) > .col-20, .flex_wrapper:not(.no-stack) > .size100, .flex_wrapper:not(.no-stack) > .size75, .flex_wrapper:not(.no-stack) > .size60, .flex_wrapper:not(.no-stack) > .size40, .flex_wrapper:not(.no-stack) > .size30, .flex_wrapper:not(.no-stack) > .size20, .flex_wrapper:not(.no-stack) > .size66, .flex_wrapper:not(.no-stack) > .size50, .flex_wrapper:not(.no-stack) > .size33, .flex_wrapper:not(.no-stack) > .size25 { flex: 0 0 100%; max-width: 100%; } } /* ====================================================================== TYPOGRAPHY SPACING & FLOW CONTROL ====================================================================== WHY THIS EXISTS --------------- Browsers apply default margins to elements like

,