*
* 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.33333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important; }
.u-pull-1\/3 {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */ }
.u-2\/3 {
width: 66.66667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3 {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important; }
.u-pull-2\/3 {
position: relative !important;
right: 66.66667% !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: 34.375em) {
.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.33333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important; }
.u-pull-1\/3\@mobile {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */ }
.u-2\/3\@mobile {
width: 66.66667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@mobile {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important; }
.u-pull-2\/3\@mobile {
position: relative !important;
right: 66.66667% !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] */ } }
@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.33333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important; }
.u-pull-1\/3\@tablet {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */ }
.u-2\/3\@tablet {
width: 66.66667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@tablet {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important; }
.u-pull-2\/3\@tablet {
position: relative !important;
right: 66.66667% !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] */ } }
@media (min-width: 52.5em) {
.u-1\/1\@medium {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/1\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.u-pull-1\/1\@medium {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.u-1\/2\@medium {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/2\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.u-pull-1\/2\@medium {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.u-2\/2\@medium {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/2\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.u-pull-2\/2\@medium {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.u-1\/3\@medium {
width: 33.33333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important; }
.u-pull-1\/3\@medium {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */ }
.u-2\/3\@medium {
width: 66.66667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important; }
.u-pull-2\/3\@medium {
position: relative !important;
right: 66.66667% !important;
left: auto !important;
/* [1] */ }
.u-3\/3\@medium {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/3\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.u-pull-3\/3\@medium {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.u-1\/4\@medium {
width: 25% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/4\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 25% !important; }
.u-pull-1\/4\@medium {
position: relative !important;
right: 25% !important;
left: auto !important;
/* [1] */ }
.u-2\/4\@medium {
width: 50% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/4\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 50% !important; }
.u-pull-2\/4\@medium {
position: relative !important;
right: 50% !important;
left: auto !important;
/* [1] */ }
.u-3\/4\@medium {
width: 75% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/4\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 75% !important; }
.u-pull-3\/4\@medium {
position: relative !important;
right: 75% !important;
left: auto !important;
/* [1] */ }
.u-4\/4\@medium {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/4\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.u-pull-4\/4\@medium {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ }
.u-1\/5\@medium {
width: 20% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/5\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 20% !important; }
.u-pull-1\/5\@medium {
position: relative !important;
right: 20% !important;
left: auto !important;
/* [1] */ }
.u-2\/5\@medium {
width: 40% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/5\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 40% !important; }
.u-pull-2\/5\@medium {
position: relative !important;
right: 40% !important;
left: auto !important;
/* [1] */ }
.u-3\/5\@medium {
width: 60% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-3\/5\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 60% !important; }
.u-pull-3\/5\@medium {
position: relative !important;
right: 60% !important;
left: auto !important;
/* [1] */ }
.u-4\/5\@medium {
width: 80% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-4\/5\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 80% !important; }
.u-pull-4\/5\@medium {
position: relative !important;
right: 80% !important;
left: auto !important;
/* [1] */ }
.u-5\/5\@medium {
width: 100% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-5\/5\@medium {
position: relative !important;
right: auto !important;
/* [1] */
left: 100% !important; }
.u-pull-5\/5\@medium {
position: relative !important;
right: 100% !important;
left: auto !important;
/* [1] */ } }
@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.33333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important; }
.u-pull-1\/3\@desktop {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */ }
.u-2\/3\@desktop {
width: 66.66667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@desktop {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important; }
.u-pull-2\/3\@desktop {
position: relative !important;
right: 66.66667% !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] */ } }
@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.33333% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-1\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 33.33333% !important; }
.u-pull-1\/3\@wide {
position: relative !important;
right: 33.33333% !important;
left: auto !important;
/* [1] */ }
.u-2\/3\@wide {
width: 66.66667% !important; }
/**
* 1. Reset any leftover or conflicting `left`/`right` values.
*/
.u-push-2\/3\@wide {
position: relative !important;
right: auto !important;
/* [1] */
left: 66.66667% !important; }
.u-pull-2\/3\@wide {
position: relative !important;
right: 66.66667% !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] */ } }
/* ===== GUTTER UTILITY =====================================================
Author: Simon Allin | 2017 |
========================================================================== */
/* DOCUMENT INFORMATION
-Use for adding gutters to pages
¦ ¦
⟶⟶¦ ¦⟵⟵
⟶⟶¦ ¦⟵⟵
⟶⟶¦ ¦⟵⟵
⟶⟶¦ ¦⟵⟵
⟶⟶¦ ¦⟵⟵
⟶⟶¦ ¦⟵⟵
¦ ¦
*/
.u-gutter-large {
padding-left: 48px !important;
padding-right: 48px !important; }
.u-gutter-huge {
padding-left: 96px !important;
padding-right: 96px !important; }
.u-gutter-massive {
padding-left: 192px !important;
padding-right: 192px !important; }
.u-gutter-none {
padding-left: 0 !important;
padding-right: 0 !important; }
@media (max-width: 34.365em) {
.u-gutter-large-none\@mobile {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 34.365em) {
.u-gutter-huge-none\@mobile {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 34.365em) {
.u-gutter-massive-none\@mobile {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 34.365em) {
.u-gutter-none-none\@mobile {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 46.24em) {
.u-gutter-large-none\@tablet {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 46.24em) {
.u-gutter-huge-none\@tablet {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 46.24em) {
.u-gutter-massive-none\@tablet {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 46.24em) {
.u-gutter-none-none\@tablet {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 52.49em) {
.u-gutter-large-none\@medium {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 52.49em) {
.u-gutter-huge-none\@medium {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 52.49em) {
.u-gutter-massive-none\@medium {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 52.49em) {
.u-gutter-none-none\@medium {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 61.24em) {
.u-gutter-large-none\@desktop {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 61.24em) {
.u-gutter-huge-none\@desktop {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 61.24em) {
.u-gutter-massive-none\@desktop {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 61.24em) {
.u-gutter-none-none\@desktop {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 81.24em) {
.u-gutter-large-none\@wide {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 81.24em) {
.u-gutter-huge-none\@wide {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 81.24em) {
.u-gutter-massive-none\@wide {
padding-left: 0 !important;
padding-right: 0 !important; } }
@media (max-width: 81.24em) {
.u-gutter-none-none\@wide {
padding-left: 0 !important;
padding-right: 0 !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 {
font-size: 36px !important;
font-size: 2.25rem !important;
line-height: 1.33333 !important; }
.u-h2 {
font-size: 28px !important;
font-size: 1.75rem !important;
line-height: 1.71429 !important; }
.u-h3 {
font-size: 24px !important;
font-size: 1.5rem !important;
line-height: 1 !important; }
.u-h4 {
font-size: 20px !important;
font-size: 1.25rem !important;
line-height: 1.2 !important; }
.u-h5 {
font-size: 18px !important;
font-size: 1.125rem !important;
line-height: 1.33333 !important; }
.u-h6 {
font-size: 16px !important;
font-size: 1rem !important;
line-height: 1.5 !important; }
/* ==========================================================================
#SPACING
========================================================================== */
/**
* 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 {}
*/
/* stylelint-disable string-quotes */
.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-xxl {
padding: 144px !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-xxl {
padding-top: 144px !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-xxl {
padding-right: 144px !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-xxl {
padding-bottom: 144px !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-xxl {
padding-left: 144px !important; }
.u-padding-left-none {
padding-left: 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-xxl {
margin: 144px !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-xxl {
margin-top: 144px !important; }
.u-margin-top-none {
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-xxl {
margin-right: 144px !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-xxl {
margin-bottom: 144px !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-xxl {
margin-left: 144px !important; }
.u-margin-left-none {
margin-left: 0 !important; }
@media (max-width: 34.365em) {
.u-padding-none\@mobile {
padding: 0 !important; } }
@media (max-width: 34.365em) {
.u-padding-top-none\@mobile {
padding-top: 0 !important; } }
@media (max-width: 34.365em) {
.u-padding-right-none\@mobile {
padding-right: 0 !important; } }
@media (max-width: 34.365em) {
.u-padding-bottom-none\@mobile {
padding-bottom: 0 !important; } }
@media (max-width: 34.365em) {
.u-padding-left-none\@mobile {
padding-left: 0 !important; } }
@media (max-width: 34.365em) {
.u-margin-none\@mobile {
margin: 0 !important; } }
@media (max-width: 34.365em) {
.u-margin-top-none\@mobile {
margin-top: 0 !important; } }
@media (max-width: 34.365em) {
.u-margin-right-none\@mobile {
margin-right: 0 !important; } }
@media (max-width: 34.365em) {
.u-margin-bottom-none\@mobile {
margin-bottom: 0 !important; } }
@media (max-width: 34.365em) {
.u-margin-left-none\@mobile {
margin-left: 0 !important; } }
@media (max-width: 46.24em) {
.u-padding-none\@tablet {
padding: 0 !important; } }
@media (max-width: 46.24em) {
.u-padding-top-none\@tablet {
padding-top: 0 !important; } }
@media (max-width: 46.24em) {
.u-padding-right-none\@tablet {
padding-right: 0 !important; } }
@media (max-width: 46.24em) {
.u-padding-bottom-none\@tablet {
padding-bottom: 0 !important; } }
@media (max-width: 46.24em) {
.u-padding-left-none\@tablet {
padding-left: 0 !important; } }
@media (max-width: 46.24em) {
.u-margin-none\@tablet {
margin: 0 !important; } }
@media (max-width: 46.24em) {
.u-margin-top-none\@tablet {
margin-top: 0 !important; } }
@media (max-width: 46.24em) {
.u-margin-right-none\@tablet {
margin-right: 0 !important; } }
@media (max-width: 46.24em) {
.u-margin-bottom-none\@tablet {
margin-bottom: 0 !important; } }
@media (max-width: 46.24em) {
.u-margin-left-none\@tablet {
margin-left: 0 !important; } }
@media (max-width: 52.49em) {
.u-padding-none\@medium {
padding: 0 !important; } }
@media (max-width: 52.49em) {
.u-padding-top-none\@medium {
padding-top: 0 !important; } }
@media (max-width: 52.49em) {
.u-padding-right-none\@medium {
padding-right: 0 !important; } }
@media (max-width: 52.49em) {
.u-padding-bottom-none\@medium {
padding-bottom: 0 !important; } }
@media (max-width: 52.49em) {
.u-padding-left-none\@medium {
padding-left: 0 !important; } }
@media (max-width: 52.49em) {
.u-margin-none\@medium {
margin: 0 !important; } }
@media (max-width: 52.49em) {
.u-margin-top-none\@medium {
margin-top: 0 !important; } }
@media (max-width: 52.49em) {
.u-margin-right-none\@medium {
margin-right: 0 !important; } }
@media (max-width: 52.49em) {
.u-margin-bottom-none\@medium {
margin-bottom: 0 !important; } }
@media (max-width: 52.49em) {
.u-margin-left-none\@medium {
margin-left: 0 !important; } }
@media (max-width: 61.24em) {
.u-padding-none\@desktop {
padding: 0 !important; } }
@media (max-width: 61.24em) {
.u-padding-top-none\@desktop {
padding-top: 0 !important; } }
@media (max-width: 61.24em) {
.u-padding-right-none\@desktop {
padding-right: 0 !important; } }
@media (max-width: 61.24em) {
.u-padding-bottom-none\@desktop {
padding-bottom: 0 !important; } }
@media (max-width: 61.24em) {
.u-padding-left-none\@desktop {
padding-left: 0 !important; } }
@media (max-width: 61.24em) {
.u-margin-none\@desktop {
margin: 0 !important; } }
@media (max-width: 61.24em) {
.u-margin-top-none\@desktop {
margin-top: 0 !important; } }
@media (max-width: 61.24em) {
.u-margin-right-none\@desktop {
margin-right: 0 !important; } }
@media (max-width: 61.24em) {
.u-margin-bottom-none\@desktop {
margin-bottom: 0 !important; } }
@media (max-width: 61.24em) {
.u-margin-left-none\@desktop {
margin-left: 0 !important; } }
@media (max-width: 81.24em) {
.u-padding-none\@wide {
padding: 0 !important; } }
@media (max-width: 81.24em) {
.u-padding-top-none\@wide {
padding-top: 0 !important; } }
@media (max-width: 81.24em) {
.u-padding-right-none\@wide {
padding-right: 0 !important; } }
@media (max-width: 81.24em) {
.u-padding-bottom-none\@wide {
padding-bottom: 0 !important; } }
@media (max-width: 81.24em) {
.u-padding-left-none\@wide {
padding-left: 0 !important; } }
@media (max-width: 81.24em) {
.u-margin-none\@wide {
margin: 0 !important; } }
@media (max-width: 81.24em) {
.u-margin-top-none\@wide {
margin-top: 0 !important; } }
@media (max-width: 81.24em) {
.u-margin-right-none\@wide {
margin-right: 0 !important; } }
@media (max-width: 81.24em) {
.u-margin-bottom-none\@wide {
margin-bottom: 0 !important; } }
@media (max-width: 81.24em) {
.u-margin-left-none\@wide {
margin-left: 0 !important; } }
/* stylelint-enable string-quotes */
/* ==========================================================================
#PRINT
========================================================================== */
/**
* Very crude, reset-like styles taken from the HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
* https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
*/
@media print {
/**
* 1. Black prints faster: http://www.sanbeiji.com/archives/953
*/
*,
*:before,
*:after,
*:first-letter,
*:first-line {
background: transparent !important;
color: #000 !important;
/* [1] */
box-shadow: none !important;
text-shadow: none !important; }
a,
a:visited {
text-decoration: underline; }
a[href]:after {
content: " (" attr(href) ")"; }
abbr[title]:after {
content: " (" attr(title) ")"; }
/**
* Don't show links that are fragment identifiers, or use the `javascript:`
* pseudo protocol.
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""; }
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
/**
* Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group; }
tr,
img {
page-break-inside: avoid; }
img {
max-width: 100% !important; }
p,
h2,
h3 {
orphans: 3;
widows: 3; }
h2,
h3 {
page-break-after: avoid; } }
/* ==========================================================================
#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 {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; }
/**
* Hide visually and from screen readers.
*/
.u-hidden {
display: none !important; }
@media (max-width: 34.365em) {
.u-hidden-visually\@mobile {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (max-width: 46.24em) {
.u-hidden-visually\@tablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (max-width: 52.49em) {
.u-hidden-visually\@medium {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (max-width: 61.24em) {
.u-hidden-visually\@desktop {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (max-width: 81.24em) {
.u-hidden-visually\@wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (min-width: 34.375em) {
.u-hidden-visually-from\@mobile {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (min-width: 46.25em) {
.u-hidden-visually-from\@tablet {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (min-width: 52.5em) {
.u-hidden-visually-from\@medium {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (min-width: 61.25em) {
.u-hidden-visually-from\@desktop {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
@media (min-width: 81.25em) {
.u-hidden-visually-from\@wide {
border: 0 !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
height: 1px !important;
margin: -1px !important;
overflow: hidden !important;
padding: 0 !important;
position: absolute !important;
white-space: nowrap !important;
width: 1px !important; } }
/* ==========================================================================
#REMOVE BORDERS
========================================================================== */
/**
* Utility classes to put atomically remove borders
*
* .u-border-top-none {}
* .u-border-right-none {}
* .u-border-bottom-none {}
* .u-border-left-none {}
*/
.u-border-top-none {
border-top: none !important; }
.u-border-right-none {
border-right: none !important; }
.u-border-bottom-none {
border-bottom: none !important; }
.u-border-left-none {
border-left: none !important; }
html {
/* font-size: 62.5%; */
height: 100%;
margin: 0; }
body {
margin: 0;
padding: 0; }
/*# sourceMappingURL=brand-central.css.map */