*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block; /* [1] */
margin: 0; /* [2] */
padding: 0; /* [2] */
list-style: none; /* [1] */
margin-left: -2rem; /* [3] */
font-size: 0;
}
/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 3. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 4. By default, all layout items are full-width (mobile first).
* 5. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
* 6. Fallback for old IEs not supporting `rem` values.
*/
.o-layout__item {
box-sizing: border-box; /* [1] */
display: inline-block; /* [2] */
vertical-align: top; /* [3] */
width: 100%; /* [4] */
padding-left: 2rem; /* [5] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -1rem;
}
.o-layout--tiny > .o-layout__item {
padding-left: 1rem;
}
.o-layout--small {
margin-left: -1.5rem;
}
.o-layout--small > .o-layout__item {
padding-left: 1.5rem;
}
.o-layout--large {
margin-left: -2.5rem;
}
.o-layout--large > .o-layout__item {
padding-left: 2.5rem;
}
.o-layout--huge {
margin-left: -3rem;
}
.o-layout--huge > .o-layout__item {
padding-left: 3rem;
}
/* Vertical alignment modifiers
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle > .o-layout__item {
vertical-align: middle;
}
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom > .o-layout__item {
vertical-align: bottom;
}
/**
* Stretch all grid items of each row to have an equal-height.
* Please be aware that this modifier class doesn’t take any effect in IE9 and
* below and other older browsers due to the lack of `display: flex` support.
*/
.o-layout--stretch {
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item{
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch.o-layout--center {
justify-content: center;
}
.o-layout--stretch.o-layout--left {
justify-content: flex-start;
}
.o-layout--stretch.o-layout--right {
justify-content: flex-end;
}
/* Fill order modifiers
========================================================================== */
/**
* Fill up the layout system from the center.
*/
.o-layout--center {
text-align: center;
}
.o-layout--center > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the right-hand side.
*/
.o-layout--right {
text-align: right;
}
.o-layout--right > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the left-hand side. This will likely only be
* needed when using in conjunction with `.o-layout--reverse`.
*/
.o-layout--left {
text-align: left;
}
.o-layout--left > .o-layout__item {
text-align: left;
}
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl;
}
.o-layout--reverse > .o-layout__item {
direction: ltr;
}
/* Auto-widths modifier
========================================================================== */
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.o-layout--auto > .o-layout__item {
width: auto;
}
/* ==========================================================================
OBJECTS: #LIST-BARE
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets and any
* indentation.
*
* Note: Declaring the item class might not be necessary everywhere,
* but is for example in
- lists for the
- children.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
.o-list-bare__item {
margin-left: 0;
}
/* ==========================================================================
OBJECTS: #LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin: 0;
padding: 0;
list-style: none;
}
.o-list-inline__item,
.o-list-inline > li { /* addition due to code structure from hubl */
display: inline-block;
}
/* ==========================================================================
OBJECTS: #WRAPPER
========================================================================== */
/**
* Page-level constraining and wrapping elements.
*/
.o-wrapper,
.container-fluid .row-fluid .o-wrapper {
max-width: 100rem;
padding-right: 3rem;
padding-left: 3em;
margin-right: auto;
margin-left: auto;
float: none; /* unset hubspot float */
}
.o-wrapper:after,
.container-fluid .row-fluid .o-wrapper:after {
content: "";
display: table;
clear: both;
}
.o-wrapper--small,
.container-fluid .row-fluid .o-wrapper--small {
max-width: 90rem;
padding-right: 2rem;
padding-left: 2rem;
margin-right: auto;
margin-left: auto;
float: none; /* unset hubspot float */
}
.o-wrapper--small:after,
.container-fluid .row-fluid .o-wrapper--small:after {
content: "";
display: table;
clear: both;
}
/* ==========================================================================
OBJECTS: #SECTION
========================================================================== */
.o-section {
padding-top: 8%;
padding-bottom: 8%;
}
/* Style variants
========================================================================== */
.o-section--tiny {
padding-top: 2%;
padding-bottom: 2%;
}
.o-section--small {
padding-top: 4%;
padding-bottom: 4%;
}
/* ==========================================================================
COMPONENTS: #BUTTONS
========================================================================== */
/**
*
* 1. Allow the use of style box model properties.
* 2. Line up different sized buttons.
* 3. Reset/normalize some styles.
* 4. Make buttons inherit font styles (often necessary when styling `input`s as
* buttons).
* 5. Force all button-styled elements to appear clickable.
* 6. Make buttons inherit font styles (often necessary when styling `input`s as
* buttons).
*
*/
.c-btn {
/* Layout */
display: inline-block; /* 1 */
vertical-align: middle; /* 2 */
margin: 0; /* 4 */
padding: 2rem 4rem;
/* UI */
font: inherit; /* 3 */
text-decoration: none; /* 4 */
text-align: center; /* 4 */
cursor: pointer; /* 5 */
font: inherit; /* 6 */
border-radius: 5rem;
transition: .1s;
}
/* Style variants
========================================================================== */
.c-btn--primary,
.c-btn--primary:link,
.c-btn--primary:visited {
background-color: #fff;
border: 1px solid #fff;
}
.c-btn--primary:hover,
.c-btn--primary:active,
.c-btn--primary:focus {
background-color: #fff;
border: 1px solid #fff;
}
.c-btn--secondary,
.c-btn--secondary:link,
.c-btn--secondary:visited {
background-color: #fff;
border: 1px solid #fff;
}
.c-btn--secondary:hover,
.c-btn--secondary:active,
.c-btn--secondary:focus {
background-color: #fff;
border: 1px solid #fff;
}
.c-btn--tertiary,
.c-btn--tertiary:link,
.c-btn--tertiary:visited {
background-color: #fff;
border: 1px solid #fff;
}
.c-btn--tertiary:hover,
.c-btn--tertiary:active,
.c-btn--tertiary:focus {
background-color: #fff;
border: 1px solid #fff;
}
/* Size variants
========================================================================== */
.c-btn--small {
padding: 1rem 2rem;
}
.c-btn--large {
padding: 2rem 6rem;
}
/* Ghost buttons
========================================================================== */
/**
* Ghost buttons have see-through backgrounds and are bordered.
*/
.c-btn--ghost,
.c-btn--ghost:link,
.c-btn--ghost:visited {
border: 1px solid #fff;
color: #fff;
}
.c-btn--ghost:hover,
.c-btn--ghost:active,
.c-btn--ghost:focus {
background-color: #fff;
color: #fff;
}
/* ==========================================================================
COMPONENTS: #HERO
========================================================================== */
.c-hero > .row-fluid-wrapper > .row-fluid {
background-color: #252130;
background-repeat: no-repeat;
background-position: right;
color: #fff;
font-family: HKGrotesk-Regular, system-ui;
}
.c-hero__image {
text-align: center;
}
.c-hero__title h1 {
font-size: 3.8rem;
text-align: center;
font-family: "HKGrotesk-Bold";
}
.c-hero__button {
padding: 1.5rem;
background-color: #FF3939;
display: block;
width: 100%;
text-align: center;
font-size: 2rem;
border: none;
color: white;
border-radius: 5px;
cursor: pointer;
margin: 1rem 0;
}
/* ==========================================================================
COMPONENTS: #BOX
========================================================================== */
.c-box {
padding: 5%;
}
.c-box--small {
padding: 2%;
}
.c-box--large {
padding: 8%;
}
.c-box--huge {
padding: 12%;
}
/* ==========================================================================
COMPONENTS: #SOCIAL
========================================================================== */
.c-social {
color: #7F88B9;
}
.c-social h2 {
font-size: 1.4rem;
min-height: unset;
font-weight: 100;
font-family: HKGrotesk-Regular, system-ui;
}
.c-social a {
color: #7F88B9;
font-size: 2.5rem;
}
/* ==========================================================================
COMPONENTS: #FOOTER
========================================================================== */
.c-footer__copyright {
color: #9190A5;
font-weight: 300;
font-family: HKGrotesk-Regular, system-ui;
}
/* ==========================================================================
COMPONENTS: #FORMS
========================================================================== */
/* All Global Forms
========================================================================== */
.c-form-overlay .row-fluid-wrapper .row-fluid {
background-color: #252130;
}
.c-form {
background-color: #1C1924;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none !important;
overflow: scroll;
}
.open {
display: block !important;
}
.c-form form {
width: 80%;
background-color: #36324A;
padding: 4rem;
border-radius: 5px;
color: #fff;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin: 5% 0;
}
@media (min-width:768px) {
.c-form form {
width: 40%;
}
}
.c-form__close {
display: block;
font-size: 4.6rem;
color: white;
position: fixed;
top: 2rem;
right: 2rem;
cursor: pointer;
z-index: 99;
opacity: 0 !important;
}
.visible {
opacity: 1 !important;
}
.c-form .hs-richtext p {
font-size: 1rem;
}
/* Form Field */
body .hs-form-field {}
/* Descriptions */
body .hs-field-desc {}
/* Labels */
body label {}
body .hs-form-field > label {
font-size: 1.5rem;
margin-bottom: .5rem;
display: inline-block;
}
/* One Line Inputs */
body input[type="text"],
body input[type="password"],
body input[type="datetime"],
body input[type="datetime-local"],
body input[type="date"],
body input[type="month"],
body input[type="time"],
body input[type="week"],
body input[type="number"],
body input[type="email"],
body input[type="url"],
body input[type="search"],
body input[type="tel"],
body input[type="color"],
body input[type="file"],
body textarea,
body select {
width: 100%;
font-family: HKGrotesk-Regular, system-ui;
font-size: 1.5rem;
margin-bottom: 1rem;
padding: .5rem;
border: none;
border-radius: 5px;
background-color: #4F4A69;
color: white;
}
body input[type="text"]:focus,
body input[type="password"]:focus,
body input[type="datetime"]:focus,
body input[type="datetime-local"]:focus,
body input[type="date"]:focus,
body input[type="month"]:focus,
body input[type="time"]:focus,
body input[type="week"]:focus,
body input[type="number"]:focus,
body input[type="email"]:focus,
body input[type="url"]:focus,
body input[type="search"]:focus,
body input[type="tel"]:focus,
body input[type="color"]:focus,
body input[type="file"]:focus,
body textarea:focus,
body select:focus {
}
/* Separate Styles for Multiple Line Inputs */
body textarea {}
body textarea:focus {}
/* Separate Styles for Drop Downs */
body select {}
body select:focus {}
/* Multiple Selection Inputs */
body form.hs-form .hs-form-field ul.inputs-list {
list-style: none;
padding: 0;
}
body form.hs-form .hs-form-field ul.inputs-list li input {}
body input[type="radio"] {}
body input[type="checkbox"] {}
/* Required */
body input:focus:required:invalid,
body textarea:focus:required:invalid,
body select:focus:required:invalid {}
body input:focus:required:invalid:focus,
body textarea:focus:required:invalid:focus,
body select:focus:required:invalid:focus {}
/* Placeholder Text */
::-webkit-input-placeholder { /* Webkit Browsers */
/* color: #555;
opacity: 1; */
}
:-moz-placeholder { /* Firefox 18- */
/* color: #555;
opacity: 1; */
}
::-moz-placeholder { /* Firefox 19+ */
/* color: #555;
opacity: 1; */
}
:-ms-input-placeholder { /* IE10 */
/* color: #555;
opacity: 1; */
}
/* Form Module
========================================================================== */
/* Form Field */
.hs_cos_wrapper_type_form .hs-form-field {}
/* Descriptions */
.hs_cos_wrapper_type_form .hs-field-desc {}
/* Labels */
.hs_cos_wrapper_type_form label {}
.hs_cos_wrapper_type_form .hs-form-field > label {}
/* One Line Inputs */
.hs_cos_wrapper_type_form input[type="text"],
.hs_cos_wrapper_type_form input[type="password"],
.hs_cos_wrapper_type_form input[type="datetime"],
.hs_cos_wrapper_type_form input[type="datetime-local"],
.hs_cos_wrapper_type_form input[type="date"],
.hs_cos_wrapper_type_form input[type="month"],
.hs_cos_wrapper_type_form input[type="time"],
.hs_cos_wrapper_type_form input[type="week"],
.hs_cos_wrapper_type_form input[type="number"],
.hs_cos_wrapper_type_form input[type="email"],
.hs_cos_wrapper_type_form input[type="url"],
.hs_cos_wrapper_type_form input[type="search"],
.hs_cos_wrapper_type_form input[type="tel"],
.hs_cos_wrapper_type_form input[type="color"],
.hs_cos_wrapper_type_form input[type="file"],
.hs_cos_wrapper_type_form textarea,
.hs_cos_wrapper_type_form select {}
.hs_cos_wrapper_type_form input[type="text"]:focus,
.hs_cos_wrapper_type_form input[type="password"]:focus,
.hs_cos_wrapper_type_form input[type="datetime"]:focus,
.hs_cos_wrapper_type_form input[type="datetime-local"]:focus,
.hs_cos_wrapper_type_form input[type="date"]:focus,
.hs_cos_wrapper_type_form input[type="month"]:focus,
.hs_cos_wrapper_type_form input[type="time"]:focus,
.hs_cos_wrapper_type_form input[type="week"]:focus,
.hs_cos_wrapper_type_form input[type="number"]:focus,
.hs_cos_wrapper_type_form input[type="email"]:focus,
.hs_cos_wrapper_type_form input[type="url"]:focus,
.hs_cos_wrapper_type_form input[type="search"]:focus,
.hs_cos_wrapper_type_form input[type="tel"]:focus,
.hs_cos_wrapper_type_form input[type="color"]:focus,
.hs_cos_wrapper_type_form input[type="file"]:focus,
.hs_cos_wrapper_type_form textarea:focus,
.hs_cos_wrapper_type_form select:focus {}
/* Separate Styles for Multiple Line Inputs */
.hs_cos_wrapper_type_form textarea {}
.hs_cos_wrapper_type_form textarea:focus {}
/* Separate Styles for Drop Downs */
.hs_cos_wrapper_type_form select {}
.hs_cos_wrapper_type_form select:focus {}
/* Multiple Selection Inputs */
.hs_cos_wrapper_type_form form.hs-form .hs-form-field ul.inputs-list li input {}
.hs_cos_wrapper_type_form input[type="radio"] {}
.hs_cos_wrapper_type_form input[type="checkbox"] {}
/* Blog Comment Form
========================================================================== */
/* Label */
#comment-form .hs-form-field > label {}
#comment-form label {}
/* Inputs */
#comment-form input[type="text"] {}
#comment-form input[type="text"]:focus {}
#comment-form textarea {}
#comment-form textarea:focus {}
#comment-form input[type="checkbox"] {}
/* Error */
body .hs-common-error-message {}
/* Blog Subscription Form
========================================================================== */
/* Label */
#hs_form_target_blog_subscription .hs-form-field > label {}
#hs_form_target_blog_subscription label {}
/* Inputs */
#hs_form_target_blog_subscription input[type="email"] {}
#hs_form_target_blog_subscription input[type="email"]:focus {}
#hs_form_target_blog_subscription input[type="radio"], #hs_form_target_blog_subscription input[type="checkbox"] {
width: auto;
margin-right: 10px;
}
/* Google Search Form
========================================================================== */
/* Label */
.widget-type-google_search label {}
/* Input */
.widget-type-google_search input[type="text"] {}
.widget-type-google_search input[type="focus"] {}
/* Multi Column Form
========================================================================== */
body .hs-form fieldset.form-columns-1 {}
body .hs-form fieldset.form-columns-1 .hs-form-field {}
body .hs-form fieldset.form-columns-2 {}
body .hs-form fieldset.form-columns-2 .hs-form-field {}
body .hs-form fieldset.form-columns-3 {}
body .hs-form fieldset.form-columns-3 .hs-form-field {}
/* Multiple Selection Inputs */
body form.hs-form .hs-form-field ul.inputs-list li input {}
body input[type="radio"] {}
body input[type="checkbox"] {}
body form.hs-form fieldset { max-width: none; }
body form.hs-form fieldset .hs-form-field { padding: 0 10px 0 0; }
body form.hs-form fieldset[class*="form-columns"] .input { margin-right: 0; }
body form.hs-form fieldset[class*="form-columns"] .hs-input { width: 100%; }
body form.hs-form fieldset[class*="form-columns"] .hs-input[type="checkbox"] { width: auto; }
body form.hs-form fieldset.form-columns-3 .hs-form-field { width: 33.33%; }
@media (max-width: 400px) {
body form.hs-form fieldset .hs-form-field { padding: 0; }
body form.hs-form fieldset.form-columns-3 .hs-form-field,
body form.hs-form .form-columns-2 .hs-form-field .hs-input,
body form.hs-form .form-columns-3 .hs-form-field .hs-input { width: 100%; }
body form.hs-form .form-columns-3 .hs-form-field .hs-input[type="checkbox"] { width: auto; }
}
/* All Global Buttons (Excluding CTAs)
========================================================================== */
body .hs-button.primary,
body input[type="submit"],
body input[type="button"] {
cursor: pointer;
-webkit-appearance: none;
font-family: HKGrotesk-Regular, system-ui;
font-size: 48.5%;
text-decoration: none !important;
}
body .hs-button.primary:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover {}
body .hs-button.primary:focus,
body input[type="submit"]:focus,
body input[type="button"]:focus {}
/* Form Module Button
========================================================================== */
.c-form .hs-button.primary.large {
padding: 1.5rem;
background-color: #FF3939;
display: block;
width: 100%;
text-align: center;
font-size: 1.5rem;
margin: 1rem 0;
border-radius: 5px;
color: white;
border: 0;
}
.c-form .hs-button.primary.large:hover {}
.c-form .hs-button.primary.large:focus {}
/* Blog Comment Button
========================================================================== */
#add-comment-button.hs-button.primary {}
#add-comment-button.hs-button.primary:hover {}
#add-comment-button.hs-button.primary:focus {}
/* Blog Subscription Button
========================================================================== */
#hs_form_target_blog_subscription .hs-button.primary.large {}
#hs_form_target_blog_subscription .hs-button.primary.large:hover {}
#hs_form_target_blog_subscription .hs-button.primary.large:focus {}
/* Google Search Button
========================================================================== */
.widget-type-google_search .hs-button.primary {}
.widget-type-google_search .hs-button.primary:hover {}
.widget-type-google_search .hs-button.primary:focus {}
/* CTA Buttons
========================================================================== */
/**
* Override global CTA styles by wrapping the CTA module in a module group
* that has an ID, and use that ID to prefix your CTA selector. Example shown below.
*
* All overriding properties require !important tags.
*/
#module-group-ID .cta_button {}
#module-group-ID .cta_button:hover {}
#module-group-ID .cta_button:focus {}
/* ==========================================================================
UTILITIES: #CLEARFIX
========================================================================== */
/**
* For certain browsers
*
* 1. The space content is one way to avoid an Opera bug when the contenteditable
* attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
*
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.u-clearfix:before,
.u-clearfix:after {
content: "";
display: table;
}
.u-clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.u-clearfix {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
/* ==========================================================================
UTILITIES: #HACKS
========================================================================== */
/* ==========================================================================
UTILITIES: #HEADINGS
========================================================================== */
/**
* Redefine all of our basic heading styles against utility classes so as to
* allow for double stranded heading hierarchy, e.g. we semantically need an H2,
* but we want it to be sized like an H1:
*
*
*
*/
.u-h1 {
font-size: 3.6rem !important;
}
.u-h2 {
font-size: 2.8rem !important;
}
.u-h3 {
font-size: 2.4rem !important;
}
.u-h4 {
font-size: 2rem !important;
}
.u-h5 {
font-size: 1.8rem !important;
}
.u-h6 {
font-size: 1.6rem !important;
}
/* ==========================================================================
UTILITIES: #HIDE
========================================================================== */
/**
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.u-hidden-visually {
visibility: hidden !important;
}
/**
* Hide visually and from screen readers.
*/
.u-hidden {
display: none !important;
}
/* ==========================================================================
UTILITIES: #CENTER VERTICALLY
========================================================================== */
@media (min-width: 48em) { /* 48 em b/c it is the width of hubspot were columns stack*/
.u-center-vertically > .row-fluid-wrapper > .row-fluid {
display: table;
}
.u-center-vertically > .row-fluid-wrapper > .row-fluid > * {
display: table-cell;
vertical-align: middle;
float: none; /* Cancel hubspot float */
}
}
/* ==========================================================================
UTILITIES: #TEXT ALIGN
========================================================================== */
.u-txt-center {
text-align: center;
}
.u-txt-left {
text-align: left;
}
.u-txt-right {
text-align: right;
}
/* ==========================================================================
UTILITIES: #BACKGROUND COLORS
========================================================================== */
.u-bg-primary .row-fluid-wrapper .row-fluid {
background-color: #252130;
}
.u-bg-accent .row-fluid-wrapper .row-fluid {
background-color: #F2F2F4; /* Light gray */
}
/* ==========================================================================
#WIDTHS
========================================================================== */
/**
* inuitcss generates a series of utility classes that give a fluid width to
* whichever element they’re applied, e.g.:
*
*
* * These classes are most commonly used in conjunction with our layout system, * e.g.: * *
* * By default, inuitcss will also generate responsive variants of each of these * classes by using your Sass MQ configuration, e.g.: * ** * Optionally, inuitcss can generate offset classes which can push and pull * elements left and right by a specified amount, e.g.: * ** * This is useful for making very granular changes to the rendered order of * items in a layout. * * N.B. This option is turned off by default. */ .u-1\/1 { width: 100% !important; } .u-1\/2 { width: 50% !important; } .u-2\/2 { width: 100% !important; } .u-1\/3 { width: 33.333333333% !important; } .u-2\/3 { width: 66.666666667% !important; } .u-3\/3 { width: 100% !important; } .u-1\/4 { width: 25% !important; } .u-2\/4 { width: 50% !important; } .u-3\/4 { width: 75% !important; } .u-4\/4 { width: 100% !important; } .u-1\/5 { width: 20% !important; } .u-2\/5 { width: 40% !important; } .u-3\/5 { width: 60% !important; } .u-4\/5 { width: 80% !important; } .u-5\/5 { width: 100% !important; } @media (min-width: 45em) { .u-1\/1\@sm { width: 100% !important; } .u-1\/2\@sm { width: 50% !important; } .u-2\/2\@sm { width: 100% !important; } .u-1\/3\@sm { width: 33.333333333% !important; } .u-2\/3\@sm { width: 66.666666667% !important; } .u-3\/3\@sm { width: 100% !important; } .u-1\/4\@sm { width: 25% !important; } .u-2\/4\@sm { width: 50% !important; } .u-3\/4\@sm { width: 75% !important; } .u-4\/4\@sm { width: 100% !important; } .u-1\/5\@sm { width: 20% !important; } .u-2\/5\@sm { width: 40% !important; } .u-3\/5\@sm { width: 60% !important; } .u-4\/5\@sm { width: 80% !important; } .u-5\/5\@sm { width: 100% !important; } } @media (min-width: 64em) { .u-1\/1\@md { width: 100% !important; } .u-1\/2\@md { width: 50% !important; } .u-2\/2\@md { width: 100% !important; } .u-1\/3\@md { width: 33.333333333% !important; } .u-2\/3\@md { width: 66.666666667% !important; } .u-3\/3\@md { width: 100% !important; } .u-1\/4\@md { width: 25% !important; } .u-2\/4\@md { width: 50% !important; } .u-3\/4\@md { width: 75% !important; } .u-4\/4\@md { width: 100% !important; } .u-1\/5\@md { width: 20% !important; } .u-2\/5\@md { width: 40% !important; } .u-3\/5\@md { width: 60% !important; } .u-4\/5\@md { width: 80% !important; } .u-5\/5\@md { width: 100% !important; } } @media (min-width: 75em) { .u-1\/1\@lg{ width: 100% !important; } .u-1\/2\@lg{ width: 50% !important; } .u-2\/2\@lg{ width: 100% !important; } .u-1\/3\@lg{ width: 33.333333333% !important; } .u-2\/3\@lg{ width: 66.666666667% !important; } .u-3\/3\@lg{ width: 100% !important; } .u-1\/4\@lg{ width: 25% !important; } .u-2\/4\@lg{ width: 50% !important; } .u-3\/4\@lg{ width: 75% !important; } .u-4\/4\@lg{ width: 100% !important; } .u-1\/5\@lg{ width: 20% !important; } .u-2\/5\@lg{ width: 40% !important; } .u-3\/5\@lg{ width: 60% !important; } .u-4\/5\@lg{ width: 80% !important; } .u-5\/5\@lg{ width: 100% !important; } }