*
* 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, .c-nav {
display: block; /* [1] */
margin: 0; /* [2] */
padding: 0; /* [2] */
list-style: none; /* [1] */
margin-left: -24px; /* [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, .c-nav__menu {
box-sizing: border-box; /* [1] */
display: inline-block; /* [2] */
vertical-align: top; /* [3] */
width: 100%; /* [4] */
padding-left: 24px; /* [5] */
font-size: 16px; /* [6] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item, .o-layout--flush > .c-nav__menu {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -6px;
}
.o-layout--tiny > .o-layout__item, .o-layout--tiny > .c-nav__menu {
padding-left: 6px;
}
.o-layout--small {
margin-left: -12px;
}
.o-layout--small > .o-layout__item, .o-layout--small > .c-nav__menu {
padding-left: 12px;
}
.o-layout--large {
margin-left: -48px;
}
.o-layout--large > .o-layout__item, .o-layout--large > .c-nav__menu {
padding-left: 48px;
}
.o-layout--huge {
margin-left: -96px;
}
.o-layout--huge > .o-layout__item, .o-layout--huge > .c-nav__menu {
padding-left: 96px;
}
/* Vertical alignment modifiers
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle > .o-layout__item, .o-layout--middle > .c-nav__menu {
vertical-align: middle;
}
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom > .o-layout__item, .o-layout--bottom > .c-nav__menu {
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, .c-nav {
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item, .o-layout--stretch > .c-nav__menu, .c-nav > .o-layout__item, .c-nav > .c-nav__menu {
display: flex;
}
.o-layout--stretch.o-layout--center, .o-layout--center.c-nav {
justify-content: center;
}
.o-layout--stretch.o-layout--right, .o-layout--right.c-nav {
justify-content: flex-end;
}
.o-layout--stretch.o-layout--left, .o-layout--left.c-nav {
justify-content: flex-start;
}
.o-layout--stretch.o-layout--space-between, .c-nav {
justify-content: space-between;
}
.o-layout--stretch.o-layout--space-around, .o-layout--space-around.c-nav {
justify-content: space-around;
}
.o-layout--stretch.o-layout--space-evenly, .o-layout--space-evenly.c-nav {
justify-content: space-evenly;
}
/* Fill order modifiers
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
.o-layout--center {
text-align: center;
}
.o-layout--center > .o-layout__item, .o-layout--center > .c-nav__menu {
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, .o-layout--right > .c-nav__menu {
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, .o-layout--left > .c-nav__menu {
text-align: left;
}
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl;
}
.o-layout--reverse > .o-layout__item, .o-layout--reverse > .c-nav__menu {
direction: ltr;
}
/* Auto-widths modifier
========================================================================== */
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.o-layout--auto > .o-layout__item, .o-layout--auto > .c-nav__menu {
width: auto;
}
/* ==========================================================================
#LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
/* ==========================================================================
#RATIO
========================================================================== */
/**
* Create ratio-bound content blocks, to keep media (e.g. images, videos) in
* their correct aspect ratios.
*
* http://alistapart.com/article/creating-intrinsic-ratios-for-video
*
* 1. Default is a 1:1 ratio (i.e. a perfect square).
*/
.o-ratio {
position: relative;
display: block;
}
.o-ratio:before {
content: "";
display: block;
width: 100%;
padding-bottom: 100%; /* [1] */
}
.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
/* Ratio variants.
========================================================================== */
/**
* Generate a series of ratio classes to be used like so:
*
*
*
*/
.o-ratio--2\:1:before {
padding-bottom: 50%;
}
.o-ratio--4\:3:before {
padding-bottom: 75%;
}
.o-ratio--16\:9:before {
padding-bottom: 56.25%;
}
/* Contain modifier.
========================================================================== */
/**
* Only works with image content.
* Contains the image to the boundaries, without cropping or stretching it.
*/
.o-ratio--img-contain > .o-ratio__content:before {
height: auto;
margin: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
/* ==========================================================================
#LIST-FLEX
========================================================================== */
/**
* The list-flex object is a flexbot alternate to inuit's list-inline. It displays a list of items in one line but allows easy vertical alignment.
*/
.o-list-flex, .c-nav__list {
display: flex;
flex-flow: row nowrap;
align-items: center;
margin-left: 0;
list-style: none;
}
.o-list-flex__item, .c-nav__item {
flex: 0 1 auto;
}
/* ==========================================================================
#FLEXBOX
========================================================================== */
/**
* The Flexbox object is a a set of flexbox classes. Use this to make the components you desire.
*/
.o-flex-container, .c-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
}
.o-flex-container--justify__center, .c-nav__list {
justify-content: center;
}
.o-flex-container--justify__right {
justify-content: flex-end;
}
.o-flex-container--justify__left {
justify-content: flex-start;
}
.o-flex-container--justify__space-between {
justify-content: space-between;
}
.o-flex-container--justify__space-around {
justify-content: space-around;
}
.o-flex-container--justify__space-evenly {
justify-content: space-evenly;
}
.o-flex-container--direction__row {
flex-direction: row;
}
.o-flex-container--direction__row-reverse {
flex-direction: row-reverse;
}
.o-flex-container--direction__column {
flex-direction: column;
}
.o-flex-container--direction__column_reverse {
flex-direction: column-reverse;
}
.o-flex-container--wrap__nowrap {
flex-wrap: nowrap;
}
.o-flex-container--wrap__wrap, .c-content {
flex-wrap: wrap;
}
.o-flex-container--wrap__wrap-reverse {
flex-wrap: wrap-reverse;
}
.o-flex-container--align-items__flex-start {
align-items: flex-start;
}
.o-flex-container--align-items__flex-end {
align-items: flex-end;
}
.o-flex-container--align-items__flex-center {
align-items: center;
}
.o-flex-container--align-items__flex-stretch {
align-items: stretch;
}
.o-flex-container--align-items__flex-baseline {
align-items: baseline;
}
.o-flex-container--align-content__flex-start {
align-content: flex-start;
}
.o-flex-container--align-content__flex-end {
align-content: flex-end;
}
.o-flex-container--align-content__flex-center {
align-content: center;
}
.o-flex-container--align-content__flex-stretch {
align-content: stretch;
}
.o-flex-container--align-content__flex-baseline {
align-content: baseline;
}
.o-flex-container--column-gap__none {
column-gap: 0;
}
.o-flex-container--column-gap__tiny {
column-gap: 6px;
}
.o-flex-container--column-gap__small {
column-gap: 12px;
}
.o-flex-container--column-gap__medium, .c-nav__list {
column-gap: 24px;
}
.o-flex-container--column-gap__large {
column-gap: 48px;
}
.o-flex-container--column-gap__huge {
column-gap: 96px;
}
.o-flex-container--row-gap__none {
row-gap: 0;
}
.o-flex-container--row-gap__tiny {
row-gap: 6px;
}
.o-flex-container--row-gap__small {
row-gap: 12px;
}
.o-flex-container--row-gap__medium {
row-gap: 24px;
}
.o-flex-container--row-gap__large {
row-gap: 48px;
}
.o-flex-container--row-gap__huge {
row-gap: 96px;
}
.o-flex-item, .c-img, .c-text, .c-header {
-webkit-box-flex: 1 200px;
-moz-box-flex: 1 200px;
-webkit-flex: 1 200px;
-ms-flex: 1 200px;
flex: 1 200px;
}
.o-flex-item--order1 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.o-flex-item--order2 {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}
.o-flex-item--order3 {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
.o-flex-item--order4 {
-webkit-box-ordinal-group: 4;
-moz-box-ordinal-group: 4;
-ms-flex-order: 4;
-webkit-order: 4;
order: 4;
}
.o-flex-item--order5 {
-webkit-box-ordinal-group: 5;
-moz-box-ordinal-group: 5;
-ms-flex-order: 5;
-webkit-order: 5;
order: 5;
}
.o-flex-item--order6 {
-webkit-box-ordinal-group: 6;
-moz-box-ordinal-group: 6;
-ms-flex-order: 6;
-webkit-order: 6;
order: 6;
}
.o-flex-item--order7 {
-webkit-box-ordinal-group: 7;
-moz-box-ordinal-group: 7;
-ms-flex-order: 7;
-webkit-order: 7;
order: 7;
}
.o-flex-item--order8 {
-webkit-box-ordinal-group: 8;
-moz-box-ordinal-group: 8;
-ms-flex-order: 8;
-webkit-order: 8;
order: 8;
}
.o-flex-item--order9 {
-webkit-box-ordinal-group: 9;
-moz-box-ordinal-group: 9;
-ms-flex-order: 9;
-webkit-order: 9;
order: 9;
}
.o-flex-item--order10 {
-webkit-box-ordinal-group: 10;
-moz-box-ordinal-group: 10;
-ms-flex-order: 10;
-webkit-order: 10;
order: 10;
}
.o-flex-item--order11 {
-webkit-box-ordinal-group: 11;
-moz-box-ordinal-group: 11;
-ms-flex-order: 11;
-webkit-order: 11;
order: 11;
}
.o-flex-item--order12 {
-webkit-box-ordinal-group: 12;
-moz-box-ordinal-group: 12;
-ms-flex-order: 12;
-webkit-order: 12;
order: 12;
}
.o-flex-item--grow1 {
flex-grow: 1;
}
.o-flex-item--grow2 {
flex-grow: 2;
}
.o-flex-item--grow3 {
flex-grow: 3;
}
.o-flex-item--grow4 {
flex-grow: 4;
}
.o-flex-item--grow5 {
flex-grow: 5;
}
.o-flex-item--grow6 {
flex-grow: 6;
}
.o-flex-item--grow7 {
flex-grow: 7;
}
.o-flex-item--grow8 {
flex-grow: 8;
}
.o-flex-item--grow9 {
flex-grow: 9;
}
.o-flex-item--grow10 {
flex-grow: 10;
}
.o-flex-item--grow11 {
flex-grow: 11;
}
.o-flex-item--grow12 {
flex-grow: 12;
}
.o-flex-item--shrink1 {
flex-shrink: 1;
}
.o-flex-item--shrink2 {
flex-shrink: 2;
}
.o-flex-item--shrink3 {
flex-shrink: 3;
}
.o-flex-item--shrink4 {
flex-shrink: 4;
}
.o-flex-item--shrink5 {
flex-shrink: 5;
}
.o-flex-item--shrink6 {
flex-shrink: 6;
}
.o-flex-item--shrink7 {
flex-shrink: 7;
}
.o-flex-item--shrink8 {
flex-shrink: 8;
}
.o-flex-item--shrink9 {
flex-shrink: 9;
}
.o-flex-item--shrink10 {
flex-shrink: 10;
}
.o-flex-item--shrink11 {
flex-shrink: 11;
}
.o-flex-item--shrink12 {
flex-shrink: 12;
}
.o-flex-item--align-self__start {
align-self: flex-start;
}
.o-flex-item--align-self__end {
align-self: flex-end;
}
.o-flex-item--align-self__center {
align-self: center;
}
.o-flex-item--align-self__baseline {
align-self: baseline;
}
.o-flex-item--align-self__stretch {
align-self: stretch;
}
.o-flex-item--flex-auto {
flex: 0 0 auto;
}
.c-article h1,
.c-article h2,
.c-article h3,
.c-article h4,
.c-article h5,
.c-article h6 {
margin-bottom: 12px;
}
.c-article h1 + p,
.c-article h2 + p,
.c-article h3 + p,
.c-article h4 + p,
.c-article h5 + p,
.c-article h6 + p {
margin-top: 0;
}
.c-article p {
margin-bottom: 18px;
}
/* ==========================================================================
#BUTTONS
========================================================================== */
/**
* This is an example component. Extend inuitcss by building your own components
* that make up your UI. Component classes are prefixed with a `c-`.
*/
/**
* 1. Allow us to style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Make buttons inherit font styles (often necessary when styling `input`s as
* buttons).
* 4. Reset/normalize some styles.
* 5. Force all button-styled elements to appear clickable.
*/
.c-btn {
display: inline-block; /* [1] */
vertical-align: middle; /* [2] */
font: inherit; /* [3] */
text-align: center; /* [4] */
margin: 0; /* [4] */
cursor: pointer; /* [5] */
padding: 12px 24px;
transition: all 300ms ease-in-out;
border-radius: 3px;
}
/* Style variants
========================================================================== */
.c-btn--primary {
background-color: #4a8ec2;
}
.c-btn--primary, .c-btn--primary:hover, .c-btn--primary:active, .c-btn--primary:focus {
text-decoration: none; /* [4] */
color: #fff;
}
.c-btn--primary:hover, .c-btn--primary:focus {
background-color: #3774a2;
}
.c-btn--secondary {
background-color: #2f4054;
}
.c-btn--secondary, .c-btn--secondary:hover, .c-btn--secondary:active, .c-btn--secondary:focus {
text-decoration: none;
color: #fff;
}
.c-btn--secondary:hover, .c-btn--secondary:focus {
background-color: #1d2733;
}
.c-btn--tertiary {
background-color: #fff;
color: #4a8ec2;
}
.c-btn--tertiary, .c-btn--tertiary:hover, .c-btn--tertiary:active, .c-btn--tertiary:focus {
text-decoration: none;
color: #4a8ec2;
}
.c-btn--tertiary:hover, .c-btn--tertiary:focus {
color: #3774a2;
}
/* Size variants
========================================================================== */
.c-btn--small {
padding: 6px 12px;
}
.c-btn--large {
padding: 24px 48px;
}
/* Ghost buttons
========================================================================== */
/**
* Ghost buttons have see-through backgrounds and are bordered.
*/
.c-btn--ghost {
border: 2px solid currentColor;
padding: 10px 22px;
}
.c-btn--ghost, .c-btn--ghost:hover, .c-btn--ghost:active, .c-btn--ghost:focus {
background: none;
}
.c-btn--ghost.c-btn--small {
padding: 4px 10px;
}
.c-btn--ghost.c-btn--large {
padding: 22px 46px;
}
.c-btn--ghost.c-btn--primary {
color: #4a8ec2;
}
.c-btn--ghost.c-btn--primary:hover, .c-btn--ghost.c-btn--primary:focus {
color: #3774a2;
}
.c-btn--ghost.c-btn--secondary {
color: #2f4054;
}
.c-btn--ghost.c-btn--secondary:hover, .c-btn--ghost.c-btn--secondary:focus {
color: #1d2733;
}
.c-btn--ghost.c-btn--tertiary {
color: #fff;
}
.c-btn--ghost.c-btn--tertiary:hover, .c-btn--ghost.c-btn--tertiary:focus {
color: #fff;
}
.c-nav {
font-weight: 500;
font-size: 1.5rem;
margin: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 24px;
padding-right: 24px;
}
.c-nav__logo-img {
max-width: 150px;
height: auto;
display: block;
}
.c-nav__menu {
padding: 0;
}
.c-nav__item {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
font-size: 1.5rem;
}
.c-nav__item a {
text-decoration: none;
color: inherit;
}
.c-nav__item a::before {
content: attr(data-content);
font-weight: 600;
visibility: hidden;
height: 0;
overflow: hidden;
display: block;
}
.c-nav__item a:hover, .c-nav__item a:focus {
color: hsl(48, 70%, 67%);
}
.c-nav__item a:hover {
text-shadow: 1px 2px 1px hsla(0, 0%, 100%, 0.2);
font-weight: 600;
transition: text-shadow 0.2s ease, font-weight 0.2s ease;
}
/* ==========================================================================
#BUTTONS
========================================================================== */
/**
* This is an example component. Extend inuitcss by building your own components
* that make up your UI. Component classes are prefixed with a `c-`.
*/
/**
* 1. Allow us to style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Make buttons inherit font styles (often necessary when styling `input`s as
* buttons).
* 4. Reset/normalize some styles.
* 5. Force all button-styled elements to appear clickable.
*/
.c-btn {
display: inline-block; /* [1] */
vertical-align: middle; /* [2] */
font: inherit; /* [3] */
text-align: center; /* [4] */
margin: 0; /* [4] */
cursor: pointer; /* [5] */
padding: 12px 24px;
transition: all 300ms ease-in-out;
border-radius: 3px;
}
/* Style variants
========================================================================== */
.c-btn--primary {
background-color: #4a8ec2;
}
.c-btn--primary, .c-btn--primary:hover, .c-btn--primary:active, .c-btn--primary:focus {
text-decoration: none; /* [4] */
color: #fff;
}
.c-btn--primary:hover, .c-btn--primary:focus {
background-color: #3774a2;
}
.c-btn--secondary {
background-color: #2f4054;
}
.c-btn--secondary, .c-btn--secondary:hover, .c-btn--secondary:active, .c-btn--secondary:focus {
text-decoration: none;
color: #fff;
}
.c-btn--secondary:hover, .c-btn--secondary:focus {
background-color: #1d2733;
}
.c-btn--tertiary {
background-color: #fff;
color: #4a8ec2;
}
.c-btn--tertiary, .c-btn--tertiary:hover, .c-btn--tertiary:active, .c-btn--tertiary:focus {
text-decoration: none;
color: #4a8ec2;
}
.c-btn--tertiary:hover, .c-btn--tertiary:focus {
color: #3774a2;
}
/* Size variants
========================================================================== */
.c-btn--small {
padding: 6px 12px;
}
.c-btn--large {
padding: 24px 48px;
}
/* Ghost buttons
========================================================================== */
/**
* Ghost buttons have see-through backgrounds and are bordered.
*/
.c-btn--ghost {
border: 2px solid currentColor;
padding: 10px 22px;
}
.c-btn--ghost, .c-btn--ghost:hover, .c-btn--ghost:active, .c-btn--ghost:focus {
background: none;
}
.c-btn--ghost.c-btn--small {
padding: 4px 10px;
}
.c-btn--ghost.c-btn--large {
padding: 22px 46px;
}
.c-btn--ghost.c-btn--primary {
color: #4a8ec2;
}
.c-btn--ghost.c-btn--primary:hover, .c-btn--ghost.c-btn--primary:focus {
color: #3774a2;
}
.c-btn--ghost.c-btn--secondary {
color: #2f4054;
}
.c-btn--ghost.c-btn--secondary:hover, .c-btn--ghost.c-btn--secondary:focus {
color: #1d2733;
}
.c-btn--ghost.c-btn--tertiary {
color: #fff;
}
.c-btn--ghost.c-btn--tertiary:hover, .c-btn--ghost.c-btn--tertiary:focus {
color: #fff;
}
.c-section h1,
.c-section h2,
.c-section h3,
.c-section h4,
.c-section h5,
.c-section h6 {
margin-bottom: 12px;
}
.c-section h1 + p,
.c-section h2 + p,
.c-section h3 + p,
.c-section h4 + p,
.c-section h5 + p,
.c-section h6 + p {
margin-top: 0;
}
.c-section p {
margin-bottom: 18px;
}
.c-row {
margin: 0;
padding: 0;
}
.c-divider {
width: 100%;
opacity: 0.4;
margin-top: 24px;
margin-bottom: 24px;
margin-left: 0;
margin-right: 0;
}
.c-content {
padding: 48px;
}
.c-header {
padding-left: 24px;
padding-right: 24px;
width: 100%;
flex: 0 0 100%;
}
.c-text {
flex: 0 0 67%;
padding-left: 24px;
padding-right: 24px;
}
.c-text > p:first-of-type {
margin-top: 0;
}
.c-img {
flex: 0 0 33%;
}
.c-img > img {
border-radius: 15px;
width: 100%;
}
/* ==========================================================================
#CLEARFIX
========================================================================== */
/**
* Attach our clearfix mixin to a utility class.
*/
.u-clearfix:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.u-weight-extralight {
font-weight: 200 !important;
}
.u-weight-light {
font-weight: 300 !important;
}
.u-weight-regular {
font-weight: 400 !important;
}
.u-weight-medium {
font-weight: 500 !important;
}
.u-weight-semibold, a {
font-weight: 600 !important;
}
.u-weight-bold {
font-weight: 700 !important;
}
.u-weight-extrabold {
font-weight: 800 !important;
}
.u-weight-black {
font-weight: 900 !important;
}
.u-max-width-15 {
max-width: 15px !important;
height: auto !important;
}
.u-max-width-25 {
max-width: 25px !important;
height: auto !important;
}
.u-max-width-50 {
max-width: 15px !important;
height: auto !important;
}
.u-max-width-100 {
max-width: 15px !important;
height: auto !important;
}
.u-max-width-125 {
max-width: 125px !important;
height: auto !important;
}
.u-max-width-150 {
max-width: 150px !important;
height: auto !important;
}
.u-max-width-200 {
max-width: 200px !important;
height: auto !important;
}
.u-max-width-300 {
max-width: 300px !important;
height: auto !important;
}
.u-max-width-400 {
max-width: 400px !important;
height: auto !important;
}
.u-max-width-500 {
max-width: 500px !important;
height: auto !important;
}
.u-text-left {
text-align: left !important;
}
.u-text-center {
text-align: center !important;
}
.u-text-right {
text-align: right !important;
}
.u-text-justify {
text-align: justify !important;
}
.u-text-nowrap {
white-space: nowrap !important;
}
.u-jumbo1 {
font-size: 6rem !important;
margin: 0 !important;
}
.u-jumbo2 {
font-size: 3rem !important;
margin: 0.125rem !important;
}
.u-jumbo-txt {
font-size: 1.5rem !important;
}
.u-line-height1 {
line-height: 1 !important;
}
/* ==========================================================================
#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.
*/
/**
* A series of width helper classes that you can use to size things like grid
* systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in
* your markup:
*
*
*
* The following will generate widths helper classes based on the fractions
* defined in the `$inuit-fractions` list.
*/
.u-1\/1 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1 {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-1\/1 {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/2 {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2 {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-1\/2 {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-2\/2 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2 {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-2\/2 {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/3 {
width: 33.3333333333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3 {
position: relative !important;
right: auto !important; /* [1] */
left: 33.3333333333% !important;
}
.u-pull-1\/3 {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important; /* [1] */
}
.u-2\/3 {
width: 66.6666666667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3 {
position: relative !important;
right: auto !important; /* [1] */
left: 66.6666666667% !important;
}
.u-pull-2\/3 {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important; /* [1] */
}
.u-3\/3 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3 {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-3\/3 {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/4 {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4 {
position: relative !important;
right: auto !important; /* [1] */
left: 25% !important;
}
.u-pull-1\/4 {
position: relative !important;
right: 25% !important;
left: auto !important; /* [1] */
}
.u-2\/4 {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4 {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-2\/4 {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-3\/4 {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4 {
position: relative !important;
right: auto !important; /* [1] */
left: 75% !important;
}
.u-pull-3\/4 {
position: relative !important;
right: 75% !important;
left: auto !important; /* [1] */
}
.u-4\/4 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4 {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-4\/4 {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/5 {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5 {
position: relative !important;
right: auto !important; /* [1] */
left: 20% !important;
}
.u-pull-1\/5 {
position: relative !important;
right: 20% !important;
left: auto !important; /* [1] */
}
.u-2\/5 {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5 {
position: relative !important;
right: auto !important; /* [1] */
left: 40% !important;
}
.u-pull-2\/5 {
position: relative !important;
right: 40% !important;
left: auto !important; /* [1] */
}
.u-3\/5 {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5 {
position: relative !important;
right: auto !important; /* [1] */
left: 60% !important;
}
.u-pull-3\/5 {
position: relative !important;
right: 60% !important;
left: auto !important; /* [1] */
}
.u-4\/5 {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5 {
position: relative !important;
right: auto !important; /* [1] */
left: 80% !important;
}
.u-pull-4\/5 {
position: relative !important;
right: 80% !important;
left: auto !important; /* [1] */
}
.u-5\/5 {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5 {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-5\/5 {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
/**
* If we’re using Sass-MQ, automatically generate grid system(s) for each of our
* defined breakpoints, and give them a Responsive Suffix, e.g.:
*
*
*/
@media (min-width: 20em) {
.u-1\/1\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-1\/1\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/2\@mobile {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-1\/2\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-2\/2\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-2\/2\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/3\@mobile {
width: 33.3333333333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 33.3333333333% !important;
}
.u-pull-1\/3\@mobile {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important; /* [1] */
}
.u-2\/3\@mobile {
width: 66.6666666667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 66.6666666667% !important;
}
.u-pull-2\/3\@mobile {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important; /* [1] */
}
.u-3\/3\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-3\/3\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/4\@mobile {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 25% !important;
}
.u-pull-1\/4\@mobile {
position: relative !important;
right: 25% !important;
left: auto !important; /* [1] */
}
.u-2\/4\@mobile {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-2\/4\@mobile {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-3\/4\@mobile {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 75% !important;
}
.u-pull-3\/4\@mobile {
position: relative !important;
right: 75% !important;
left: auto !important; /* [1] */
}
.u-4\/4\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-4\/4\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/5\@mobile {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 20% !important;
}
.u-pull-1\/5\@mobile {
position: relative !important;
right: 20% !important;
left: auto !important; /* [1] */
}
.u-2\/5\@mobile {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 40% !important;
}
.u-pull-2\/5\@mobile {
position: relative !important;
right: 40% !important;
left: auto !important; /* [1] */
}
.u-3\/5\@mobile {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 60% !important;
}
.u-pull-3\/5\@mobile {
position: relative !important;
right: 60% !important;
left: auto !important; /* [1] */
}
.u-4\/5\@mobile {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 80% !important;
}
.u-pull-4\/5\@mobile {
position: relative !important;
right: 80% !important;
left: auto !important; /* [1] */
}
.u-5\/5\@mobile {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@mobile {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-5\/5\@mobile {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-push-none\@mobile {
left: auto !important;
}
.u-pull-none\@mobile {
right: auto !important;
}
}
@media (min-width: 46.25em) {
.u-1\/1\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-1\/1\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/2\@tablet {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-1\/2\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-2\/2\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-2\/2\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/3\@tablet {
width: 33.3333333333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 33.3333333333% !important;
}
.u-pull-1\/3\@tablet {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important; /* [1] */
}
.u-2\/3\@tablet {
width: 66.6666666667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 66.6666666667% !important;
}
.u-pull-2\/3\@tablet {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important; /* [1] */
}
.u-3\/3\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-3\/3\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/4\@tablet {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 25% !important;
}
.u-pull-1\/4\@tablet {
position: relative !important;
right: 25% !important;
left: auto !important; /* [1] */
}
.u-2\/4\@tablet {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-2\/4\@tablet {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-3\/4\@tablet {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 75% !important;
}
.u-pull-3\/4\@tablet {
position: relative !important;
right: 75% !important;
left: auto !important; /* [1] */
}
.u-4\/4\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-4\/4\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/5\@tablet {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 20% !important;
}
.u-pull-1\/5\@tablet {
position: relative !important;
right: 20% !important;
left: auto !important; /* [1] */
}
.u-2\/5\@tablet {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 40% !important;
}
.u-pull-2\/5\@tablet {
position: relative !important;
right: 40% !important;
left: auto !important; /* [1] */
}
.u-3\/5\@tablet {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 60% !important;
}
.u-pull-3\/5\@tablet {
position: relative !important;
right: 60% !important;
left: auto !important; /* [1] */
}
.u-4\/5\@tablet {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 80% !important;
}
.u-pull-4\/5\@tablet {
position: relative !important;
right: 80% !important;
left: auto !important; /* [1] */
}
.u-5\/5\@tablet {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@tablet {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-5\/5\@tablet {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-push-none\@tablet {
left: auto !important;
}
.u-pull-none\@tablet {
right: auto !important;
}
}
@media (min-width: 61.25em) {
.u-1\/1\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-1\/1\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/2\@desktop {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-1\/2\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-2\/2\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-2\/2\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/3\@desktop {
width: 33.3333333333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 33.3333333333% !important;
}
.u-pull-1\/3\@desktop {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important; /* [1] */
}
.u-2\/3\@desktop {
width: 66.6666666667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 66.6666666667% !important;
}
.u-pull-2\/3\@desktop {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important; /* [1] */
}
.u-3\/3\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-3\/3\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/4\@desktop {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 25% !important;
}
.u-pull-1\/4\@desktop {
position: relative !important;
right: 25% !important;
left: auto !important; /* [1] */
}
.u-2\/4\@desktop {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-2\/4\@desktop {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-3\/4\@desktop {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 75% !important;
}
.u-pull-3\/4\@desktop {
position: relative !important;
right: 75% !important;
left: auto !important; /* [1] */
}
.u-4\/4\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-4\/4\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/5\@desktop {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 20% !important;
}
.u-pull-1\/5\@desktop {
position: relative !important;
right: 20% !important;
left: auto !important; /* [1] */
}
.u-2\/5\@desktop {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 40% !important;
}
.u-pull-2\/5\@desktop {
position: relative !important;
right: 40% !important;
left: auto !important; /* [1] */
}
.u-3\/5\@desktop {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 60% !important;
}
.u-pull-3\/5\@desktop {
position: relative !important;
right: 60% !important;
left: auto !important; /* [1] */
}
.u-4\/5\@desktop {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 80% !important;
}
.u-pull-4\/5\@desktop {
position: relative !important;
right: 80% !important;
left: auto !important; /* [1] */
}
.u-5\/5\@desktop {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@desktop {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-5\/5\@desktop {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-push-none\@desktop {
left: auto !important;
}
.u-pull-none\@desktop {
right: auto !important;
}
}
@media (min-width: 81.25em) {
.u-1\/1\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-1\/1\@wide {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/2\@wide {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-1\/2\@wide {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-2\/2\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-2\/2\@wide {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/3\@wide {
width: 33.3333333333% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 33.3333333333% !important;
}
.u-pull-1\/3\@wide {
position: relative !important;
right: 33.3333333333% !important;
left: auto !important; /* [1] */
}
.u-2\/3\@wide {
width: 66.6666666667% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 66.6666666667% !important;
}
.u-pull-2\/3\@wide {
position: relative !important;
right: 66.6666666667% !important;
left: auto !important; /* [1] */
}
.u-3\/3\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-3\/3\@wide {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/4\@wide {
width: 25% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 25% !important;
}
.u-pull-1\/4\@wide {
position: relative !important;
right: 25% !important;
left: auto !important; /* [1] */
}
.u-2\/4\@wide {
width: 50% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 50% !important;
}
.u-pull-2\/4\@wide {
position: relative !important;
right: 50% !important;
left: auto !important; /* [1] */
}
.u-3\/4\@wide {
width: 75% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 75% !important;
}
.u-pull-3\/4\@wide {
position: relative !important;
right: 75% !important;
left: auto !important; /* [1] */
}
.u-4\/4\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-4\/4\@wide {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-1\/5\@wide {
width: 20% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 20% !important;
}
.u-pull-1\/5\@wide {
position: relative !important;
right: 20% !important;
left: auto !important; /* [1] */
}
.u-2\/5\@wide {
width: 40% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 40% !important;
}
.u-pull-2\/5\@wide {
position: relative !important;
right: 40% !important;
left: auto !important; /* [1] */
}
.u-3\/5\@wide {
width: 60% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 60% !important;
}
.u-pull-3\/5\@wide {
position: relative !important;
right: 60% !important;
left: auto !important; /* [1] */
}
.u-4\/5\@wide {
width: 80% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 80% !important;
}
.u-pull-4\/5\@wide {
position: relative !important;
right: 80% !important;
left: auto !important; /* [1] */
}
.u-5\/5\@wide {
width: 100% !important;
}
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@wide {
position: relative !important;
right: auto !important; /* [1] */
left: 100% !important;
}
.u-pull-5\/5\@wide {
position: relative !important;
right: 100% !important;
left: auto !important; /* [1] */
}
.u-push-none\@wide {
left: auto !important;
}
.u-pull-none\@wide {
right: auto !important;
}
}
/* ==========================================================================
#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, .c-header {
font-size: 41px !important;
font-size: 2.5625rem !important;
line-height: 1.5 !important;
}
.u-h2 {
font-size: 32px !important;
font-size: 2rem !important;
line-height: 1.5 !important;
}
.u-h3 {
font-size: 27px !important;
font-size: 1.6875rem !important;
line-height: 1.5 !important;
}
.u-h4 {
font-size: 23px !important;
font-size: 1.4375rem !important;
line-height: 1.5 !important;
}
.u-h5 {
font-size: 20px !important;
font-size: 1.25rem !important;
line-height: 1.5 !important;
}
.u-h6 {
font-size: 18px !important;
font-size: 1.125rem !important;
line-height: 1.5 !important;
}
/* ==========================================================================
#SPACINGS
========================================================================== */
/**
* Utility classes to put specific spacing values onto elements. The below loop
* will generate us a suite of classes like:
*
* .u-margin-top {}
* .u-padding-left-large {}
* .u-margin-right-small {}
* .u-padding {}
* .u-padding-right-none {}
* .u-padding-horizontal {}
* .u-padding-vertical-small {}
*/
.u-padding {
padding: 24px !important;
}
.u-padding-tiny {
padding: 6px !important;
}
.u-padding-small {
padding: 12px !important;
}
.u-padding-large {
padding: 48px !important;
}
.u-padding-huge {
padding: 96px !important;
}
.u-padding-none {
padding: 0 !important;
}
.u-padding-top {
padding-top: 24px !important;
}
.u-padding-top-tiny {
padding-top: 6px !important;
}
.u-padding-top-small {
padding-top: 12px !important;
}
.u-padding-top-large {
padding-top: 48px !important;
}
.u-padding-top-huge {
padding-top: 96px !important;
}
.u-padding-top-none {
padding-top: 0 !important;
}
.u-padding-right {
padding-right: 24px !important;
}
.u-padding-right-tiny {
padding-right: 6px !important;
}
.u-padding-right-small {
padding-right: 12px !important;
}
.u-padding-right-large {
padding-right: 48px !important;
}
.u-padding-right-huge {
padding-right: 96px !important;
}
.u-padding-right-none {
padding-right: 0 !important;
}
.u-padding-bottom {
padding-bottom: 24px !important;
}
.u-padding-bottom-tiny {
padding-bottom: 6px !important;
}
.u-padding-bottom-small {
padding-bottom: 12px !important;
}
.u-padding-bottom-large {
padding-bottom: 48px !important;
}
.u-padding-bottom-huge {
padding-bottom: 96px !important;
}
.u-padding-bottom-none {
padding-bottom: 0 !important;
}
.u-padding-left {
padding-left: 24px !important;
}
.u-padding-left-tiny {
padding-left: 6px !important;
}
.u-padding-left-small {
padding-left: 12px !important;
}
.u-padding-left-large {
padding-left: 48px !important;
}
.u-padding-left-huge {
padding-left: 96px !important;
}
.u-padding-left-none {
padding-left: 0 !important;
}
.u-padding-horizontal {
padding-left: 24px !important;
padding-right: 24px !important;
}
.u-padding-horizontal-tiny {
padding-left: 6px !important;
padding-right: 6px !important;
}
.u-padding-horizontal-small {
padding-left: 12px !important;
padding-right: 12px !important;
}
.u-padding-horizontal-large {
padding-left: 48px !important;
padding-right: 48px !important;
}
.u-padding-horizontal-huge {
padding-left: 96px !important;
padding-right: 96px !important;
}
.u-padding-horizontal-none {
padding-left: 0 !important;
padding-right: 0 !important;
}
.u-padding-vertical {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
.u-padding-vertical-tiny {
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.u-padding-vertical-small {
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.u-padding-vertical-large {
padding-top: 48px !important;
padding-bottom: 48px !important;
}
.u-padding-vertical-huge {
padding-top: 96px !important;
padding-bottom: 96px !important;
}
.u-padding-vertical-none {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.u-margin {
margin: 24px !important;
}
.u-margin-tiny {
margin: 6px !important;
}
.u-margin-small {
margin: 12px !important;
}
.u-margin-large {
margin: 48px !important;
}
.u-margin-huge {
margin: 96px !important;
}
.u-margin-none {
margin: 0 !important;
}
.u-margin-top {
margin-top: 24px !important;
}
.u-margin-top-tiny {
margin-top: 6px !important;
}
.u-margin-top-small {
margin-top: 12px !important;
}
.u-margin-top-large {
margin-top: 48px !important;
}
.u-margin-top-huge {
margin-top: 96px !important;
}
.u-margin-top-none, .c-header {
margin-top: 0 !important;
}
.u-margin-right {
margin-right: 24px !important;
}
.u-margin-right-tiny {
margin-right: 6px !important;
}
.u-margin-right-small {
margin-right: 12px !important;
}
.u-margin-right-large {
margin-right: 48px !important;
}
.u-margin-right-huge {
margin-right: 96px !important;
}
.u-margin-right-none {
margin-right: 0 !important;
}
.u-margin-bottom {
margin-bottom: 24px !important;
}
.u-margin-bottom-tiny {
margin-bottom: 6px !important;
}
.u-margin-bottom-small {
margin-bottom: 12px !important;
}
.u-margin-bottom-large {
margin-bottom: 48px !important;
}
.u-margin-bottom-huge {
margin-bottom: 96px !important;
}
.u-margin-bottom-none {
margin-bottom: 0 !important;
}
.u-margin-left {
margin-left: 24px !important;
}
.u-margin-left-tiny {
margin-left: 6px !important;
}
.u-margin-left-small {
margin-left: 12px !important;
}
.u-margin-left-large {
margin-left: 48px !important;
}
.u-margin-left-huge {
margin-left: 96px !important;
}
.u-margin-left-none {
margin-left: 0 !important;
}
.u-margin-horizontal {
margin-left: 24px !important;
margin-right: 24px !important;
}
.u-margin-horizontal-tiny {
margin-left: 6px !important;
margin-right: 6px !important;
}
.u-margin-horizontal-small {
margin-left: 12px !important;
margin-right: 12px !important;
}
.u-margin-horizontal-large {
margin-left: 48px !important;
margin-right: 48px !important;
}
.u-margin-horizontal-huge {
margin-left: 96px !important;
margin-right: 96px !important;
}
.u-margin-horizontal-none {
margin-left: 0 !important;
margin-right: 0 !important;
}
.u-margin-vertical {
margin-top: 24px !important;
margin-bottom: 24px !important;
}
.u-margin-vertical-tiny {
margin-top: 6px !important;
margin-bottom: 6px !important;
}
.u-margin-vertical-small {
margin-top: 12px !important;
margin-bottom: 12px !important;
}
.u-margin-vertical-large {
margin-top: 48px !important;
margin-bottom: 48px !important;
}
.u-margin-vertical-huge {
margin-top: 96px !important;
margin-bottom: 96px !important;
}
.u-margin-vertical-none {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/*# sourceMappingURL=main.css.map */