li:last-child:after {
display: none; }
/*------------------------------------* $OPTIONS
\*------------------------------------*/
/**
* Link-group nav, used for displaying related options. Extends `.nav--block`
* but could also extend `.nav--fit`. Extend with colours and ‘current states’
* in your theme stylesheet.
*
*
* Demo: jsfiddle.net/inuitcss/vwfaf
*
*/
.options > li > a {
border: 0 solid #ccc;
border-width: 1px;
border-left-width: 0; }
.options > li:first-child > a {
border-left-width: 1px;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.options > li:last-child > a {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
/*------------------------------------* $MEDIA
\*------------------------------------*/
/**
* Place any image- and text-like content side-by-side, as per:
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
* E.g.:
*
*
* Demo: jsfiddle.net/inuitcss/cf4Qs
*
*/
.media, .author, .latest-comments__list {
display: block; }
.media__img, .author__avatar, .latest-comments__avatar {
float: left;
margin-right: 24px;
margin-right: 1.71429rem; }
/**
* Reversed image location (right instead of left).
*/
.media__img--rev {
float: right;
margin-left: 24px;
margin-left: 1.71429rem; }
.media__img img, .author__avatar img, .latest-comments__avatar img,
.media__img--rev img {
display: block; }
.media__body, .author__text, .latest-comments__body {
overflow: hidden; }
.media__body, .author__text, .latest-comments__body,
.media__body > :last-child, .author__text > :last-child, .latest-comments__body > :last-child {
margin-bottom: 0; }
/**
* `.img`s in `.islet`s need an appropriately sized margin.
*/
.islet .media__img, .islet .author__avatar, .islet .latest-comments__avatar {
margin-right: 12px;
margin-right: 0.85714rem; }
.islet .media__img--rev {
margin-left: 12px;
margin-left: 0.85714rem; }
/*------------------------------------* $ISLAND
\*------------------------------------*/
/**
* Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
* E.g.:
*
I am boxed off.
*
* Demo: jsfiddle.net/inuitcss/u8pV3
*
*/
.island, .reviews,
.islet {
display: block; }
.island, .reviews {
padding: 24px;
padding: 1.71429rem; }
.island > :last-child, .reviews > :last-child,
.islet > :last-child {
margin-bottom: 0; }
/**
* Just like `.island`, only smaller.
*/
.islet {
padding: 12px;
padding: 0.85714rem; }
/*------------------------------------* $BLOCK-LIST
\*------------------------------------*/
/**
* Create big blocky lists of content, e.g.:
*
*
* Extend this object in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/hR57q
*
*/
.block-list, .matrix,
.block-list > li, .matrix > li {
border: 0 solid #ccc; }
.block-list, .matrix {
list-style: none;
margin-left: 0;
border-top-width: 1px;
margin-top: -1px; }
.block-list > li, .matrix > li {
border-bottom-width: 1px;
margin-top: -1px;
padding: 12px;
padding: 0.85714rem; }
.block-list__link, .matrix__link {
display: block;
padding: 12px;
padding: 0.85714rem;
margin: -12px;
margin: -0.85714rem; }
/*------------------------------------* $MATRIX
\*------------------------------------*/
/**
* Create a grid of items out of a single list, e.g.:
*
*
* Extend this object in your theme stylesheet.
*
* Demo: jsfiddle.net/inuitcss/Y2zrU
*
*/
.matrix {
border-left-width: 1px; }
.matrix > li {
float: left;
border-right-width: 1px; }
/**
* The `.multi-list` object is a lot like the `.matrix` object only without the
* blocky borders and padding.
*
*
* Demo: jsfiddle.net/inuitcss/Y2zrU
*
*/
.multi-list, .widget_nav_menu ul, .widget_categories ul, .widget_meta ul {
list-style: none;
margin-left: 0; }
.multi-list > li, .widget_nav_menu ul > li, .widget_categories ul > li, .widget_meta ul > li {
float: left; }
/**
* Apply these classes alongside the `.matrix` or `.multi-list` classes on
* lists to determine how wide their columns are.
*/
.two-cols > li, .widget_nav_menu ul > li, .widget_categories ul > li, .widget_meta ul > li {
width: 50%; }
.three-cols > li {
width: 33.333%; }
.four-cols > li {
width: 25%; }
.five-cols > li {
width: 20%; }
/**
* Unfortunately we have to qualify this selector in order to bring its
* specificity above the `.[number]-cols > li` selectors above.
*/
.matrix > .all-cols,
.multi-list > .all-cols, .widget_nav_menu ul > .all-cols, .widget_categories ul > .all-cols, .widget_meta ul > .all-cols {
width: 100%; }
/*------------------------------------* $SPLIT
\*------------------------------------*/
/**
* Simple split item for creating two elements floated away from one another,
* e.g.:
*
- Burger and fries
- £5.99
- Fillet steak
- £19.99
- Ice cream
- £2.99
*
- 1st place Bob
- 2nd place Lilly
- 3rd place Ted
*
* Demo: jsfiddle.net/inuitcss/9gZW7
*
*/
.split {
text-align: right;
list-style: none;
margin-left: 0; }
.split__title {
text-align: left;
float: left;
clear: left; }
/*------------------------------------* $ARROWS
\*------------------------------------*/
/**
* It is a common design treatment to give an element a triangular points-out
* arrow, we typically build these with CSS. These following classes allow us to
* generate these arbitrarily with a mixin, `@arrow()`.
*/
/**
* Forms the basis for any/all CSS arrows.
*/
/**
* Define individual edges so we can combine what we need, when we need.
*/
/*------------------------------------* $BEAUTONS.CSS
\*------------------------------------*/
/*------------------------------------* $BASE
\*------------------------------------*/
/**
* Base button styles.
*
* 1. Allow us to better style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Stop buttons wrapping and looking broken.
* 4. Make buttons inherit font styles.
* 5. Force all elements using beautons to appear clickable.
* 6. Normalise box model styles.
* 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
* there is 1em of space above and below that text. We therefore apply 1em
* of space to the left and right, as padding, to keep consistent spacing.
* 8. Basic cosmetics for default buttons. Change or override at will.
* 9. Don’t allow buttons to have underlines; it kinda ruins the illusion.
*/
.btn, .comments_add-comment, .form-submit #comment-submit, .widget_tag_cloud a {
display: inline-block;
/* [1] */
vertical-align: middle;
/* [2] */
white-space: nowrap;
/* [3] */
font-family: inherit;
/* [4] */
font-size: 100%;
/* [4] */
cursor: pointer;
/* [5] */
border: none;
/* [6] */
margin: 0;
/* [6] */
padding-top: 0;
/* [6] */
padding-bottom: 0;
/* [6] */
line-height: 3;
/* [7] */
padding-right: 1em;
/* [7] */
padding-left: 1em;
/* [7] */
border-radius: 0;
/* [8] */ }
.btn, .comments_add-comment, .form-submit #comment-submit, .widget_tag_cloud a, .btn:hover, .comments_add-comment:hover, .form-submit #comment-submit:hover, .widget_tag_cloud a:hover {
text-decoration: none;
/* [9] */ }
/*------------------------------------* $SIZES
\*------------------------------------*/
.btn--small, .comments_add-comment {
padding-right: 0.5em;
padding-left: 0.5em;
line-height: 2; }
.btn--large {
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 4; }
.btn--huge {
padding-right: 2em;
padding-left: 2em;
line-height: 5; }
.btn--full {
width: 100%;
padding-right: 0;
/* [1] */
padding-left: 0;
/* [1] */
text-align: center; }
/*------------------------------------* $FONT-SIZES
\*------------------------------------*/
/**
* Button font-size modifiers.
*/
.btn--alpha {
font-size: 3rem; }
.btn--beta, .form-submit #comment-submit {
font-size: 2rem; }
.btn--gamma {
font-size: 1rem; }
/**
* Make the button inherit sizing from its parent.
*/
.btn--natural {
vertical-align: baseline;
font-size: inherit;
line-height: inherit;
padding-right: 0.5em;
padding-left: 0.5em; }
/*------------------------------------* $FUNCTIONS
\*------------------------------------*/
/**
* Button function modifiers.
*/
/**
* Positive actions; e.g. sign in, purchase, submit, etc.
*/
.btn--positive {
background-color: #4A993E;
color: #fff; }
/**
* Negative actions; e.g. close account, delete photo, remove friend, etc.
*/
.btn--negative, .widget_tag_cloud a {
background-color: #b33630;
color: #fff; }
/**
* Inactive, disabled buttons.
*
* 1. Make the button look like normal text when hovered.
*/
.btn--inactive,
.btn--inactive:hover,
.btn--inactive:active,
.btn--inactive:focus {
background-color: #ddd;
color: #777;
cursor: text;
/* [1] */ }
/*------------------------------------* $STYLES
\*------------------------------------*/
/**
* Button style modifiers.
*
* 1. Use an overly-large number to ensure completely rounded, pill-like ends.
*/
.btn--soft {
border-radius: 200px;
/* [1] */ }
.btn--hard {
border-radius: 0; }
/*------------------------------------* $LOZENGES
\*------------------------------------*/
/**
* Create pill- and lozenge-like runs of text, e.g.:
*
This here is a pill!
*
This here is also a lozenge!
*
* Pills have fully rounded ends, lozenges have only their corners rounded.
*
* Demo: jsfiddle.net/inuitcss/N3pGm
*
*/
.pill, .loz {
display: inline-block;
/**
* These numbers set in ems mean that, at its narrowest, a lozenge will be
* the same width as the `line-height` set on the `html` element.
* This allows us to use the `.loz` in almost any `font-size` we wish.
*/
min-width: 1.14286em;
padding-right: 0.28571em;
padding-left: 0.28571em;
/* =1.50em */
text-align: center;
background-color: #ccc;
color: #fff;
/* Override this color in your theme stylesheet */
/**
* Normally we’d use border-radius:100%; but instead here we just use an
* overly large number; `border-radius:100%;` would create an oval on
* non-square elements whereas we just want to round the ends of an element.
*/
border-radius: 100px; }
.loz {
border-radius: 0; }
/*------------------------------------* $STATS
\*------------------------------------*/
/**
* Simple object to display key–value statistic-like information, e.g.:
*
- Tweets
- 27,740
- Following
- 11,529
- Followers
- 12,105
*
* Demo: jsfiddle.net/inuitcss/Bpwu6
*
*/
.stat-group {
margin-left: -24px;
margin-left: -1.71429rem; }
.stat {
float: left;
margin-left: 24px;
margin-left: 1.71429rem;
display: flex;
flex-direction: column; }
.stat__title {
order: 2;
-ms-flex-order: 2; }
.stat__value {
margin-left: 0;
order: 1;
-ms-flex-order: 1; }
/*------------------------------------* $GREYBOX
\*------------------------------------*/
/**
* Quickly throw together greybox wireframes. Use in conjunction with other
* inuit.css objects to create simple greybox prototypes, e.g.:
*
Header
*
* The beauty of combining the greyboxing with inuit.css objects is that any
* prototyping can quickly be converted into/used as production code.
*
* For a more complete prototyping framework, consider Adam Whitcroft’s Proto:
* adamwhitcroft.com/proto
*
* Demo: jsfiddle.net/inuitcss/qCXfh/
*
*/
.greybox,
.graybox {
font-size: 12px;
font-size: 0.85714rem;
line-height: 2.01;
font-family: sans-serif;
text-align: center;
background-color: rgba(0, 0, 0, 0.2);
color: #fff; }
.greybox a,
.graybox a {
color: #fff;
text-decoration: underline; }
/**
* All greyboxes will occupy 100% of their parent’s width, but to alter their
* heights we apply incrementally larger line-heights:
*/
.greybox--small,
.graybox--small {
line-height: 48px; }
.greybox--medium,
.graybox--medium {
line-height: 96px; }
.greybox--large,
.graybox--large {
line-height: 192px; }
.greybox--huge,
.graybox--huge {
line-height: 384px; }
.greybox--gigantic,
.graybox--gigantic {
line-height: 768px; }
/**
* Style trumps; helper and brand classes
*/
/*------------------------------------* $WIDTHS
\*------------------------------------*/
/**
* Sizes in human readable format. These are used in conjunction with other
* objects and abstractions found in inuit.css, most commonly the grid system
* and faux flexbox.
*
* We have a mixin to generate our widths and their breakpoint-specific
* variations.
*/
/**
* Whole
*/
.one-whole, .logged-in-as, .comment-form-comment,
.form-submit,
.comment-subscription-form {
width: 100%; }
/**
* Halves
*/
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
width: 50%; }
/**
* Thirds
*/
.one-third, .two-sixths, .four-twelfths, .comment-form-author,
.comment-form-email,
.comment-form-url {
width: 33.333%; }
.two-thirds, .four-sixths, .eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.one-quarter, .two-eighths, .three-twelfths {
width: 25%; }
.three-quarters, .six-eighths, .nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.one-fifth, .two-tenths {
width: 20%; }
.two-fifths, .four-tenths {
width: 40%; }
.three-fifths, .six-tenths {
width: 60%; }
.four-fifths, .eight-tenths {
width: 80%; }
/**
* Sixths
*/
.one-sixth, .two-twelfths {
width: 16.666%; }
.five-sixths, .ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.one-eighth {
width: 12.5%; }
.three-eighths {
width: 37.5%; }
.five-eighths {
width: 62.5%; }
.seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.one-tenth {
width: 10%; }
.three-tenths {
width: 30%; }
.seven-tenths {
width: 70%; }
.nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.one-twelfth {
width: 8.333%; }
.five-twelfths, .featured-area__aside {
width: 41.666%; }
.seven-twelfths, .featured-area .heroslider, .featured-area__article {
width: 58.333%; }
.eleven-twelfths {
width: 91.666%; }
@media only screen and (max-width: 899px) {
/**
* Whole
*/
.palm-one-whole, .featured-area .heroslider, .featured-area__article, .featured-area__aside {
width: 100%; }
/**
* Halves
*/
.palm-one-half, .palm-two-quarters, .palm-three-sixths, .palm-four-eighths, .palm-five-tenths, .palm-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.palm-one-third, .palm-two-sixths, .palm-four-twelfths {
width: 33.333%; }
.palm-two-thirds, .palm-four-sixths, .palm-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.palm-one-quarter, .palm-two-eighths, .palm-three-twelfths {
width: 25%; }
.palm-three-quarters, .palm-six-eighths, .palm-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.palm-one-fifth, .palm-two-tenths {
width: 20%; }
.palm-two-fifths, .palm-four-tenths {
width: 40%; }
.palm-three-fifths, .palm-six-tenths {
width: 60%; }
.palm-four-fifths, .palm-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.palm-one-sixth, .palm-two-twelfths {
width: 16.666%; }
.palm-five-sixths, .palm-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.palm-one-eighth {
width: 12.5%; }
.palm-three-eighths {
width: 37.5%; }
.palm-five-eighths {
width: 62.5%; }
.palm-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.palm-one-tenth {
width: 10%; }
.palm-three-tenths {
width: 30%; }
.palm-seven-tenths {
width: 70%; }
.palm-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.palm-one-twelfth {
width: 8.333%; }
.palm-five-twelfths {
width: 41.666%; }
.palm-seven-twelfths {
width: 58.333%; }
.palm-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 900px) and (max-width: 1023px) {
/**
* Whole
*/
.lap-one-whole {
width: 100%; }
/**
* Halves
*/
.lap-one-half, .lap-two-quarters, .lap-three-sixths, .lap-four-eighths, .lap-five-tenths, .lap-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.lap-one-third, .lap-two-sixths, .lap-four-twelfths {
width: 33.333%; }
.lap-two-thirds, .lap-four-sixths, .lap-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.lap-one-quarter, .lap-two-eighths, .lap-three-twelfths {
width: 25%; }
.lap-three-quarters, .lap-six-eighths, .lap-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.lap-one-fifth, .lap-two-tenths {
width: 20%; }
.lap-two-fifths, .lap-four-tenths {
width: 40%; }
.lap-three-fifths, .lap-six-tenths {
width: 60%; }
.lap-four-fifths, .lap-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.lap-one-sixth, .lap-two-twelfths {
width: 16.666%; }
.lap-five-sixths, .lap-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.lap-one-eighth {
width: 12.5%; }
.lap-three-eighths {
width: 37.5%; }
.lap-five-eighths {
width: 62.5%; }
.lap-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.lap-one-tenth {
width: 10%; }
.lap-three-tenths {
width: 30%; }
.lap-seven-tenths {
width: 70%; }
.lap-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.lap-one-twelfth {
width: 8.333%; }
.lap-five-twelfths {
width: 41.666%; }
.lap-seven-twelfths {
width: 58.333%; }
.lap-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 900px) {
/**
* Whole
*/
.lap-and-up-one-whole {
width: 100%; }
/**
* Halves
*/
.lap-and-up-one-half, .lap-and-up-two-quarters, .lap-and-up-three-sixths, .lap-and-up-four-eighths, .lap-and-up-five-tenths, .lap-and-up-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.lap-and-up-one-third, .lap-and-up-two-sixths, .lap-and-up-four-twelfths {
width: 33.333%; }
.lap-and-up-two-thirds, .lap-and-up-four-sixths, .lap-and-up-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.lap-and-up-one-quarter, .lap-and-up-two-eighths, .lap-and-up-three-twelfths {
width: 25%; }
.lap-and-up-three-quarters, .lap-and-up-six-eighths, .lap-and-up-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.lap-and-up-one-fifth, .lap-and-up-two-tenths {
width: 20%; }
.lap-and-up-two-fifths, .lap-and-up-four-tenths {
width: 40%; }
.lap-and-up-three-fifths, .lap-and-up-six-tenths {
width: 60%; }
.lap-and-up-four-fifths, .lap-and-up-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.lap-and-up-one-sixth, .lap-and-up-two-twelfths {
width: 16.666%; }
.lap-and-up-five-sixths, .lap-and-up-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.lap-and-up-one-eighth {
width: 12.5%; }
.lap-and-up-three-eighths {
width: 37.5%; }
.lap-and-up-five-eighths {
width: 62.5%; }
.lap-and-up-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.lap-and-up-one-tenth {
width: 10%; }
.lap-and-up-three-tenths {
width: 30%; }
.lap-and-up-seven-tenths {
width: 70%; }
.lap-and-up-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.lap-and-up-one-twelfth {
width: 8.333%; }
.lap-and-up-five-twelfths {
width: 41.666%; }
.lap-and-up-seven-twelfths {
width: 58.333%; }
.lap-and-up-eleven-twelfths {
width: 91.666%; } }
@media only screen and (max-width: 1023px) {
/**
* Whole
*/
.portable-one-whole {
width: 100%; }
/**
* Halves
*/
.portable-one-half, .portable-two-quarters, .portable-three-sixths, .portable-four-eighths, .portable-five-tenths, .portable-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.portable-one-third, .portable-two-sixths, .portable-four-twelfths {
width: 33.333%; }
.portable-two-thirds, .portable-four-sixths, .portable-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.portable-one-quarter, .portable-two-eighths, .portable-three-twelfths {
width: 25%; }
.portable-three-quarters, .portable-six-eighths, .portable-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.portable-one-fifth, .portable-two-tenths {
width: 20%; }
.portable-two-fifths, .portable-four-tenths {
width: 40%; }
.portable-three-fifths, .portable-six-tenths {
width: 60%; }
.portable-four-fifths, .portable-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.portable-one-sixth, .portable-two-twelfths {
width: 16.666%; }
.portable-five-sixths, .portable-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.portable-one-eighth {
width: 12.5%; }
.portable-three-eighths {
width: 37.5%; }
.portable-five-eighths {
width: 62.5%; }
.portable-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.portable-one-tenth {
width: 10%; }
.portable-three-tenths {
width: 30%; }
.portable-seven-tenths {
width: 70%; }
.portable-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.portable-one-twelfth {
width: 8.333%; }
.portable-five-twelfths {
width: 41.666%; }
.portable-seven-twelfths {
width: 58.333%; }
.portable-eleven-twelfths {
width: 91.666%; } }
@media only screen and (min-width: 1024px) {
/**
* Whole
*/
.desk-one-whole {
width: 100%; }
/**
* Halves
*/
.desk-one-half, .desk-two-quarters, .desk-three-sixths, .desk-four-eighths, .desk-five-tenths, .desk-six-twelfths {
width: 50%; }
/**
* Thirds
*/
.desk-one-third, .desk-two-sixths, .desk-four-twelfths {
width: 33.333%; }
.desk-two-thirds, .desk-four-sixths, .desk-eight-twelfths {
width: 66.666%; }
/**
* Quarters
*/
.desk-one-quarter, .desk-two-eighths, .desk-three-twelfths {
width: 25%; }
.desk-three-quarters, .desk-six-eighths, .desk-nine-twelfths {
width: 75%; }
/**
* Fifths
*/
.desk-one-fifth, .desk-two-tenths {
width: 20%; }
.desk-two-fifths, .desk-four-tenths {
width: 40%; }
.desk-three-fifths, .desk-six-tenths {
width: 60%; }
.desk-four-fifths, .desk-eight-tenths {
width: 80%; }
/**
* Sixths
*/
.desk-one-sixth, .desk-two-twelfths {
width: 16.666%; }
.desk-five-sixths, .desk-ten-twelfths {
width: 83.333%; }
/**
* Eighths
*/
.desk-one-eighth {
width: 12.5%; }
.desk-three-eighths {
width: 37.5%; }
.desk-five-eighths {
width: 62.5%; }
.desk-seven-eighths {
width: 87.5%; }
/**
* Tenths
*/
.desk-one-tenth {
width: 10%; }
.desk-three-tenths {
width: 30%; }
.desk-seven-tenths {
width: 70%; }
.desk-nine-tenths {
width: 90%; }
/**
* Twelfths
*/
.desk-one-twelfth {
width: 8.333%; }
.desk-five-twelfths {
width: 41.666%; }
.desk-seven-twelfths {
width: 58.333%; }
.desk-eleven-twelfths {
width: 91.666%; } }
/**
* If you have set the additional `$responsive-extra` variable to ‘true’ in
* `_vars.scss` then you now have access to the following class available to
* accomodate much larger screen resolutions.
*/
/* endif */
/*------------------------------------* $PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/**
* Whole
*/
.push--one-whole {
left: 100%; }
/**
* Halves
*/
.push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths {
left: 50%; }
/**
* Thirds
*/
.push--one-third, .push--two-sixths, .push--four-twelfths {
left: 33.333%; }
.push--two-thirds, .push--four-sixths, .push--eight-twelfths {
left: 66.666%; }
/**
* Quarters
