/*
Grid System

Descritpion

Styleguide: Layouts

Weight: 0

*/
/*
Media Breakpoints

We have 5 breakpoints which correspond with media query width ranges for screens. They can be combined with other modifiers.
  * xsmall - 0px
  * small -  480px
  * medium - 768px
  * large - 1024px
  * xlarge - 1440px

Grid is based on <strong>Zurb Foundation</strong>. Foundation is mobile-first. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary.


Weight: -5

Styleguide: Layouts.MediaBreakpoints
*/
/*
Grid

Grid is based on 12 columns fluid layout system. Start by adding an element with a class of `.row`. This will create a horizontal block to contain vertical columns. Then add divs with a `.columns` class within that row. Specify the widths of each column with the `.xsmall-#`, `.small-#`, `.medium-#`, `.large-#`, and `.xlarge-#` classes. For example to create a 2 column grid taking 8/12 and 4/12 of the screen, use `.xsmall-8` and `.xsmall-4` classes. The meaning of `.xsmall-8` is 'apply 8/12 width for this element starting from `.xsmall` breakpoint'. The default column width is 100% (12/12). Using `.medium-6` means: 'apply 6/12 width for element, starting from `medium` breakpoint. For smaller screens apply 100%.'.

Markup:
<div class="row">
  <div class="xsmall-8 columns"></div>
  <div class="xsmall-4 columns"></div>
</div>
<div class="row">
  <div class="medium-6 columns"></div>
  <div class="medium-6 columns"></div>
</div>

Styleguide: Layouts.Grids
*/
/*
Screen size

As mentioned above, you can define grid behavior for up to 5 screen width ranges.

Weight: -10

Styleguide: Layouts.Grids.Sizing
*/
/*
Smallest Grid

Small grids expand to large screens easier than large grids cram into small screens. Use `.xsmall-#` to describe smallest screens.

Markup:
<div class="row">
  <div class="xsmall-2 columns"><span>2 columns</span></div>
  <div class="xsmall-10 columns"><span>10 columns</span></div>
</div>
<div class="row">
  <div class="xsmall-9 columns"><span>9 columns</span></div>
  <div class="xsmall-3 columns"><span>3 columns</span></div>
</div>

Weight: -9

Styleguide: Layouts.Grids.Sizing.Smallest
*/
/*
Small Grid

To describe small screens larger than `xsmall`, use `.small-#` classes.

Markup:
<div class="row">
  <div class="small-2 columns"><span>2 columns</span></div>
  <div class="small-10 columns"><span>10 columns</span></div>
</div>
<div class="row">
  <div class="small-9 columns"><span>9 columns</span></div>
  <div class="small-3 columns"><span>3 columns</span></div>
</div>

Weight: -8

Styleguide Layouts.Grids.Sizing.Small
*/
/*
Medium Grid

Use `.medium-#` classes to describe medium screens.

Markup:
<div class="row">
  <div class="medium-2 columns"><span>2 columns</span></div>
  <div class="medium-10 columns"><span>10 columns</span></div>
</div>
<div class="row">
  <div class="medium-9 columns"><span>9 columns</span></div>
  <div class="medium-3 columns"><span>3 columns</span></div>
</div>

Weight: -7

Styleguide: Layouts.Grids.Sizing.Medium
*/
/*
Large Grid

Use `.large-#` classes to describe large screens.

Markup:
<div class="row">
  <div class="large-2 columns"><span>2 columns</span></div>
  <div class="large-10 columns"><span>10 columns</span></div>
</div>
<div class="row">
  <div class="large-9 columns"><span>9 columns</span></div>
  <div class="large-3 columns"><span>3 columns</span></div>
</div>

Weight: -6

Styleguide: Layouts.Grids.Sizing.Large
*/
/*
Extra Large Grid

Use `.xlarge-#` classes to describe largest screens.

Markup:
<div class="row">
  <div class="xlarge-2 columns"><span>2 columns</span></div>
  <div class="xlarge-10 columns"><span>10 columns</span></div>
</div>
<div class="row">
  <div class="xlarge-9 columns"><span>9 columns</span></div>
  <div class="xlarge-3 columns"><span>3 columns</span></div>
</div>

Weight: -5

Styleguide: Layouts.Grids.Sizing.ExtraLarge
*/
/*
Responsiveness

Grid is responsive. You can attach more than one column classes to achieve desired behavior. Have in mind that FIFA is mobile first. First column in followed example will take:
  * 12/12 for screens 0 - 479px wide
  * 3/12 for screens 480px - 767px wide
  * 2/12 for screens 768px - 1439px wide
  * 1/12 for screens 1440px and wider

Markup:
<div class="row">
  <div class="xsmall-12 small-3 medium-2 xlarge-1 columns"></div>
  <div class="xsmall-12 small-9 medium-10 xlarge-11 columns"></div>
</div>

Weight: -4

Styleguide: Layouts.Grids.Responsiveness
*/
/*
Collapse/Uncollapse Rows

The `.collapse` class lets you remove column gutters (padding).

There are times when you won't want each media query to be collapsed or uncollapsed. In this case, use the media query size you want and `.collapse` or `.uncollapse` and add that to your row element. Last example removes the gutter at the large breakpoint and then adds the gutter to columns at medium and small.

Markup:
<div class="row">
  <div class="xsmall-8 columns"></div>
  <div class="xsmall-4 columns"></div>
</div>
<div class="row collapse">
  <div class="xsmall-8 columns"></div>
  <div class="xsmall-4 columns"></div>
</div>
<div class="row medium-uncollapse large-collapse">
    <div class="small-6 columns"></div>
    <div class="small-6 columns"></div>
</div>

Styleguide: Layouts.Grids.Collapse
*/
/*
Offsets

Move blocks up to 11 columns to the right by using classes like `.large-offset-1`, `.small-offset-3`, etc...

Markup:
<div class="row collapse">
  <div class="large-1 columns"><span>1</span></div>
  <div class="large-11 columns"><span>11</span></div>
</div>
<div class="row">
  <div class="large-1 columns"><span>1</span></div>
  <div class="large-10 large-offset-1 columns"><span>10, offset 1</span></div>
</div>
<div class="row">
  <div class="large-1 columns"><span>1</span></div>
  <div class="large-9 large-offset-2 columns"><span>9, offset 2</span></div>
</div>
<div class="row">
  <div class="large-1 columns"><span>1</span></div>
  <div class="large-8 large-offset-3 columns"><span>8, offset 3</span></div>
</div>


Styleguide: Layouts.Grids.Offsets
*/
/*
Incomplete Rows

In order to work around browsers' different rounding behaviors, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with a class of `.end` in order to override that behavior.

Markup:
<div class="row collapse">
  <div class="medium-3 columns"><span>3</span></div>
  <div class="medium-3 columns"><span>3</span></div>
  <div class="medium-3 columns"><span>3</span></div>
</div>
<div class="row collapse">
  <div class="medium-3 columns"><span>3</span></div>
  <div class="medium-3 columns"><span>3</span></div>
  <div class="medium-3 columns end"><span>3 end</span></div>
</div>


Styleguide: Layouts.Grids.IncompleteRows
*/
/*
Centered Columns

Center your columns by adding a class of `.small-centered` to your `.columns`. Large will inherit small centering by default, but you can also center solely on large by applying a `.large-centered` class. To uncenter on large screens use `.large-uncentered`.

Markup:
<div class="row">
  <div class="small-3 small-centered columns"><span>3 centered</span></div>
</div>
<div class="row">
  <div class="small-6 large-centered columns"><span>6 centered</span></div>
</div>
<div class="row">
  <div class="small-9 small-centered large-uncentered columns"><span>9 centered</span></div>
</div>
<div class="row">
  <div class="small-11 small-centered columns"><span>11 centered</span></div>
</div>

Weight: 1

Styleguide: Layouts.Grids.CenteredColumns
*/
/*
Source Ordering

Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. `.medium-push-#`, `.large-push-#` is the syntax you'll use. Use `.large-reset-order` to reset pushed or pulled columns to their original position on large screens.

Markup:
<div class="row">
  <div class="small-10 small-push-2 columns"><span>10</span></div>
  <div class="small-2 small-pull-10 columns"><span>2, last</span></div>
</div>
<div class="row">
  <div class="large-9 large-push-3 columns"><span>9</span></div>
  <div class="large-3 large-pull-9 columns"><span>3, last</span></div>
</div>
<div class="row">
  <div class="large-8 large-push-4 columns"><span>8</span></div>
  <div class="large-4 large-pull-8 columns"><span>4, last</span></div>
</div>
<div class="row">
  <div class="small-5 small-push-7 medium-7 medium-push-5 columns"><span>7</span></div>
  <div class="small-7 small-pull-5 medium-5 medium-pull-7 columns"><span>5, last</span></div>
</div>
<div class="row">
  <div class="medium-6 medium-push-6 columns"><span>6</span></div>
  <div class="medium-6 medium-pull-6 columns"><span>6, last</span></div>
</div>

Weight: 2

Styleguide: Layouts.Grids.SourceOrdering
*/
/*
Block Grid

Add a class of the format `[size]-up-[n]` to change the size of all columns within the row. By default, the max number of columns you can use with block grid are 8. It can be combined with `.collapse`.

Markup:
<div class="row xsmall-up-1 small-up-2 medium-up-3 large-up-4">
  <div class="columns"></div>
  <div class="columns"></div>
  <div class="columns"><span style="height: 100px">Content taking more space</span></div>
  <div class="columns"></div>
  <div class="columns"></div>
  <div class="columns"></div>
</div>

Weight: 2

Styleguide: Layouts.Grids.BlockGrid
*/
/*
Visibility Classes

Visibility classes let you show or hide elements based on screen size or device orientation. You can also use visibility classes to control which elements users see depending on their browsing environment.<br/><br/>
Visibility classes use `!important` to ensure they aren't overriden by more specific selectors. This is the only component in the framework that uses `!important`.



Styleguide: Layouts.Visibility
*/
/*
Show by Screen Size

In this example, we use the `.show` visibility classes to show certain strings of text based on the device on which users view a page. If their browser meets the class's conditions, the element will be shown. If not, it will be hidden.

These classes automatically hide the element on screen sizes below what's specified in the class. So `.show-for-medium` will hide the element on small, and show it on medium and larger.

A separate set of classes allow you to show content only on a certain screen size. Just add `-only` to the end of the class.

Markup:
<p>You are on a xsmall screen or larger.</p>
<p class="show-for-small">You are on a small screen or larger.</p>
<p class="show-for-medium">You are on a medium screen or larger.</p>
<p class="show-for-large">You are on a large screen or larger.</p>
<p class="show-for-small-only">You are <em>definitely</em> on a small screen.</p>
<p class="show-for-medium-only">You are <em>definitely</em> on a medium screen.</p>
<p class="show-for-large-only">You are <em>definitely</em> on a large screen.</p>
<p class="show-for-xlarge-only">You are <em>definitely</em> on a xlarge screen.</p>

Weight: -10

Styleguide: Layouts.Visibility.Show
*/
/*
Hide by Screen Size

This example shows the opposite: It uses the `.hide` visibility classes to state which elements should disappear based on the device's screen size.

There's no `.hide-for-xsmall` class, because that would just permanently hide the element. For that, you can use `.hide` class instead.

Like with `.show`, these classes also have `-only` versions.

Markup:
<p class="hide-for-small">You are <em>not</em> on a small screen or larger.</p>
<p class="hide-for-medium">You are <em>not</em> on a medium screen or larger.</p>
<p class="hide-for-large">You are <em>not</em> on a large screen or larger.</p>
<p class="hide-for-xlarge">You are <em>not</em> on a xlarge screen or larger.</p>
<p class="hide-for-xsmall-only">You are <em>definitely not</em> on a xsmall screen.</p>
<p class="hide-for-small-only">You are <em>definitely not</em> on a small screen.</p>
<p class="hide-for-medium-only">You are <em>definitely not</em> on a medium screen.</p>
<p class="hide-for-large-only">You are <em>definitely not</em> on a large screen.</p>
<p class="hide-for-xlarge-only">You are <em>definitely not</em> on a xlarge screen.</p>

Weight: -9

Styleguide: Layouts.Visibility.Hide
*/
/*
Generic Hide Classes

And if you really just need something hidden no matter what, there are classes for that as well. The `.hide` and `.invisible` classes respectively set `display: none` and `visibility: hidden` on an element. Note that both of these classes hide content from screen readers.

Markup:
<p class="hide">Can't touch this.</p>
<p class="invisible">Can sort of touch this.</p>

Weight: -8

Styleguide: Layouts.Visibility.Generic
*/
/*
Orientation Detection

This straightforward example shows how two strings of text determine whether or not an element is visible in different orientations. This will change on mobile devices when you rotate the device. On desktop, the orientation is almost always reported as landscape.

Markup:
<p class="show-for-landscape">You are in landscape orientation.</p>
<p class="show-for-portrait">You are in portrait orientation.</p>

Weight: -7

Styleguide: Layouts.Visibility.Orientation
*/
/*
Accessibility

Adding `display: none` to an element will prevent screen readers from reading it. However, there are techniques to hide content while still making it readable by screen readers.

Weight: 5

Styleguide: Layouts.Accessibility
*/
/*
Show for Screen Readers Only

To visually hide content, while still allowing assistive technology to read it, add the class `.show-for-sr`.

Markup:
<p class="show-for-sr">This text can only be read by a screen reader.</p>
<p>There's a line of text above this one, you just can't see it.</p>

Weight: 0

Styleguide: Layouts.Accessibility.Show
*/
/*
Hide for Screen Readers Only

To hide text from assistive technology, while still keeping it visible, add the attribute `aria-hidden="true"`. This doesn't affect how the element looks, but screen readers will skip over it.

Markup:
<p aria-hidden="true">This text can be seen, but won't be read by a screen reader.</p>

Weight: 1

Styleguide: Layouts.Accessibility.Hide
*/
/*
Creating Skip Links

If your site has a lot of navigation, a screen reader will have to read through the entire navigation to get to your site's content. To remedy this, you can add a skip link at the very top of your page, which will send the user farther down the page, past the navigation when clicked on.

Use the class `.show-on-focus` to hide an element, except when it has focus. Adding `tabindex="0"` to the target element makes if focusable.

Markup:
<p><a class="show-on-focus" href="#mainContent">Skip to Content</a></p>
<header id="header" role="banner"></header>
<main id="mainContent" role="main" tabindex="0"></main>

Weight: 2

Styleguide: Layouts.Accessibility.SkipLink
*/
/*
xsmall-{column_number}
xsmall-push-{column_number}
xsmall-pull-{column_number}
xsmall-offset-{column_number}

xsmall-up-{column_number} .columns
xsmall-up-{column_number} .column

row.xsmall-collapse > .column
row.xsmall-collapse > .columns

xsmall-centered
xsmall-centered.columns
xsmall-uncenter

xsmall-text-left
xsmall-text-right
xsmall-text-center
xsmall-text-justify

row.xsmall-collapse
row.xsmall-uncollapse
*/
.row {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto; }
  .row::before, .row::after {
    content: ' ';
    display: table; }
  .row::after {
    clear: both; }
  .row.collapse > .column, .row.collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .row .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem; }
    .row .row.collapse {
      margin-left: 0;
      margin-right: 0; }
  .row.expanded {
    max-width: none; }
    .row.expanded .row {
      margin-left: auto;
      margin-right: auto; }

.column, .columns {
  width: 100%;
  float: left;
  padding-left: 0.5rem;
  padding-right: 0.5rem; }
  .column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
    float: right; }
  .column.end:last-child:last-child, .end.columns:last-child:last-child {
    float: left; }

.column.row.row, .row.row.columns {
  float: none; }
  .row .column.row.row, .row .row.row.columns {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0; }

.xsmall-1 {
  width: 8.33333%; }

.xsmall-push-1 {
  position: relative;
  left: 8.33333%; }

.xsmall-pull-1 {
  position: relative;
  left: -8.33333%; }

.xsmall-offset-0 {
  margin-left: 0%; }

.xsmall-2 {
  width: 16.66667%; }

.xsmall-push-2 {
  position: relative;
  left: 16.66667%; }

.xsmall-pull-2 {
  position: relative;
  left: -16.66667%; }

.xsmall-offset-1 {
  margin-left: 8.33333%; }

.xsmall-3 {
  width: 25%; }

.xsmall-push-3 {
  position: relative;
  left: 25%; }

.xsmall-pull-3 {
  position: relative;
  left: -25%; }

.xsmall-offset-2 {
  margin-left: 16.66667%; }

.xsmall-4 {
  width: 33.33333%; }

.xsmall-push-4 {
  position: relative;
  left: 33.33333%; }

.xsmall-pull-4 {
  position: relative;
  left: -33.33333%; }

.xsmall-offset-3 {
  margin-left: 25%; }

.xsmall-5 {
  width: 41.66667%; }

.xsmall-push-5 {
  position: relative;
  left: 41.66667%; }

.xsmall-pull-5 {
  position: relative;
  left: -41.66667%; }

.xsmall-offset-4 {
  margin-left: 33.33333%; }

.xsmall-6 {
  width: 50%; }

.xsmall-push-6 {
  position: relative;
  left: 50%; }

.xsmall-pull-6 {
  position: relative;
  left: -50%; }

.xsmall-offset-5 {
  margin-left: 41.66667%; }

.xsmall-7 {
  width: 58.33333%; }

.xsmall-push-7 {
  position: relative;
  left: 58.33333%; }

.xsmall-pull-7 {
  position: relative;
  left: -58.33333%; }

.xsmall-offset-6 {
  margin-left: 50%; }

.xsmall-8 {
  width: 66.66667%; }

.xsmall-push-8 {
  position: relative;
  left: 66.66667%; }

.xsmall-pull-8 {
  position: relative;
  left: -66.66667%; }

.xsmall-offset-7 {
  margin-left: 58.33333%; }

.xsmall-9 {
  width: 75%; }

.xsmall-push-9 {
  position: relative;
  left: 75%; }

.xsmall-pull-9 {
  position: relative;
  left: -75%; }

.xsmall-offset-8 {
  margin-left: 66.66667%; }

.xsmall-10 {
  width: 83.33333%; }

.xsmall-push-10 {
  position: relative;
  left: 83.33333%; }

.xsmall-pull-10 {
  position: relative;
  left: -83.33333%; }

.xsmall-offset-9 {
  margin-left: 75%; }

.xsmall-11 {
  width: 91.66667%; }

.xsmall-push-11 {
  position: relative;
  left: 91.66667%; }

.xsmall-pull-11 {
  position: relative;
  left: -91.66667%; }

.xsmall-offset-10 {
  margin-left: 83.33333%; }

.xsmall-12 {
  width: 100%; }

.xsmall-offset-11 {
  margin-left: 91.66667%; }

.xsmall-up-1 > .column, .xsmall-up-1 > .columns {
  width: 100%;
  float: left; }
  .xsmall-up-1 > .column:nth-of-type(1n), .xsmall-up-1 > .columns:nth-of-type(1n) {
    clear: none; }
  .xsmall-up-1 > .column:nth-of-type(1n+1), .xsmall-up-1 > .columns:nth-of-type(1n+1) {
    clear: both; }
  .xsmall-up-1 > .column:last-child, .xsmall-up-1 > .columns:last-child {
    float: left; }

.xsmall-up-2 > .column, .xsmall-up-2 > .columns {
  width: 50%;
  float: left; }
  .xsmall-up-2 > .column:nth-of-type(1n), .xsmall-up-2 > .columns:nth-of-type(1n) {
    clear: none; }
  .xsmall-up-2 > .column:nth-of-type(2n+1), .xsmall-up-2 > .columns:nth-of-type(2n+1) {
    clear: both; }
  .xsmall-up-2 > .column:last-child, .xsmall-up-2 > .columns:last-child {
    float: left; }

.xsmall-up-3 > .column, .xsmall-up-3 > .columns {
  width: 33.33333%;
  float: left; }
  .xsmall-up-3 > .column:nth-of-type(1n), .xsmall-up-3 > .columns:nth-of-type(1n) {
    clear: none; }
  .xsmall-up-3 > .column:nth-of-type(3n+1), .xsmall-up-3 > .columns:nth-of-type(3n+1) {
    clear: both; }
  .xsmall-up-3 > .column:last-child, .xsmall-up-3 > .columns:last-child {
    float: left; }

.xsmall-up-4 > .column, .xsmall-up-4 > .columns {
  width: 25%;
  float: left; }
  .xsmall-up-4 > .column:nth-of-type(1n), .xsmall-up-4 > .columns:nth-of-type(1n) {
    clear: none; }
  .xsmall-up-4 > .column:nth-of-type(4n+1), .xsmall-up-4 > .columns:nth-of-type(4n+1) {
    clear: both; }
  .xsmall-up-4 > .column:last-child, .xsmall-up-4 > .columns:last-child {
    float: left; }

.xsmall-up-5 > .column, .xsmall-up-5 > .columns {
  width: 20%;
  float: left; }
  .xsmall-up-5 > .column:nth-of-type(1n), .xsmall-up-5 > .columns:nth-of-type(1n) {
    clear: none; }
  .xsmall-up-5 > .column:nth-of-type(5n+1), .xsmall-up-5 > .columns:nth-of-type(5n+1) {
    clear: both; }
  .xsmall-up-5 > .column:last-child, .xsmall-up-5 > .columns:last-child {
    float: left; }

.xsmall-up-6 > .column, .xsmall-up-6 > .columns {
  width: 16.66667%;
  float: left; }
  .xsmall-up-6 > .column:nth-of-type(1n), .xsmall-up-6 > .columns:nth-of-type(1n) {
    clear: none; }
  .xsmall-up-6 > .column:nth-of-type(6n+1), .xsmall-up-6 > .columns:nth-of-type(6n+1) {
    clear: both; }
  .xsmall-up-6 > .column:last-child, .xsmall-up-6 > .columns:last-child {
    float: left; }

.xsmall-collapse > .column, .xsmall-collapse > .columns {
  padding-left: 0;
  padding-right: 0; }

.xsmall-collapse .row {
  margin-left: 0;
  margin-right: 0; }

.xsmall-uncollapse > .column, .xsmall-uncollapse > .columns {
  padding-left: 0.5rem;
  padding-right: 0.5rem; }

.xsmall-centered {
  float: none;
  margin-left: auto;
  margin-right: auto; }

.xsmall-uncentered,
.xsmall-push-0,
.xsmall-pull-0 {
  position: static;
  margin-left: 0;
  margin-right: 0;
  float: left; }

@media screen and (min-width: 30em) {
  .small-1 {
    width: 8.33333%; }
  .small-push-1 {
    position: relative;
    left: 8.33333%; }
  .small-pull-1 {
    position: relative;
    left: -8.33333%; }
  .small-offset-0 {
    margin-left: 0%; }
  .small-2 {
    width: 16.66667%; }
  .small-push-2 {
    position: relative;
    left: 16.66667%; }
  .small-pull-2 {
    position: relative;
    left: -16.66667%; }
  .small-offset-1 {
    margin-left: 8.33333%; }
  .small-3 {
    width: 25%; }
  .small-push-3 {
    position: relative;
    left: 25%; }
  .small-pull-3 {
    position: relative;
    left: -25%; }
  .small-offset-2 {
    margin-left: 16.66667%; }
  .small-4 {
    width: 33.33333%; }
  .small-push-4 {
    position: relative;
    left: 33.33333%; }
  .small-pull-4 {
    position: relative;
    left: -33.33333%; }
  .small-offset-3 {
    margin-left: 25%; }
  .small-5 {
    width: 41.66667%; }
  .small-push-5 {
    position: relative;
    left: 41.66667%; }
  .small-pull-5 {
    position: relative;
    left: -41.66667%; }
  .small-offset-4 {
    margin-left: 33.33333%; }
  .small-6 {
    width: 50%; }
  .small-push-6 {
    position: relative;
    left: 50%; }
  .small-pull-6 {
    position: relative;
    left: -50%; }
  .small-offset-5 {
    margin-left: 41.66667%; }
  .small-7 {
    width: 58.33333%; }
  .small-push-7 {
    position: relative;
    left: 58.33333%; }
  .small-pull-7 {
    position: relative;
    left: -58.33333%; }
  .small-offset-6 {
    margin-left: 50%; }
  .small-8 {
    width: 66.66667%; }
  .small-push-8 {
    position: relative;
    left: 66.66667%; }
  .small-pull-8 {
    position: relative;
    left: -66.66667%; }
  .small-offset-7 {
    margin-left: 58.33333%; }
  .small-9 {
    width: 75%; }
  .small-push-9 {
    position: relative;
    left: 75%; }
  .small-pull-9 {
    position: relative;
    left: -75%; }
  .small-offset-8 {
    margin-left: 66.66667%; }
  .small-10 {
    width: 83.33333%; }
  .small-push-10 {
    position: relative;
    left: 83.33333%; }
  .small-pull-10 {
    position: relative;
    left: -83.33333%; }
  .small-offset-9 {
    margin-left: 75%; }
  .small-11 {
    width: 91.66667%; }
  .small-push-11 {
    position: relative;
    left: 91.66667%; }
  .small-pull-11 {
    position: relative;
    left: -91.66667%; }
  .small-offset-10 {
    margin-left: 83.33333%; }
  .small-12 {
    width: 100%; }
  .small-offset-11 {
    margin-left: 91.66667%; }
  .small-up-1 > .column, .small-up-1 > .columns {
    width: 100%;
    float: left; }
    .small-up-1 > .column:nth-of-type(1n), .small-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .small-up-1 > .column:nth-of-type(1n+1), .small-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .small-up-1 > .column:last-child, .small-up-1 > .columns:last-child {
      float: left; }
  .small-up-2 > .column, .small-up-2 > .columns {
    width: 50%;
    float: left; }
    .small-up-2 > .column:nth-of-type(1n), .small-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .small-up-2 > .column:nth-of-type(2n+1), .small-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .small-up-2 > .column:last-child, .small-up-2 > .columns:last-child {
      float: left; }
  .small-up-3 > .column, .small-up-3 > .columns {
    width: 33.33333%;
    float: left; }
    .small-up-3 > .column:nth-of-type(1n), .small-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .small-up-3 > .column:nth-of-type(3n+1), .small-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .small-up-3 > .column:last-child, .small-up-3 > .columns:last-child {
      float: left; }
  .small-up-4 > .column, .small-up-4 > .columns {
    width: 25%;
    float: left; }
    .small-up-4 > .column:nth-of-type(1n), .small-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .small-up-4 > .column:nth-of-type(4n+1), .small-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .small-up-4 > .column:last-child, .small-up-4 > .columns:last-child {
      float: left; }
  .small-up-5 > .column, .small-up-5 > .columns {
    width: 20%;
    float: left; }
    .small-up-5 > .column:nth-of-type(1n), .small-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .small-up-5 > .column:nth-of-type(5n+1), .small-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .small-up-5 > .column:last-child, .small-up-5 > .columns:last-child {
      float: left; }
  .small-up-6 > .column, .small-up-6 > .columns {
    width: 16.66667%;
    float: left; }
    .small-up-6 > .column:nth-of-type(1n), .small-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .small-up-6 > .column:nth-of-type(6n+1), .small-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .small-up-6 > .column:last-child, .small-up-6 > .columns:last-child {
      float: left; }
  .small-collapse > .column, .small-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .small-collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .small-uncollapse > .column, .small-uncollapse > .columns {
    padding-left: 0.5rem;
    padding-right: 0.5rem; }
  .small-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .small-uncentered,
  .small-push-0,
  .small-pull-0 {
    position: static;
    margin-left: 0;
    margin-right: 0;
    float: left; } }

@media screen and (min-width: 48em) {
  .medium-1 {
    width: 8.33333%; }
  .medium-push-1 {
    position: relative;
    left: 8.33333%; }
  .medium-pull-1 {
    position: relative;
    left: -8.33333%; }
  .medium-offset-0 {
    margin-left: 0%; }
  .medium-2 {
    width: 16.66667%; }
  .medium-push-2 {
    position: relative;
    left: 16.66667%; }
  .medium-pull-2 {
    position: relative;
    left: -16.66667%; }
  .medium-offset-1 {
    margin-left: 8.33333%; }
  .medium-3 {
    width: 25%; }
  .medium-push-3 {
    position: relative;
    left: 25%; }
  .medium-pull-3 {
    position: relative;
    left: -25%; }
  .medium-offset-2 {
    margin-left: 16.66667%; }
  .medium-4 {
    width: 33.33333%; }
  .medium-push-4 {
    position: relative;
    left: 33.33333%; }
  .medium-pull-4 {
    position: relative;
    left: -33.33333%; }
  .medium-offset-3 {
    margin-left: 25%; }
  .medium-5 {
    width: 41.66667%; }
  .medium-push-5 {
    position: relative;
    left: 41.66667%; }
  .medium-pull-5 {
    position: relative;
    left: -41.66667%; }
  .medium-offset-4 {
    margin-left: 33.33333%; }
  .medium-6 {
    width: 50%; }
  .medium-push-6 {
    position: relative;
    left: 50%; }
  .medium-pull-6 {
    position: relative;
    left: -50%; }
  .medium-offset-5 {
    margin-left: 41.66667%; }
  .medium-7 {
    width: 58.33333%; }
  .medium-push-7 {
    position: relative;
    left: 58.33333%; }
  .medium-pull-7 {
    position: relative;
    left: -58.33333%; }
  .medium-offset-6 {
    margin-left: 50%; }
  .medium-8 {
    width: 66.66667%; }
  .medium-push-8 {
    position: relative;
    left: 66.66667%; }
  .medium-pull-8 {
    position: relative;
    left: -66.66667%; }
  .medium-offset-7 {
    margin-left: 58.33333%; }
  .medium-9 {
    width: 75%; }
  .medium-push-9 {
    position: relative;
    left: 75%; }
  .medium-pull-9 {
    position: relative;
    left: -75%; }
  .medium-offset-8 {
    margin-left: 66.66667%; }
  .medium-10 {
    width: 83.33333%; }
  .medium-push-10 {
    position: relative;
    left: 83.33333%; }
  .medium-pull-10 {
    position: relative;
    left: -83.33333%; }
  .medium-offset-9 {
    margin-left: 75%; }
  .medium-11 {
    width: 91.66667%; }
  .medium-push-11 {
    position: relative;
    left: 91.66667%; }
  .medium-pull-11 {
    position: relative;
    left: -91.66667%; }
  .medium-offset-10 {
    margin-left: 83.33333%; }
  .medium-12 {
    width: 100%; }
  .medium-offset-11 {
    margin-left: 91.66667%; }
  .medium-up-1 > .column, .medium-up-1 > .columns {
    width: 100%;
    float: left; }
    .medium-up-1 > .column:nth-of-type(1n), .medium-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-1 > .column:nth-of-type(1n+1), .medium-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .medium-up-1 > .column:last-child, .medium-up-1 > .columns:last-child {
      float: left; }
  .medium-up-2 > .column, .medium-up-2 > .columns {
    width: 50%;
    float: left; }
    .medium-up-2 > .column:nth-of-type(1n), .medium-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-2 > .column:nth-of-type(2n+1), .medium-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .medium-up-2 > .column:last-child, .medium-up-2 > .columns:last-child {
      float: left; }
  .medium-up-3 > .column, .medium-up-3 > .columns {
    width: 33.33333%;
    float: left; }
    .medium-up-3 > .column:nth-of-type(1n), .medium-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-3 > .column:nth-of-type(3n+1), .medium-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .medium-up-3 > .column:last-child, .medium-up-3 > .columns:last-child {
      float: left; }
  .medium-up-4 > .column, .medium-up-4 > .columns {
    width: 25%;
    float: left; }
    .medium-up-4 > .column:nth-of-type(1n), .medium-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-4 > .column:nth-of-type(4n+1), .medium-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .medium-up-4 > .column:last-child, .medium-up-4 > .columns:last-child {
      float: left; }
  .medium-up-5 > .column, .medium-up-5 > .columns {
    width: 20%;
    float: left; }
    .medium-up-5 > .column:nth-of-type(1n), .medium-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-5 > .column:nth-of-type(5n+1), .medium-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .medium-up-5 > .column:last-child, .medium-up-5 > .columns:last-child {
      float: left; }
  .medium-up-6 > .column, .medium-up-6 > .columns {
    width: 16.66667%;
    float: left; }
    .medium-up-6 > .column:nth-of-type(1n), .medium-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .medium-up-6 > .column:nth-of-type(6n+1), .medium-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .medium-up-6 > .column:last-child, .medium-up-6 > .columns:last-child {
      float: left; }
  .medium-collapse > .column, .medium-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .medium-collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .medium-uncollapse > .column, .medium-uncollapse > .columns {
    padding-left: 0.5rem;
    padding-right: 0.5rem; }
  .medium-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .medium-uncentered,
  .medium-push-0,
  .medium-pull-0 {
    position: static;
    margin-left: 0;
    margin-right: 0;
    float: left; } }

@media screen and (min-width: 64em) {
  .large-1 {
    width: 8.33333%; }
  .large-push-1 {
    position: relative;
    left: 8.33333%; }
  .large-pull-1 {
    position: relative;
    left: -8.33333%; }
  .large-offset-0 {
    margin-left: 0%; }
  .large-2 {
    width: 16.66667%; }
  .large-push-2 {
    position: relative;
    left: 16.66667%; }
  .large-pull-2 {
    position: relative;
    left: -16.66667%; }
  .large-offset-1 {
    margin-left: 8.33333%; }
  .large-3 {
    width: 25%; }
  .large-push-3 {
    position: relative;
    left: 25%; }
  .large-pull-3 {
    position: relative;
    left: -25%; }
  .large-offset-2 {
    margin-left: 16.66667%; }
  .large-4 {
    width: 33.33333%; }
  .large-push-4 {
    position: relative;
    left: 33.33333%; }
  .large-pull-4 {
    position: relative;
    left: -33.33333%; }
  .large-offset-3 {
    margin-left: 25%; }
  .large-5 {
    width: 41.66667%; }
  .large-push-5 {
    position: relative;
    left: 41.66667%; }
  .large-pull-5 {
    position: relative;
    left: -41.66667%; }
  .large-offset-4 {
    margin-left: 33.33333%; }
  .large-6 {
    width: 50%; }
  .large-push-6 {
    position: relative;
    left: 50%; }
  .large-pull-6 {
    position: relative;
    left: -50%; }
  .large-offset-5 {
    margin-left: 41.66667%; }
  .large-7 {
    width: 58.33333%; }
  .large-push-7 {
    position: relative;
    left: 58.33333%; }
  .large-pull-7 {
    position: relative;
    left: -58.33333%; }
  .large-offset-6 {
    margin-left: 50%; }
  .large-8 {
    width: 66.66667%; }
  .large-push-8 {
    position: relative;
    left: 66.66667%; }
  .large-pull-8 {
    position: relative;
    left: -66.66667%; }
  .large-offset-7 {
    margin-left: 58.33333%; }
  .large-9 {
    width: 75%; }
  .large-push-9 {
    position: relative;
    left: 75%; }
  .large-pull-9 {
    position: relative;
    left: -75%; }
  .large-offset-8 {
    margin-left: 66.66667%; }
  .large-10 {
    width: 83.33333%; }
  .large-push-10 {
    position: relative;
    left: 83.33333%; }
  .large-pull-10 {
    position: relative;
    left: -83.33333%; }
  .large-offset-9 {
    margin-left: 75%; }
  .large-11 {
    width: 91.66667%; }
  .large-push-11 {
    position: relative;
    left: 91.66667%; }
  .large-pull-11 {
    position: relative;
    left: -91.66667%; }
  .large-offset-10 {
    margin-left: 83.33333%; }
  .large-12 {
    width: 100%; }
  .large-offset-11 {
    margin-left: 91.66667%; }
  .large-up-1 > .column, .large-up-1 > .columns {
    width: 100%;
    float: left; }
    .large-up-1 > .column:nth-of-type(1n), .large-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-1 > .column:nth-of-type(1n+1), .large-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .large-up-1 > .column:last-child, .large-up-1 > .columns:last-child {
      float: left; }
  .large-up-2 > .column, .large-up-2 > .columns {
    width: 50%;
    float: left; }
    .large-up-2 > .column:nth-of-type(1n), .large-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-2 > .column:nth-of-type(2n+1), .large-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .large-up-2 > .column:last-child, .large-up-2 > .columns:last-child {
      float: left; }
  .large-up-3 > .column, .large-up-3 > .columns {
    width: 33.33333%;
    float: left; }
    .large-up-3 > .column:nth-of-type(1n), .large-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-3 > .column:nth-of-type(3n+1), .large-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .large-up-3 > .column:last-child, .large-up-3 > .columns:last-child {
      float: left; }
  .large-up-4 > .column, .large-up-4 > .columns {
    width: 25%;
    float: left; }
    .large-up-4 > .column:nth-of-type(1n), .large-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .large-up-4 > .column:last-child, .large-up-4 > .columns:last-child {
      float: left; }
  .large-up-5 > .column, .large-up-5 > .columns {
    width: 20%;
    float: left; }
    .large-up-5 > .column:nth-of-type(1n), .large-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-5 > .column:nth-of-type(5n+1), .large-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .large-up-5 > .column:last-child, .large-up-5 > .columns:last-child {
      float: left; }
  .large-up-6 > .column, .large-up-6 > .columns {
    width: 16.66667%;
    float: left; }
    .large-up-6 > .column:nth-of-type(1n), .large-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .large-up-6 > .column:nth-of-type(6n+1), .large-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .large-up-6 > .column:last-child, .large-up-6 > .columns:last-child {
      float: left; }
  .large-collapse > .column, .large-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .large-collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .large-uncollapse > .column, .large-uncollapse > .columns {
    padding-left: 0.5rem;
    padding-right: 0.5rem; }
  .large-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .large-uncentered,
  .large-push-0,
  .large-pull-0 {
    position: static;
    margin-left: 0;
    margin-right: 0;
    float: left; } }

@media screen and (min-width: 90em) {
  .xlarge-1 {
    width: 8.33333%; }
  .xlarge-push-1 {
    position: relative;
    left: 8.33333%; }
  .xlarge-pull-1 {
    position: relative;
    left: -8.33333%; }
  .xlarge-offset-0 {
    margin-left: 0%; }
  .xlarge-2 {
    width: 16.66667%; }
  .xlarge-push-2 {
    position: relative;
    left: 16.66667%; }
  .xlarge-pull-2 {
    position: relative;
    left: -16.66667%; }
  .xlarge-offset-1 {
    margin-left: 8.33333%; }
  .xlarge-3 {
    width: 25%; }
  .xlarge-push-3 {
    position: relative;
    left: 25%; }
  .xlarge-pull-3 {
    position: relative;
    left: -25%; }
  .xlarge-offset-2 {
    margin-left: 16.66667%; }
  .xlarge-4 {
    width: 33.33333%; }
  .xlarge-push-4 {
    position: relative;
    left: 33.33333%; }
  .xlarge-pull-4 {
    position: relative;
    left: -33.33333%; }
  .xlarge-offset-3 {
    margin-left: 25%; }
  .xlarge-5 {
    width: 41.66667%; }
  .xlarge-push-5 {
    position: relative;
    left: 41.66667%; }
  .xlarge-pull-5 {
    position: relative;
    left: -41.66667%; }
  .xlarge-offset-4 {
    margin-left: 33.33333%; }
  .xlarge-6 {
    width: 50%; }
  .xlarge-push-6 {
    position: relative;
    left: 50%; }
  .xlarge-pull-6 {
    position: relative;
    left: -50%; }
  .xlarge-offset-5 {
    margin-left: 41.66667%; }
  .xlarge-7 {
    width: 58.33333%; }
  .xlarge-push-7 {
    position: relative;
    left: 58.33333%; }
  .xlarge-pull-7 {
    position: relative;
    left: -58.33333%; }
  .xlarge-offset-6 {
    margin-left: 50%; }
  .xlarge-8 {
    width: 66.66667%; }
  .xlarge-push-8 {
    position: relative;
    left: 66.66667%; }
  .xlarge-pull-8 {
    position: relative;
    left: -66.66667%; }
  .xlarge-offset-7 {
    margin-left: 58.33333%; }
  .xlarge-9 {
    width: 75%; }
  .xlarge-push-9 {
    position: relative;
    left: 75%; }
  .xlarge-pull-9 {
    position: relative;
    left: -75%; }
  .xlarge-offset-8 {
    margin-left: 66.66667%; }
  .xlarge-10 {
    width: 83.33333%; }
  .xlarge-push-10 {
    position: relative;
    left: 83.33333%; }
  .xlarge-pull-10 {
    position: relative;
    left: -83.33333%; }
  .xlarge-offset-9 {
    margin-left: 75%; }
  .xlarge-11 {
    width: 91.66667%; }
  .xlarge-push-11 {
    position: relative;
    left: 91.66667%; }
  .xlarge-pull-11 {
    position: relative;
    left: -91.66667%; }
  .xlarge-offset-10 {
    margin-left: 83.33333%; }
  .xlarge-12 {
    width: 100%; }
  .xlarge-offset-11 {
    margin-left: 91.66667%; }
  .xlarge-up-1 > .column, .xlarge-up-1 > .columns {
    width: 100%;
    float: left; }
    .xlarge-up-1 > .column:nth-of-type(1n), .xlarge-up-1 > .columns:nth-of-type(1n) {
      clear: none; }
    .xlarge-up-1 > .column:nth-of-type(1n+1), .xlarge-up-1 > .columns:nth-of-type(1n+1) {
      clear: both; }
    .xlarge-up-1 > .column:last-child, .xlarge-up-1 > .columns:last-child {
      float: left; }
  .xlarge-up-2 > .column, .xlarge-up-2 > .columns {
    width: 50%;
    float: left; }
    .xlarge-up-2 > .column:nth-of-type(1n), .xlarge-up-2 > .columns:nth-of-type(1n) {
      clear: none; }
    .xlarge-up-2 > .column:nth-of-type(2n+1), .xlarge-up-2 > .columns:nth-of-type(2n+1) {
      clear: both; }
    .xlarge-up-2 > .column:last-child, .xlarge-up-2 > .columns:last-child {
      float: left; }
  .xlarge-up-3 > .column, .xlarge-up-3 > .columns {
    width: 33.33333%;
    float: left; }
    .xlarge-up-3 > .column:nth-of-type(1n), .xlarge-up-3 > .columns:nth-of-type(1n) {
      clear: none; }
    .xlarge-up-3 > .column:nth-of-type(3n+1), .xlarge-up-3 > .columns:nth-of-type(3n+1) {
      clear: both; }
    .xlarge-up-3 > .column:last-child, .xlarge-up-3 > .columns:last-child {
      float: left; }
  .xlarge-up-4 > .column, .xlarge-up-4 > .columns {
    width: 25%;
    float: left; }
    .xlarge-up-4 > .column:nth-of-type(1n), .xlarge-up-4 > .columns:nth-of-type(1n) {
      clear: none; }
    .xlarge-up-4 > .column:nth-of-type(4n+1), .xlarge-up-4 > .columns:nth-of-type(4n+1) {
      clear: both; }
    .xlarge-up-4 > .column:last-child, .xlarge-up-4 > .columns:last-child {
      float: left; }
  .xlarge-up-5 > .column, .xlarge-up-5 > .columns {
    width: 20%;
    float: left; }
    .xlarge-up-5 > .column:nth-of-type(1n), .xlarge-up-5 > .columns:nth-of-type(1n) {
      clear: none; }
    .xlarge-up-5 > .column:nth-of-type(5n+1), .xlarge-up-5 > .columns:nth-of-type(5n+1) {
      clear: both; }
    .xlarge-up-5 > .column:last-child, .xlarge-up-5 > .columns:last-child {
      float: left; }
  .xlarge-up-6 > .column, .xlarge-up-6 > .columns {
    width: 16.66667%;
    float: left; }
    .xlarge-up-6 > .column:nth-of-type(1n), .xlarge-up-6 > .columns:nth-of-type(1n) {
      clear: none; }
    .xlarge-up-6 > .column:nth-of-type(6n+1), .xlarge-up-6 > .columns:nth-of-type(6n+1) {
      clear: both; }
    .xlarge-up-6 > .column:last-child, .xlarge-up-6 > .columns:last-child {
      float: left; }
  .xlarge-collapse > .column, .xlarge-collapse > .columns {
    padding-left: 0;
    padding-right: 0; }
  .xlarge-collapse .row {
    margin-left: 0;
    margin-right: 0; }
  .xlarge-uncollapse > .column, .xlarge-uncollapse > .columns {
    padding-left: 0.5rem;
    padding-right: 0.5rem; }
  .xlarge-centered {
    float: none;
    margin-left: auto;
    margin-right: auto; }
  .xlarge-uncentered,
  .xlarge-push-0,
  .xlarge-pull-0 {
    position: static;
    margin-left: 0;
    margin-right: 0;
    float: left; } }

.hide {
  display: none !important; }

.invisible {
  visibility: hidden; }

.hide-for-xsmall {
  display: none !important; }

.show-for-xsmall {
  display: none !important; }

@media screen and (min-width: 0em) and (max-width: 29.9375em) {
  .hide-for-xsmall-only {
    display: none !important; } }

@media screen and (max-width: 0em), screen and (min-width: 30em) {
  .show-for-xsmall-only {
    display: none !important; } }

@media screen and (min-width: 30em) and (max-width: 47.9375em) {
  .hide-for-small-only {
    display: none !important; } }

@media screen and (max-width: 29.9375em), screen and (min-width: 48em) {
  .show-for-small-only {
    display: none !important; } }

@media screen and (min-width: 48em) {
  .hide-for-medium {
    display: none !important; } }

@media screen and (max-width: 47.9375em) {
  .show-for-medium {
    display: none !important; } }

@media screen and (min-width: 48em) and (max-width: 63.9375em) {
  .hide-for-medium-only {
    display: none !important; } }

@media screen and (max-width: 47.9375em), screen and (min-width: 64em) {
  .show-for-medium-only {
    display: none !important; } }

@media screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important; } }

@media screen and (max-width: 63.9375em) {
  .show-for-large {
    display: none !important; } }

@media screen and (min-width: 64em) and (max-width: 89.9375em) {
  .hide-for-large-only {
    display: none !important; } }

@media screen and (max-width: 63.9375em), screen and (min-width: 90em) {
  .show-for-large-only {
    display: none !important; } }

@media screen and (min-width: 90em) {
  .hide-for-xlarge {
    display: none !important; } }

@media screen and (max-width: 89.9375em) {
  .show-for-xlarge {
    display: none !important; } }

@media screen and (min-width: 90em) {
  .hide-for-xlarge-only {
    display: none !important; } }

@media screen and (max-width: 89.9375em) {
  .show-for-xlarge-only {
    display: none !important; } }

.show-for-sr,
.show-on-focus {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0); }

.show-on-focus:active, .show-on-focus:focus {
  position: static !important;
  height: auto;
  width: auto;
  overflow: visible;
  clip: auto; }

.show-for-landscape,
.hide-for-portrait {
  display: block !important; }
  @media screen and (orientation: landscape) {
    .show-for-landscape,
    .hide-for-portrait {
      display: block !important; } }
  @media screen and (orientation: portrait) {
    .show-for-landscape,
    .hide-for-portrait {
      display: none !important; } }

.hide-for-landscape,
.show-for-portrait {
  display: none !important; }
  @media screen and (orientation: landscape) {
    .hide-for-landscape,
    .show-for-portrait {
      display: none !important; } }
  @media screen and (orientation: portrait) {
    .hide-for-landscape,
    .show-for-portrait {
      display: block !important; } }

.abb--reading-size {
  max-width: 50rem;
  margin-top: 3rem; }
  .abb--reading-size--centered {
    margin: 0 auto; }
  @media screen and (min-width: 50rem) {
    .abb--reading-size .abb--reading-size--discard {
      margin-left: calc((-100vw / 2 + 50rem / 2 + 0px));
      margin-right: calc((-100vw / 2 + 50rem / 2 + 0px)); } }
  @media screen and (min-width: 48em) {
    .abb--reading-size .abb--reading-size--discard {
      margin-left: calc((-100vw / 2 + 50rem / 2 + 36px));
      margin-right: calc((-100vw / 2 + 50rem / 2 + 36px)); } }

@media screen and (min-width: 1280px) and (min-width: 48em) {
  .abb--reading-size .abb--reading-size--discard {
    margin-left: calc((-1280px / 2 + 50rem / 2 + 36px));
    margin-right: calc((-1280px / 2 + 50rem / 2 + 36px)); } }
  .abb--reading-size table p {
    margin: 0; }
  .abb--reading-size [property="articleBody"] h1, .abb--reading-size [property="articleBody"] h2, .abb--reading-size [property="articleBody"] h3, .abb--reading-size [property="articleBody"] h4, .abb--reading-size [property="articleBody"] h5, .abb--reading-size [property="articleBody"] h6, .abb--reading-size [property="articleBody"] .abb-heading-1, .abb--reading-size [property="articleBody"] .abb-heading-2, .abb--reading-size [property="articleBody"] .abb-heading-3, .abb--reading-size [property="articleBody"] .abb-heading-4, .abb--reading-size [property="articleBody"] .abb-heading-5, .abb--reading-size [property="articleBody"] .abb-heading-6, .abb--reading-size [property="articleBody"] .abb-headline-text {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem; }
  .abb--reading-size [property="articleBody"] > ul > li {
    margin-bottom: 1rem; }
  .abb--reading-size h1 {
    margin-top: 0; }
  .abb--reading-size .column, .abb--reading-size .columns {
    padding-left: 1.5rem;
    padding-right: 1.5rem; }

@media print {
  .hide-for-print {
    display: none !important; } }

.row .abb--reading-size--centered {
  margin: 0 auto; }

[hidden],
template {
  display: none !important; }

.xsmall-float-right {
  float: right; }

.xsmall-float-left {
  float: left; }

@media screen and (min-width: 30em) {
  .small-float-right {
    float: right; }
  .small-float-left {
    float: left; } }

@media screen and (min-width: 48em) {
  .medium-float-right {
    float: right; }
  .medium-float-left {
    float: left; } }

@media screen and (min-width: 64em) {
  .large-float-right {
    float: right; }
  .large-float-left {
    float: left; } }

@media screen and (min-width: 90em) {
  .xlarge-float-right {
    float: right; }
  .xlarge-float-left {
    float: left; } }