@charset "UTF-8";
@import url("//fast.fonts.com/t/1.css?apiType=css&projectid=3f414776-f079-40b0-8c11-64c167ef500e");
@import url("https://lolstatic-a.akamaihd.net/awesomefonts/1.0.0/lol-fonts.css");
/**
 * @category Layout
 * <p>The RiotGrid allows for very flexible control of layout without many drawbacks. The RiotGrid uses grid containers and
 * proportional grid elements to achieve a responsive grid. More advanced layouts can be achieved by nesting grid
 * containers together.</p>
 *
 * <ul>
 *  <li><b>Grid Containers</b> - Grid containers are used to define sections of a grid. They control grid element
 *  spacing. Grid elements are all subclasses of the {@link .gs-container} selector.</li>
 *  <li><b>Grid Elements</b> - Grid elements are used to define the width of a specific section of the grid. These are
 *  all in the form of {@link .default-X-Y} selectors</li>
 * </ul>
 */
/**
 * @category Flair
 * @selector .content-border
 * Content border gives content an engraved border look. This is often used to wrap around images or an element with a
 * background on it like <code>header</code> tags or {@link .white-stone}.
 * @example
 * <span class="content-border">
 *   __content__
 * </span>
 * @endexample
 example_data
 example_content


 */
/**
 * @category Flair
 * @selector hr.divider
 * Provides an engraved look to the default <code>hr</code> tag.
 * @example
 * <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus pellentesque vehicula sed</p>
 * <hr class="divider"/>
 * <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus pellentesque vehicula sed</p>
 * @endexample
 */
/**
 * @category Flair
 * @selector .muted, .warning, .error, .info, .success, .desc
 * <p>Emphasis styles used to differentiate text from the normal body text.</p>
 * @example
 * <p class="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus vehicula sed</p>
 * <p class="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus vehicula sed</p>
 * <p class="error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus vehicula sed</p>
 * <p class="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus vehicula sed</p>
 * <p class="success">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus vehicula sed</p>
 * <p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus vehicula sed</p>
 * @endexample
 * <hr class="divider">
 * <p>Messages can also be displayed within a message box, which provides much stronger styling to call the user's attention.</p>
 * @example
 * <p class="message-box error">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus vehicula sed</p>
 * @endexample
 */
/**
 * @category Flair
 * @selector .grid-list
 * Provides an engraved look on many elements in a grid layout. In nearly all cases, a grid list should be wrapped by
 * {@link .content-border} to provide some separation from the rest of the page's content.
 * @example
 * <div class="content-border">
 *   <ul class="grid-list gs-container gs-no-gutter default-4-col">
 *     <li>
 *       <div>
 *         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 *       </div>
 *     </li>
 *     <li>
 *       <div>
 *         <p>Praesent mattis nunc sed est dignissim mattis.</p>
 *       </div>
 *     </li>
 *     <li>
 *       <div>
 *         <p>Quisque ac felis nec felis pretium ornare ut.</p>
 *       </div>
 *     </li>
 *     <li>
 *       <div>
 *         <p>Sed sit amet eros accumsan, laoreet nisl ac, bibendum leo.
 *       </div>
 *     </li>
 *   </ul>
 * </div>
 * @endexample
 */
/**
 * @category Flair
 * @selector .gray-stone
 * Provides a background and spacing to an element, giving it a different feel than the normal content background.
 * @example
 * <div class="gray-stone">
 *   <p>
 *     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus pellentesque vehicula sed
 *     ac velit. Integer purus nunc, egestas nec rhoncus at, adipiscing at orci. Pellentesque ut semper ante. Quisque
 *     sit amet hendrerit turpis. Aliquam lacinia tincidunt leo. Vivamus pharetra ultricies dictum. Phasellus leo massa,
 *     sodales in volutpat vel, faucibus quis magna.
 *   </p>
 * </div>
 * @endexample
 */
/**
 * @category Flair
 * @selector header.header
 * Header provides a stylized backdrop on a given header element. The <code>header</code> tag must contain a <code>h1</code> type tag.
 * Navigation can be added to the right side of the header by adding a <code>nav</code> element.
 * @example
 * <header class="header">
 *  <h3>Example Header</h3>
 *  <nav>
 *    <ul>
 *      <li><a href="#">Nav Link</a></li>
 *      <li><a href="#">Nav Link</a></li>
 *    </ul>
 *  </nav>
 * </header>
 * @endexample
 */
/**
 * @category Flair
 * @selector header.header-plain
 * Provides the same functionality as {@link header.header-primary} while removing the background texturing.
 * @example
 * <header class="header-plain">
 *  <h3>Example Header</h3>
 *  <nav class="header-links">
 *    <ul>
 *      <li><a href="#">Nav Link</a></li>
 *      <li><a href="#">Nav Link</a></li>
 *    </ul>
 *  </nav>
 * </header>
 * @endexample
 */
/**
 * @category Flair
 * @selector header.header-primary
 * Adds a strong visual style to standard <code>header</code> elements. The styling is more pronounced than that on
 * {@link header.header}.
 * @example
 * <header class="header-primary">
 *  <h3>Example Header</h3>
 *  <nav class="header-links">
 *    <ul>
 *      <li><a href="#">Nav Link</a></li>
 *      <li><a href="#">Nav Link</a></li>
 *    </ul>
 *  </nav>
 * </header>
 * @endexample
 */
/**
 * @category Flair
 * @selector header.header-subtle
 * Provides a tertiary visual style when more levels of content need to be nested.
 * @example
 * <header class="header-subtle">
 *   <h3>Example Header</h3>
 * </header>
 * @endexample
 */
/**
 * @category Flair
 * @selector hr.subtle-divider
 * Provides an engraved look to the default <code>hr</code> tag, unlike {@link hr.divider} the subtle divider has faded
 * edges.
 * @example
 * <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus pellentesque vehicula sed</p>
 * <hr class="subtle-divider"/>
 * <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus pellentesque vehicula sed</p>
 * @endexample
 */
/**
 * @category Flair
 * @selector .white-stone
 * Provides a lighter background for content to live in. Generally this background texture should be wrapped by a
 * {@link .content-border} element.
 * @example
 * <div class="content-border">
 *   <div class="white-stone">
 *     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu lacus eget lectus pellentesque sed</p>
 *   </div>
 * </div>
 * @endexample
 */
/**
 * @category Widget
 * @selector Accordion
 * @example
 * <div class="accordion">
 *   <header>Panel 1</header>
 *   <section>
 *     Panel 1 Content
 *   </section>
 *   <header>Panel 2</header>
 *   <section>
 *     Panel 2 Content
 *   </section>
 *   <header>Panel 3</header>
 *   <section>
 *     Panel 3 Content
 *   </section>
 * </div>
 * @endexample
 */
/**
 * @category Widget
 * @selector Colorbox
 * You'll most often use a lightbox link image thumbnails that link to a larger version of the image.
 * @example
 * <a class="lightbox" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_1.jpg">
 *   <img src="http://ddragon.leagueoflegends.com/cdn/3.11.2/img/champion/Aatrox.png">
 * </a>
 * @endexample
 * <hr>
 * <p>Here's another example of putting a lightbox link on text.  Notice the use of the <code>title</code> attribute to set the Caption Text</p>
 * @example
 * <p>Simple links can also launch a lightbox by including a
 *   <a class="lightbox" title="Lightbox Caption Text" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Aatrox_1.jpg">
 *     LightBox Link (click me)
 *   </a> in your content.
 * </p>
 * @endexample
 */
/**
 * @category Widget
 * @selector Dropdown
 * @example
 * <div class="dropdown riot-component" id="my-dropdown">
 *   <a href="#my-dropdown" class="btn" data-toggle="dropdown">
 *     <span>
 *       <em class="icon icon-arrow-down"></em>
 *       Dropdown
 *     </span>
 *   </a>
 *   <ul class="dropdown-menu">
 *     <li><a href="#">Action</a></li>
 *     <li><a href="#">Action 2</a></li>
 *   </ul>
 * </div>
 * @endexample
 */
/**
 * @category Widget
 * @selector FAQ
 * <h3>Unstyled FAQ</h3>
 * <p>Here are the basic parts of the FAQ widget.</p>
 * <ul>
 *   <li>The <code>section.question</code> wrapper indicates the beginning of an faq.</li>
 *   <li>Each question is wrapped in <code>header</code> tags which will get the collapsible behavior attached.</li>
 *   <li>The <code>div.answer</code> can be filled with any type of full html content: text, images, lists, tables, etc.</li>
 * </ul>
 * <p>This is not a recommended design for FAQ's, but you can also leave off the .grid-list container styling if that's appropriate for your page.</p>
 * @example
 * <section class="question">
 *   <header>__FAQ_QUESTION__</header>
 *   <div class="answer margin-none">__FAQ_ANSWER__</div>
 *   <header>__FAQ_QUESTION__</header>
 *   <div class="answer margin-none">__FAQ_ANSWER__</div>
 *   <header>__FAQ_QUESTION__</header>
 *   <div class="answer margin-none">__FAQ_ANSWER__</div>
 * </section>
 * @endexample
 * <hr class="divider">
 * <h3>Fully Styled FAQ</h3>
 * <p>The fully styled FAQ is shown below.  Each major section of questions should be styled like this.</p>
 * <ul>
 *   <li>The <code>header.header-primary</code> is used to introduce the FAQ, separating it from the rest of the content of the page.</li>
 *   <li>The <code>.grid-list.gs-container.default-1-col.gs-no-gutter</code> applies the white stone look to each question and provides the appropriate padding.</li>
 *   <li>Note that in this style, each question is in it's own <code>.question</code> faq.</li>
 * </ul>
 * @example
 * <div class="content-border">
 *   <header class="header-primary"><h2>__FAQ_TITLE__</h2></header>
 *   <ul class="grid-list gs-container default-1-col gs-no-gutter">
 *     <li>
 *       <section class="question">
 *         <header>__FAQ_QUESTION__</header>
 *         <div class="answer">
 *           <p>__FAQ_ANSWER__</p>
 *         </div>
 *       </section>
 *     </li>
 *     <li>
 *       <section class="question">
 *         <header>__FAQ_QUESTION__</header>
 *         <div class="answer">
 *           <p>__FAQ_ANSWER__</p>
 *         </div>
 *       </section>
 *     </li>
 *     <li>
 *       <section class="question">
 *         <header>__FAQ_QUESTION__</header>
 *         <div class="answer">
 *           <p>__FAQ_ANSWER__</p>
 *         </div>
 *       </section>
 *     </li>
 *   </ul>
 * </div>
 * @endexample
 */
/**
 * @category Widget
 * @selector Modal
 * @example
 * <a href="#my-modal" class="btn" data-toggle="modal">
 *   <span>Show Modal</span>
 * </a>
 *
 * <div id="my-modal" class="modal">
 *   <div class="modal-header">
 *     Modal Header
 *   </div>
 *   <div class="modal-body">
 *     <p>This is the body.</p>
 *   </div>
 *   <div class="modal-footer">
 *     <a href="#my-modal" class="btn" data-hide="modal">
 *       <span>Close</span>
 *     </a>
 *   </div>
 * </div>
 * @endexample
 */
/**
 * @category Widget
 * @selector Tabs
 * @example
 * <div class="tabs">
 *   <header>Panel 1</header>
 *   <section>
 *     Panel 1 Content
 *   </section>
 *   <header>Panel 2</header>
 *   <section>
 *     Panel 2 Content
 *   </section>
 *   <header>Panel 3</header>
 *   <section>
 *     Panel 3 Content
 *   </section>
 * </div>
 * @endexample
 */
/* line 2, ../RiotKit/scss/globals/typography/_mixin.scss */
html {
  font-size: 62.5%;
}

/* line 6, ../RiotKit/scss/globals/typography/_mixin.scss */
html body {
  font-size: 1.5em;
  font-family: "Gill Sans W04", GillSans, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  line-height: 1.4em;
  color: #000;
}
/* line 7, ../RiotKit/scss/globals/typography/_mixin.scss */
html body a, html body a:visited {
  color: #257372;
}
/* line 10, ../RiotKit/scss/globals/typography/_mixin.scss */
html body a:hover {
  color: #5cb2b1;
}
/* line 13, ../RiotKit/scss/globals/typography/_mixin.scss */
html body a.disabled {
  cursor: default;
}
/* line 17, ../RiotKit/scss/globals/typography/_mixin.scss */
html body p {
  margin: 15px 0 0 0;
}
/* line 20, ../RiotKit/scss/globals/typography/_mixin.scss */
html body p:first-child {
  margin-top: 0;
}
/* line 23, ../RiotKit/scss/globals/typography/_mixin.scss */
html body p:last-child {
  margin-bottom: 0;
}
/* line 39, ../RiotKit/scss/globals/typography/_mixin.scss */
html body.i18n-cs, html body.i18n-el, html body.i18n-tr, html body.i18n-pl, html body.i18n-pt, html body.i18n-tr, html body.i18n-ro, html body.i18n-ru {
  font-family: Calibri, Helvetica, Arial, sans-serif;
}
/* line 43, ../RiotKit/scss/globals/typography/_mixin.scss */
html body.i18n-ja {
  font-family: "AxisStd-Regular", sans-serif;
}

/**
 * @category Typography
 * @selector Body Text
 * <p>Below you can see examples of different types of text treatment: <code>strong</code>, <code>em</code>, <code>.featured</code>, <code>.subtle</code>, <code>.all-caps</code>, <code>.lowercase</code>, links, etc.</p>
 * <p>Standard Body Text.</p>
 * @example
 * <p>The quick Red Fox jumped over the lazy Brown Dog.</p>
 * @endexample
 * <p>Bold Text.</p>
 * @example
 * <p><strong>The quick Red Fox jumped over the lazy Brown Dog.</strong></p>
 * @endexample
 * <p>Emphasized Text.</p>
 * @example
 * <p><em>The quick Red Fox jumped over the lazy Brown Dog.</em></p>
 * @endexample
 * <p>Linked Text.</p>
 * @example
 * <p><a href="#">The quick Red Fox jumped over the lazy Brown Dog.</a></p>
 * @endexample
 * <p>Featured Text.</p>
 * @example
 * <p class="featured">The quick Red Fox jumped over the lazy Brown Dog.</p>
 * @endexample
 * <p>Subtle Text.</p>
 * @example
 * <p class="subtle">The quick Red Fox jumped over the lazy Brown Dog.</p>
 * @endexample
 * <p>All Caps Text.</p>
 * @example
 * <p class="all-caps">The quick Red Fox jumped over the lazy Brown Dog.</p>
 * @endexample
 * <p>Lowercase Text.</p>
 * @example
 * <p class="lowercase">The quick Red Fox jumped over the lazy Brown Dog.</p>
 * @endexample
 */
/* line 85, ../RiotKit/scss/globals/typography/_mixin.scss */
.featured {
  font-size: 1.13333em;
}

/* line 88, ../RiotKit/scss/globals/typography/_mixin.scss */
.all-caps {
  text-transform: uppercase;
}
/* line 91, ../RiotKit/scss/globals/typography/_mixin.scss */
.i18n-el .all-caps {
  text-transform: none;
}

/* line 97, ../RiotKit/scss/globals/typography/_mixin.scss */
.lowercase {
  text-transform: lowercase;
}
/* line 101, ../RiotKit/scss/globals/typography/_mixin.scss */
.i18n-pl .lowercase, .i18n-el .lowercase {
  text-transform: none;
}

/* line 107, ../RiotKit/scss/globals/typography/_mixin.scss */
.subtle {
  font-size: 0.66667em;
  text-transform: uppercase;
  color: #888888;
}
/* line 112, ../RiotKit/scss/globals/typography/_mixin.scss */
.subtle a {
  color: #888888;
}
/* line 116, ../RiotKit/scss/globals/typography/_mixin.scss */
.i18n-el .subtle {
  font-size: 0.8em;
  text-transform: none;
}

/* line 122, ../RiotKit/scss/globals/typography/_mixin.scss */
.no-break {
  white-space: nowrap;
}

/**
 * @category Typography
 * @selector Content Alignment
 * <p>You can use the following classes to control content alignment: <code>.content-left</code>, <code>.content-center</code>, <code>.content-right</code>, <code>.content-justify</code>.</p>
 * @example
 * <p class="content-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dignissim ante. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netusetmalesuada fames ac turpis egestas. Duis risus mauris, elementum eget consequat non, mattis ac ante. Maecenas vel turpis quis erat hendrerit luctus. Donec at augue eget ligula euismod malesuada quis placerat nunc. Aliquam vel faucibus enim, dictum euismod felis. Suspendisse vehicula odio at turpis blandit egestas.</p>
 * @endexample
 * @example
 * <p class="content-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dignissim ante. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netusetmalesuada fames ac turpis egestas. Duis risus mauris, elementum eget consequat non, mattis ac ante. Maecenas vel turpis quis erat hendrerit luctus. Donec at augue eget ligula euismod malesuada quis placerat nunc. Aliquam vel faucibus enim, dictum euismod felis. Suspendisse vehicula odio at turpis blandit egestas.</p>
 * @endexample
 * @example
 * <p class="content-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dignissim ante. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netusetmalesuada fames ac turpis egestas. Duis risus mauris, elementum eget consequat non, mattis ac ante. Maecenas vel turpis quis erat hendrerit luctus. Donec at augue eget ligula euismod malesuada quis placerat nunc. Aliquam vel faucibus enim, dictum euismod felis. Suspendisse vehicula odio at turpis blandit egestas.</p>
 * @endexample
 * @example
 * <p class="content-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet dignissim ante. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netusetmalesuada fames ac turpis egestas. Duis risus mauris, elementum eget consequat non, mattis ac ante. Maecenas vel turpis quis erat hendrerit luctus. Donec at augue eget ligula euismod malesuada quis placerat nunc. Aliquam vel faucibus enim, dictum euismod felis. Suspendisse vehicula odio at turpis blandit egestas.</p>
 * @endexample
 */
/* line 144, ../RiotKit/scss/globals/typography/_mixin.scss */
.content-left {
  text-align: left;
}

/* line 147, ../RiotKit/scss/globals/typography/_mixin.scss */
.content-center {
  text-align: center;
}

/* line 150, ../RiotKit/scss/globals/typography/_mixin.scss */
.content-right {
  text-align: right;
}
/* line 153, ../RiotKit/scss/globals/typography/_mixin.scss */
.content-right > div {
  display: inline-block;
}

/* line 157, ../RiotKit/scss/globals/typography/_mixin.scss */
.content-justify {
  text-align: justify;
}

/**
 * @category Typography
 * @selector Blockquote
 * <p>Blockquotes are great for calling out important or catchy phrases from your article and can draw the attention of the reader to entice them to read more.</p>
 * @example
 * <blockquote class="blockquote">
 *   Saying Something Super Interesting Here ... Did You Notice? Blockquotes can occupy the full page width ...
 * </blockquote>
 * @endexample
 */
/* line 172, ../RiotKit/scss/globals/typography/_mixin.scss */
blockquote.blockquote {
  quotes: "“" "”" "‘" "’";
  font-size: 24px;
  font-style: italic;
  font-weight: 100;
  margin: 20px 30px 20px 30px;
  font-family: Times, serif;
  line-height: 1.5em;
}
/* line 181, ../RiotKit/scss/globals/typography/_mixin.scss */
blockquote.blockquote:before, blockquote.blockquote:after {
  font-size: 50px;
  font-style: italic;
  display: inline-block;
  position: absolute;
  color: #bbbbbb;
  font-family: Times, serif;
  font-weight: bold;
  line-height: 1em;
}
/* line 191, ../RiotKit/scss/globals/typography/_mixin.scss */
blockquote.blockquote:before {
  content: open-quote;
  margin-left: -30px;
  margin-top: -5px;
}
/* line 196, ../RiotKit/scss/globals/typography/_mixin.scss */
blockquote.blockquote:after {
  content: close-quote;
  margin-left: 10px;
  margin-top: -5px;
}

/**
 * @category Typography
 * @selector Headings
 * <p>Headings should be used to add document semantic document structure.</p>
 * @example
 * <h1>Heading Text</h1>
 * <h2>Heading Text</h2>
 * <h3>Heading Text</h3>
 * <h4>Heading Text</h4>
 * @endexample
 */
/* line 16, ../RiotKit/scss/globals/headers/_mixin.scss */
h1,
h2,
h3,
h4 {
  font-weight: normal;
  font-family: "Adobe Garamond Pro", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  line-height: 1em;
  color: #2b2b2b;
  /* i18n-fonts : headings font */
}
/* line 31, ../RiotKit/scss/globals/headers/_mixin.scss */
.i18n-cs h1, .i18n-el h1, .i18n-tr h1, .i18n-pl h1, .i18n-pt h1, .i18n-tr h1, .i18n-ro h1, .i18n-hu h1, .i18n-ru h1, .i18n-cs
h2, .i18n-el
h2, .i18n-tr
h2, .i18n-pl
h2, .i18n-pt
h2, .i18n-tr
h2, .i18n-ro
h2, .i18n-hu
h2, .i18n-ru
h2, .i18n-cs
h3, .i18n-el
h3, .i18n-tr
h3, .i18n-pl
h3, .i18n-pt
h3, .i18n-tr
h3, .i18n-ro
h3, .i18n-hu
h3, .i18n-ru
h3, .i18n-cs
h4, .i18n-el
h4, .i18n-tr
h4, .i18n-pl
h4, .i18n-pt
h4, .i18n-tr
h4, .i18n-ro
h4, .i18n-hu
h4, .i18n-ru
h4 {
  font-family: Georgia, "Times New Roman", Times, serif;
}
/* line 35, ../RiotKit/scss/globals/headers/_mixin.scss */
.i18n-ja h1, .i18n-ja
h2, .i18n-ja
h3, .i18n-ja
h4 {
  font-family: "AxisStd-Medium", sans-serif;
}

/**
 * @category Typography
 * @selector Heading Font Utility Class
 * <p>Sometimes you want to use the headings font without acutally using a heading tag.  In these cases it is best to use the <code>.font-headings</code> class.  This class will handle the appropriate font fixes that are needed for specific languages.</p>
 * @example
 * <span class="font-headings">
 *   some text
 * </span>
 * @endexample
 */
/* line 50, ../RiotKit/scss/globals/headers/_mixin.scss */
.font-headings {
  font-family: "Adobe Garamond Pro", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  /* i18n-fonts : headings font */
}
/* line 62, ../RiotKit/scss/globals/headers/_mixin.scss */
.i18n-cs .font-headings, .i18n-el .font-headings, .i18n-tr .font-headings, .i18n-pl .font-headings, .i18n-pt .font-headings, .i18n-tr .font-headings, .i18n-ro .font-headings, .i18n-hu .font-headings, .i18n-ru .font-headings {
  font-family: Georgia, "Times New Roman", Times, serif;
}
/* line 66, ../RiotKit/scss/globals/headers/_mixin.scss */
.i18n-ja .font-headings {
  font-family: "AxisStd-Medium", sans-serif;
}

/* line 71, ../RiotKit/scss/globals/headers/_mixin.scss */
h1 {
  font-size: 2.8em;
  margin: 10px 0 0 0;
}

/* line 75, ../RiotKit/scss/globals/headers/_mixin.scss */
h2 {
  font-size: 2em;
  margin: 10px 0 0 0;
  /* i18n-fonts : h2 font size */
}
/* line 88, ../RiotKit/scss/globals/headers/_mixin.scss */
.i18n-cs h2, .i18n-el h2, .i18n-tr h2, .i18n-pl h2, .i18n-pt h2, .i18n-tr h2, .i18n-ro h2, .i18n-hu h2, .i18n-ru h2 {
  font-size: 1.8em;
}

/* line 93, ../RiotKit/scss/globals/headers/_mixin.scss */
h3 {
  font-size: 1.73333em;
  margin: 10px 0 0 0;
  line-height: 1em;
  /* i18n-fonts : h4 font size */
}
/* line 107, ../RiotKit/scss/globals/headers/_mixin.scss */
.i18n-cs h3, .i18n-el h3, .i18n-tr h3, .i18n-pl h3, .i18n-pt h3, .i18n-tr h3, .i18n-ro h3, .i18n-hu h3, .i18n-ru h3 {
  font-size: 1.5em;
}

/* line 112, ../RiotKit/scss/globals/headers/_mixin.scss */
h4 {
  font-size: 1.33333em;
  color: #3e3f41;
  margin: 10px 0 0 0;
  line-height: 1.1em;
  /* i18n-fonts : h4 font size */
}
/* line 127, ../RiotKit/scss/globals/headers/_mixin.scss */
.i18n-cs h4, .i18n-el h4, .i18n-tr h4, .i18n-pl h4, .i18n-pt h4, .i18n-tr h4, .i18n-ro h4, .i18n-hu h4, .i18n-ru h4 {
  font-size: 1.1em;
}

/* line 136, ../RiotKit/scss/globals/headers/_mixin.scss */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
  margin-top: 0;
}

/* line 143, ../RiotKit/scss/globals/headers/_mixin.scss */
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child {
  margin-bottom: 0;
}

/* line 150, ../RiotKit/scss/globals/headers/_mixin.scss */
h1 > a,
h2 > a,
h3 > a,
h4 > a {
  text-decoration: none;
}

/* line 2, ../RiotKit/scss/globals/images/_mixin.scss */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* line 8, ../RiotKit/scss/globals/images/_mixin.scss */
a img {
  border: 0;
}

/* line 12, ../RiotKit/scss/globals/images/_mixin.scss */
.vertical-accent {
  position: absolute;
  top: 20px;
  bottom: 0;
  right: 0;
  left: 20px;
  overflow: hidden;
}
/* line 20, ../RiotKit/scss/globals/images/_mixin.scss */
.vertical-accent .vertical-accent-content {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* line 29, ../RiotKit/scss/globals/images/_mixin.scss */
.vertical-accent img {
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
}
/* line 36, ../RiotKit/scss/globals/images/_mixin.scss */
.vertical-accent .content-border,
.vertical-accent .simple-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* line 45, ../RiotKit/scss/globals/images/_mixin.scss */
.content-border .vertical-accent-content {
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: #000;
}

/* line 53, ../RiotKit/scss/globals/images/_mixin.scss */
.feature-splash {
  margin-bottom: 20px;
}
/* line 56, ../RiotKit/scss/globals/images/_mixin.scss */
.feature-splash img {
  width: 100%;
  vertical-align: sub;
}

/* line 62, ../RiotKit/scss/globals/images/_mixin.scss */
.ie .feature-splash img {
  vertical-align: bottom;
}

/* line 66, ../RiotKit/scss/globals/images/_mixin.scss */
.inline-left {
  float: left;
  margin-right: 10px;
}

/* line 71, ../RiotKit/scss/globals/images/_mixin.scss */
.inline-right {
  float: right;
  margin-left: 10px;
}

/**
 * @category Layout
 * @selector Border Box
 * <p>Note that LoLKit applies <code>box-sizing: border-box;</code> to all elements by default, and this property is critical
 * to the way that LoLKit handles all of it's layouts.  Basically, it makes it so that when you set a width on an element
 * you don't have to worry about the margins, padding or borders applied to that element ... it will still be the width that
 * you set.  So nice!! <a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw/">Paul Irish goes into detail.</a></p>
 */
/* line 23, ../RiotKit/scss/globals/layout/_mixin.scss */
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/**
 * @category Layout
 * @selector .clearfix
 * <p>Clears the current element, causing it to match the height of it's content elements.</p>
 */
/* line 34, ../RiotKit/scss/globals/layout/_mixin.scss */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

/**
 * @category Layout
 * @selector Margin Overrides
 * <p>Use these classes as a last resort when resolving layout issues:</p>
 * <ul>
 *   <li>Use <code>.margin-none</code> on any element to set it's margins to 0px.</li>
 *   <li>Use <code>.margin-vertical</code> to force 20px margins top and bottom and 0px margins left and right.</li>
 *   <li>Use <code>.margin-vertical-half</code> to force 10px margins top and bottom and 0px margins left and right.</li>
 *   <li>Use <code>.margin-horizontal</code> to force 0px margins top and bottom and 20px margins left and right.</li>
 *   <li>Use <code>.margin-horizontal-half</code> to force 0px margins top and bottom and 10px margins left and right.</li>
 * </ul>
 */
/* line 55, ../RiotKit/scss/globals/layout/_mixin.scss */
.margin-none {
  margin: 0px !important;
}

/* line 58, ../RiotKit/scss/globals/layout/_mixin.scss */
.margin-vertical {
  margin: 20px 0px !important;
}

/* line 61, ../RiotKit/scss/globals/layout/_mixin.scss */
.margin-vertical-half {
  margin: 10px 0px !important;
}

/* line 64, ../RiotKit/scss/globals/layout/_mixin.scss */
.margin-horizontal {
  margin: 0px 20px !important;
}

/* line 67, ../RiotKit/scss/globals/layout/_mixin.scss */
.margin-horizontal-half {
  margin: 0px 10px !important;
}

/**
 * @category Layout
 * @selector .gs-container
 * <p>Grid containers are the foundation of the RiotGrid. They control the gutter size of all grid segments directly
 * beneath them as well as force a new row in the grid's current layout. Grid containers are simply div elements with a
 * special class on them. The available classes are:</p>
 * <ul>
 *  <li><code>.gs-container</code> is the most basic grid container giving the grid segments the default 20px gutter size.</li>
 *  <li><code>.gs-half-gutter</code> changes its children to have a 10px gutter size.</li>
 *  <li><code>.gs-no-gutter</code> changes the gutter to, as you would expect, 0px.</li>
 *  <li><code>.no-vertical-gutter</code> removes all vertical spacing from the grid container itself as well as its children.</li>
 * </ul>
 */
/* line 85, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-container {
  clear: both;
  margin-left: -20px;
  overflow: hidden;
}
/* line 90, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-container > * {
  padding-left: 20px;
  padding-top: 20px;
  float: left;
  position: relative;
}

/* line 98, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-container:first-child {
  margin-top: -20px;
}

/* line 102, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-half-gutter {
  clear: both;
  margin-left: -10px;
  overflow: hidden;
}
/* line 107, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-half-gutter > * {
  padding-left: 10px;
  padding-top: 10px;
  float: left;
}

/* line 114, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-half-gutter:first-child {
  margin-top: -10px;
}

/* line 118, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-no-gutter {
  clear: both;
  margin-left: 0;
  margin-top: 0;
  overflow: hidden;
}
/* line 124, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-no-gutter > * {
  padding-left: 0;
  padding-top: 0;
  float: left;
}

/* line 131, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-no-gutter:first-child {
  margin-top: 0;
}

/* line 135, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-vertical-gutter {
  margin-top: 0;
}
/* line 138, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-vertical-gutter > * {
  padding-top: 0;
}

/**
 * @category Layout
 * @selector .gs-table
 * <p>This is a special kind of grid container. It causes all elements within it to be rendered as table cells. This
 * should only be used if vertical alignment is an extremely important thing between many grid elements.</p>
 */
/* line 149, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-table {
  width: 100%;
  display: table;
  border-collapse: collapse;
  margin-left: 0;
}
/* line 155, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-table > * {
  display: table-cell;
  float: none;
  position: relative;
}
/* line 161, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-table > *:first-child {
  padding: 20px 10px 0 0;
}
/* line 165, ../RiotKit/scss/globals/layout/_mixin.scss */
.gs-table > *:last-child {
  padding: 20px 0 0 10px;
}

/**
 * @category Layout
 * @selector .default-X-Y
 * <p>RiotGrid uses proportional elements rather than a column based grid. This prevents some obvious problems with
 * traditional column grids. For example, we can have a grid with 5 items evenly spaced which would be impossible in a
 * standard 12 column grid system.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container default-12-col">
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *     <div><div>1</div></div>
 *   </div>
 *   <div class="gs-container default-5-col">
 *     <div><div>Panel 1</div></div>
 *     <div><div>Panel 2</div></div>
 *     <div><div>Panel 3</div></div>
 *     <div><div>Panel 4</div></div>
 *     <div><div>Panel 5</div></div>
 *   </div>
 * </div>
 *
 * <p>All fractions are available for use in the grid up to and including 11/12. To apply a grid proportion to a grid
 * segment simply add the <code>.default-X-Y</code> class to it and replace X with the desired numerator and Y with the desired
 * denominator. For instance, to get a grid that spans half the page you would use <code>.default-1-2</code>. All fractions are in
 * simplified form. As such grid sizes such as 8/12 should be reduced to <code>.default-3-4</code>.</p>
 *
 * <p>In the event a grid will all have the same sized columns, a class of <code>.default-X-col</code> can be applied to the
 * container itself. This will give the same result as giving all child elements the class of <code>.default-1-X</code>.</p>
 */
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-col > * {
  width: 100%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-1 {
  width: 100%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-1 {
  margin-left: 100%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-1 {
  margin-right: 100%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-2-col > * {
  width: 50%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-2 {
  width: 50%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-2 {
  margin-left: 50%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-2 {
  margin-right: 50%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-col > * {
  width: 33.33333%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-3 {
  width: 33.33333%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-3 {
  margin-left: 33.33333%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-3 {
  margin-right: 33.33333%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-2-3 {
  width: 66.66667%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-2-3 {
  margin-left: 66.66667%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-2-3 {
  margin-right: 66.66667%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-4-col > * {
  width: 25%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-4 {
  width: 25%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-4 {
  margin-left: 25%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-4 {
  margin-right: 25%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-4 {
  width: 75%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-3-4 {
  margin-left: 75%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-3-4 {
  margin-right: 75%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-5-col > * {
  width: 20%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-5 {
  width: 20%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-5 {
  margin-left: 20%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-5 {
  margin-right: 20%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-2-5 {
  width: 40%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-2-5 {
  margin-left: 40%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-2-5 {
  margin-right: 40%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-5 {
  width: 60%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-3-5 {
  margin-left: 60%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-3-5 {
  margin-right: 60%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-4-5 {
  width: 80%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-4-5 {
  margin-left: 80%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-4-5 {
  margin-right: 80%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-6-col > * {
  width: 16.66667%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-6 {
  width: 16.66667%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-6 {
  margin-left: 16.66667%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-6 {
  margin-right: 16.66667%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-5-6 {
  width: 83.33333%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-5-6 {
  margin-left: 83.33333%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-5-6 {
  margin-right: 83.33333%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-7-col > * {
  width: 14.28571%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-7 {
  width: 14.28571%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-7 {
  margin-left: 14.28571%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-7 {
  margin-right: 14.28571%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-2-7 {
  width: 28.57143%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-2-7 {
  margin-left: 28.57143%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-2-7 {
  margin-right: 28.57143%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-7 {
  width: 42.85714%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-3-7 {
  margin-left: 42.85714%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-3-7 {
  margin-right: 42.85714%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-4-7 {
  width: 57.14286%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-4-7 {
  margin-left: 57.14286%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-4-7 {
  margin-right: 57.14286%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-5-7 {
  width: 71.42857%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-5-7 {
  margin-left: 71.42857%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-5-7 {
  margin-right: 71.42857%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-6-7 {
  width: 85.71429%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-6-7 {
  margin-left: 85.71429%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-6-7 {
  margin-right: 85.71429%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-8-col > * {
  width: 12.5%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-8 {
  width: 12.5%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-8 {
  margin-left: 12.5%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-8 {
  margin-right: 12.5%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-8 {
  width: 37.5%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-3-8 {
  margin-left: 37.5%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-3-8 {
  margin-right: 37.5%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-5-8 {
  width: 62.5%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-5-8 {
  margin-left: 62.5%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-5-8 {
  margin-right: 62.5%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-7-8 {
  width: 87.5%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-7-8 {
  margin-left: 87.5%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-7-8 {
  margin-right: 87.5%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-9-col > * {
  width: 11.11111%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-9 {
  width: 11.11111%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-9 {
  margin-left: 11.11111%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-9 {
  margin-right: 11.11111%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-2-9 {
  width: 22.22222%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-2-9 {
  margin-left: 22.22222%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-2-9 {
  margin-right: 22.22222%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-9 {
  width: 33.33333%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-3-9 {
  margin-left: 33.33333%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-3-9 {
  margin-right: 33.33333%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-4-9 {
  width: 44.44444%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-4-9 {
  margin-left: 44.44444%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-4-9 {
  margin-right: 44.44444%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-5-9 {
  width: 55.55556%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-5-9 {
  margin-left: 55.55556%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-5-9 {
  margin-right: 55.55556%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-6-9 {
  width: 66.66667%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-6-9 {
  margin-left: 66.66667%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-6-9 {
  margin-right: 66.66667%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-7-9 {
  width: 77.77778%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-7-9 {
  margin-left: 77.77778%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-7-9 {
  margin-right: 77.77778%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-8-9 {
  width: 88.88889%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-8-9 {
  margin-left: 88.88889%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-8-9 {
  margin-right: 88.88889%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-10-col > * {
  width: 10%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-10 {
  width: 10%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-10 {
  margin-left: 10%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-10 {
  margin-right: 10%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-10 {
  width: 30%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-3-10 {
  margin-left: 30%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-3-10 {
  margin-right: 30%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-7-10 {
  width: 70%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-7-10 {
  margin-left: 70%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-7-10 {
  margin-right: 70%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-9-10 {
  width: 90%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-9-10 {
  margin-left: 90%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-9-10 {
  margin-right: 90%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-11-col > * {
  width: 9.09091%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-11 {
  width: 9.09091%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-11 {
  margin-left: 9.09091%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-11 {
  margin-right: 9.09091%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-2-11 {
  width: 18.18182%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-2-11 {
  margin-left: 18.18182%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-2-11 {
  margin-right: 18.18182%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-3-11 {
  width: 27.27273%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-3-11 {
  margin-left: 27.27273%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-3-11 {
  margin-right: 27.27273%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-4-11 {
  width: 36.36364%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-4-11 {
  margin-left: 36.36364%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-4-11 {
  margin-right: 36.36364%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-5-11 {
  width: 45.45455%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-5-11 {
  margin-left: 45.45455%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-5-11 {
  margin-right: 45.45455%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-6-11 {
  width: 54.54545%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-6-11 {
  margin-left: 54.54545%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-6-11 {
  margin-right: 54.54545%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-7-11 {
  width: 63.63636%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-7-11 {
  margin-left: 63.63636%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-7-11 {
  margin-right: 63.63636%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-8-11 {
  width: 72.72727%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-8-11 {
  margin-left: 72.72727%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-8-11 {
  margin-right: 72.72727%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-9-11 {
  width: 81.81818%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-9-11 {
  margin-left: 81.81818%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-9-11 {
  margin-right: 81.81818%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-10-11 {
  width: 90.90909%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-10-11 {
  margin-left: 90.90909%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-10-11 {
  margin-right: 90.90909%;
}

/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-12-col > * {
  width: 8.33333%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-1-12 {
  width: 8.33333%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-1-12 {
  margin-left: 8.33333%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-1-12 {
  margin-right: 8.33333%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-5-12 {
  width: 41.66667%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-5-12 {
  margin-left: 41.66667%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-5-12 {
  margin-right: 41.66667%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-7-12 {
  width: 58.33333%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-7-12 {
  margin-left: 58.33333%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-7-12 {
  margin-right: 58.33333%;
}

/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-11-12 {
  width: 91.66667%;
}

/**
 * @category Layout
 * @selector .default-prefix-X-Y, .default-suffix-X-Y
 * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
 * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
 * after the grid segment.</p>
 *
 * <div class="grid-example">
 *   <div class="gs-container">
 *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
 *     <div class="default-1-3"><div>Panel 2</div></div>
 *   </div>
 * </div>
 */
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-prefix-11-12 {
  margin-left: 91.66667%;
}

/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.default-suffix-11-12 {
  margin-right: 91.66667%;
}

/**
 * @category Layout
 * @selector .large-desktop-X-Y, .desktop-X-Y, .phone-X-Y, .tablet-X-Y
 * <p>The RiotGrid comes with out of the box responsive functionality. The standard {@link .default-X-Y} selector will
 * be used as a fallback when no responsive layout is present. However, should a flexible design be needed, the
 * <code>default</code> prefix can be replaced with any of the following options. Each of these are triggered when
 * the screen width exceeds the minimum width:</p>
 *
 * <ul>
 *  <li><code>large-desktop</code> - 1500px</li>
 *  <li><code>desktop</code> - 940px</li>
 *  <li><code>tablet</code> - 768px</li>
 *  <li><code>phone</code> - 480px</li>
 * </ul>
 *
 * <p>A <code>default</code> setting must also be provided on all grid elements. This gives the layout something to
 * fall back to should the screen not match any of the breakpoints given.</p>
 */
@media only screen and (min-width: 480px) {
  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-col > * {
    width: 100%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-1 {
    width: 100%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-1 {
    margin-left: 100%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-1 {
    margin-right: 100%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-2-col > * {
    width: 50%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-2 {
    width: 50%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-2 {
    margin-left: 50%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-2 {
    margin-right: 50%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-col > * {
    width: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-3 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-3 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-3 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-2-3 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-2-3 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-2-3 {
    margin-right: 66.66667%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-4-col > * {
    width: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-4 {
    width: 25%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-4 {
    margin-left: 25%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-4 {
    margin-right: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-4 {
    width: 75%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-3-4 {
    margin-left: 75%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-3-4 {
    margin-right: 75%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-5-col > * {
    width: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-5 {
    width: 20%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-5 {
    margin-left: 20%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-5 {
    margin-right: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-2-5 {
    width: 40%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-2-5 {
    margin-left: 40%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-2-5 {
    margin-right: 40%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-5 {
    width: 60%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-3-5 {
    margin-left: 60%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-3-5 {
    margin-right: 60%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-4-5 {
    width: 80%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-4-5 {
    margin-left: 80%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-4-5 {
    margin-right: 80%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-6-col > * {
    width: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-6 {
    width: 16.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-6 {
    margin-left: 16.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-6 {
    margin-right: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-5-6 {
    width: 83.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-5-6 {
    margin-left: 83.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-5-6 {
    margin-right: 83.33333%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-7-col > * {
    width: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-7 {
    width: 14.28571%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-7 {
    margin-left: 14.28571%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-7 {
    margin-right: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-2-7 {
    width: 28.57143%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-2-7 {
    margin-left: 28.57143%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-2-7 {
    margin-right: 28.57143%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-7 {
    width: 42.85714%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-3-7 {
    margin-left: 42.85714%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-3-7 {
    margin-right: 42.85714%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-4-7 {
    width: 57.14286%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-4-7 {
    margin-left: 57.14286%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-4-7 {
    margin-right: 57.14286%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-5-7 {
    width: 71.42857%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-5-7 {
    margin-left: 71.42857%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-5-7 {
    margin-right: 71.42857%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-6-7 {
    width: 85.71429%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-6-7 {
    margin-left: 85.71429%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-6-7 {
    margin-right: 85.71429%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-8-col > * {
    width: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-8 {
    width: 12.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-8 {
    margin-left: 12.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-8 {
    margin-right: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-8 {
    width: 37.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-3-8 {
    margin-left: 37.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-3-8 {
    margin-right: 37.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-5-8 {
    width: 62.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-5-8 {
    margin-left: 62.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-5-8 {
    margin-right: 62.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-7-8 {
    width: 87.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-7-8 {
    margin-left: 87.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-7-8 {
    margin-right: 87.5%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-9-col > * {
    width: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-9 {
    width: 11.11111%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-9 {
    margin-left: 11.11111%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-9 {
    margin-right: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-2-9 {
    width: 22.22222%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-2-9 {
    margin-left: 22.22222%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-2-9 {
    margin-right: 22.22222%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-9 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-3-9 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-3-9 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-4-9 {
    width: 44.44444%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-4-9 {
    margin-left: 44.44444%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-4-9 {
    margin-right: 44.44444%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-5-9 {
    width: 55.55556%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-5-9 {
    margin-left: 55.55556%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-5-9 {
    margin-right: 55.55556%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-6-9 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-6-9 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-6-9 {
    margin-right: 66.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-7-9 {
    width: 77.77778%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-7-9 {
    margin-left: 77.77778%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-7-9 {
    margin-right: 77.77778%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-8-9 {
    width: 88.88889%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-8-9 {
    margin-left: 88.88889%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-8-9 {
    margin-right: 88.88889%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-10-col > * {
    width: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-10 {
    width: 10%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-10 {
    margin-left: 10%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-10 {
    margin-right: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-10 {
    width: 30%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-3-10 {
    margin-left: 30%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-3-10 {
    margin-right: 30%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-7-10 {
    width: 70%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-7-10 {
    margin-left: 70%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-7-10 {
    margin-right: 70%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-9-10 {
    width: 90%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-9-10 {
    margin-left: 90%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-9-10 {
    margin-right: 90%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-11-col > * {
    width: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-11 {
    width: 9.09091%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-11 {
    margin-left: 9.09091%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-11 {
    margin-right: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-2-11 {
    width: 18.18182%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-2-11 {
    margin-left: 18.18182%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-2-11 {
    margin-right: 18.18182%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-3-11 {
    width: 27.27273%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-3-11 {
    margin-left: 27.27273%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-3-11 {
    margin-right: 27.27273%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-4-11 {
    width: 36.36364%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-4-11 {
    margin-left: 36.36364%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-4-11 {
    margin-right: 36.36364%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-5-11 {
    width: 45.45455%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-5-11 {
    margin-left: 45.45455%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-5-11 {
    margin-right: 45.45455%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-6-11 {
    width: 54.54545%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-6-11 {
    margin-left: 54.54545%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-6-11 {
    margin-right: 54.54545%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-7-11 {
    width: 63.63636%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-7-11 {
    margin-left: 63.63636%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-7-11 {
    margin-right: 63.63636%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-8-11 {
    width: 72.72727%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-8-11 {
    margin-left: 72.72727%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-8-11 {
    margin-right: 72.72727%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-9-11 {
    width: 81.81818%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-9-11 {
    margin-left: 81.81818%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-9-11 {
    margin-right: 81.81818%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-10-11 {
    width: 90.90909%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-10-11 {
    margin-left: 90.90909%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-10-11 {
    margin-right: 90.90909%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-12-col > * {
    width: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-1-12 {
    width: 8.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-1-12 {
    margin-left: 8.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-1-12 {
    margin-right: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-5-12 {
    width: 41.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-5-12 {
    margin-left: 41.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-5-12 {
    margin-right: 41.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-7-12 {
    width: 58.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-7-12 {
    margin-left: 58.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-7-12 {
    margin-right: 58.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-11-12 {
    width: 91.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-prefix-11-12 {
    margin-left: 91.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .phone-suffix-11-12 {
    margin-right: 91.66667%;
  }
}
@media only screen and (min-width: 768px) {
  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-col > * {
    width: 100%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-1 {
    width: 100%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-1 {
    margin-left: 100%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-1 {
    margin-right: 100%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-2-col > * {
    width: 50%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-2 {
    width: 50%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-2 {
    margin-left: 50%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-2 {
    margin-right: 50%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-col > * {
    width: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-3 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-3 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-3 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-2-3 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-2-3 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-2-3 {
    margin-right: 66.66667%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-4-col > * {
    width: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-4 {
    width: 25%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-4 {
    margin-left: 25%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-4 {
    margin-right: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-4 {
    width: 75%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-3-4 {
    margin-left: 75%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-3-4 {
    margin-right: 75%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-5-col > * {
    width: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-5 {
    width: 20%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-5 {
    margin-left: 20%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-5 {
    margin-right: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-2-5 {
    width: 40%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-2-5 {
    margin-left: 40%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-2-5 {
    margin-right: 40%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-5 {
    width: 60%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-3-5 {
    margin-left: 60%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-3-5 {
    margin-right: 60%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-4-5 {
    width: 80%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-4-5 {
    margin-left: 80%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-4-5 {
    margin-right: 80%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-6-col > * {
    width: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-6 {
    width: 16.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-6 {
    margin-left: 16.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-6 {
    margin-right: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-5-6 {
    width: 83.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-5-6 {
    margin-left: 83.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-5-6 {
    margin-right: 83.33333%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-7-col > * {
    width: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-7 {
    width: 14.28571%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-7 {
    margin-left: 14.28571%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-7 {
    margin-right: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-2-7 {
    width: 28.57143%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-2-7 {
    margin-left: 28.57143%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-2-7 {
    margin-right: 28.57143%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-7 {
    width: 42.85714%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-3-7 {
    margin-left: 42.85714%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-3-7 {
    margin-right: 42.85714%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-4-7 {
    width: 57.14286%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-4-7 {
    margin-left: 57.14286%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-4-7 {
    margin-right: 57.14286%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-5-7 {
    width: 71.42857%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-5-7 {
    margin-left: 71.42857%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-5-7 {
    margin-right: 71.42857%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-6-7 {
    width: 85.71429%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-6-7 {
    margin-left: 85.71429%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-6-7 {
    margin-right: 85.71429%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-8-col > * {
    width: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-8 {
    width: 12.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-8 {
    margin-left: 12.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-8 {
    margin-right: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-8 {
    width: 37.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-3-8 {
    margin-left: 37.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-3-8 {
    margin-right: 37.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-5-8 {
    width: 62.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-5-8 {
    margin-left: 62.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-5-8 {
    margin-right: 62.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-7-8 {
    width: 87.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-7-8 {
    margin-left: 87.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-7-8 {
    margin-right: 87.5%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-9-col > * {
    width: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-9 {
    width: 11.11111%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-9 {
    margin-left: 11.11111%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-9 {
    margin-right: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-2-9 {
    width: 22.22222%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-2-9 {
    margin-left: 22.22222%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-2-9 {
    margin-right: 22.22222%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-9 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-3-9 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-3-9 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-4-9 {
    width: 44.44444%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-4-9 {
    margin-left: 44.44444%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-4-9 {
    margin-right: 44.44444%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-5-9 {
    width: 55.55556%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-5-9 {
    margin-left: 55.55556%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-5-9 {
    margin-right: 55.55556%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-6-9 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-6-9 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-6-9 {
    margin-right: 66.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-7-9 {
    width: 77.77778%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-7-9 {
    margin-left: 77.77778%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-7-9 {
    margin-right: 77.77778%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-8-9 {
    width: 88.88889%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-8-9 {
    margin-left: 88.88889%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-8-9 {
    margin-right: 88.88889%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-10-col > * {
    width: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-10 {
    width: 10%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-10 {
    margin-left: 10%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-10 {
    margin-right: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-10 {
    width: 30%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-3-10 {
    margin-left: 30%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-3-10 {
    margin-right: 30%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-7-10 {
    width: 70%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-7-10 {
    margin-left: 70%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-7-10 {
    margin-right: 70%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-9-10 {
    width: 90%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-9-10 {
    margin-left: 90%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-9-10 {
    margin-right: 90%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-11-col > * {
    width: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-11 {
    width: 9.09091%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-11 {
    margin-left: 9.09091%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-11 {
    margin-right: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-2-11 {
    width: 18.18182%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-2-11 {
    margin-left: 18.18182%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-2-11 {
    margin-right: 18.18182%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-3-11 {
    width: 27.27273%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-3-11 {
    margin-left: 27.27273%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-3-11 {
    margin-right: 27.27273%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-4-11 {
    width: 36.36364%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-4-11 {
    margin-left: 36.36364%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-4-11 {
    margin-right: 36.36364%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-5-11 {
    width: 45.45455%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-5-11 {
    margin-left: 45.45455%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-5-11 {
    margin-right: 45.45455%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-6-11 {
    width: 54.54545%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-6-11 {
    margin-left: 54.54545%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-6-11 {
    margin-right: 54.54545%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-7-11 {
    width: 63.63636%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-7-11 {
    margin-left: 63.63636%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-7-11 {
    margin-right: 63.63636%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-8-11 {
    width: 72.72727%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-8-11 {
    margin-left: 72.72727%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-8-11 {
    margin-right: 72.72727%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-9-11 {
    width: 81.81818%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-9-11 {
    margin-left: 81.81818%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-9-11 {
    margin-right: 81.81818%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-10-11 {
    width: 90.90909%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-10-11 {
    margin-left: 90.90909%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-10-11 {
    margin-right: 90.90909%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-12-col > * {
    width: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-1-12 {
    width: 8.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-1-12 {
    margin-left: 8.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-1-12 {
    margin-right: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-5-12 {
    width: 41.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-5-12 {
    margin-left: 41.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-5-12 {
    margin-right: 41.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-7-12 {
    width: 58.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-7-12 {
    margin-left: 58.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-7-12 {
    margin-right: 58.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-11-12 {
    width: 91.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-prefix-11-12 {
    margin-left: 91.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .tablet-suffix-11-12 {
    margin-right: 91.66667%;
  }
}
@media only screen and (min-width: 940px) {
  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-col > * {
    width: 100%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-1 {
    width: 100%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-1 {
    margin-left: 100%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-1 {
    margin-right: 100%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-2-col > * {
    width: 50%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-2 {
    width: 50%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-2 {
    margin-left: 50%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-2 {
    margin-right: 50%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-col > * {
    width: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-3 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-3 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-3 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-2-3 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-2-3 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-2-3 {
    margin-right: 66.66667%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-4-col > * {
    width: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-4 {
    width: 25%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-4 {
    margin-left: 25%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-4 {
    margin-right: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-4 {
    width: 75%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-3-4 {
    margin-left: 75%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-3-4 {
    margin-right: 75%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-5-col > * {
    width: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-5 {
    width: 20%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-5 {
    margin-left: 20%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-5 {
    margin-right: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-2-5 {
    width: 40%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-2-5 {
    margin-left: 40%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-2-5 {
    margin-right: 40%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-5 {
    width: 60%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-3-5 {
    margin-left: 60%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-3-5 {
    margin-right: 60%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-4-5 {
    width: 80%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-4-5 {
    margin-left: 80%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-4-5 {
    margin-right: 80%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-6-col > * {
    width: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-6 {
    width: 16.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-6 {
    margin-left: 16.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-6 {
    margin-right: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-5-6 {
    width: 83.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-5-6 {
    margin-left: 83.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-5-6 {
    margin-right: 83.33333%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-7-col > * {
    width: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-7 {
    width: 14.28571%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-7 {
    margin-left: 14.28571%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-7 {
    margin-right: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-2-7 {
    width: 28.57143%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-2-7 {
    margin-left: 28.57143%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-2-7 {
    margin-right: 28.57143%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-7 {
    width: 42.85714%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-3-7 {
    margin-left: 42.85714%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-3-7 {
    margin-right: 42.85714%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-4-7 {
    width: 57.14286%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-4-7 {
    margin-left: 57.14286%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-4-7 {
    margin-right: 57.14286%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-5-7 {
    width: 71.42857%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-5-7 {
    margin-left: 71.42857%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-5-7 {
    margin-right: 71.42857%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-6-7 {
    width: 85.71429%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-6-7 {
    margin-left: 85.71429%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-6-7 {
    margin-right: 85.71429%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-8-col > * {
    width: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-8 {
    width: 12.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-8 {
    margin-left: 12.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-8 {
    margin-right: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-8 {
    width: 37.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-3-8 {
    margin-left: 37.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-3-8 {
    margin-right: 37.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-5-8 {
    width: 62.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-5-8 {
    margin-left: 62.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-5-8 {
    margin-right: 62.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-7-8 {
    width: 87.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-7-8 {
    margin-left: 87.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-7-8 {
    margin-right: 87.5%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-9-col > * {
    width: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-9 {
    width: 11.11111%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-9 {
    margin-left: 11.11111%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-9 {
    margin-right: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-2-9 {
    width: 22.22222%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-2-9 {
    margin-left: 22.22222%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-2-9 {
    margin-right: 22.22222%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-9 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-3-9 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-3-9 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-4-9 {
    width: 44.44444%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-4-9 {
    margin-left: 44.44444%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-4-9 {
    margin-right: 44.44444%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-5-9 {
    width: 55.55556%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-5-9 {
    margin-left: 55.55556%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-5-9 {
    margin-right: 55.55556%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-6-9 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-6-9 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-6-9 {
    margin-right: 66.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-7-9 {
    width: 77.77778%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-7-9 {
    margin-left: 77.77778%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-7-9 {
    margin-right: 77.77778%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-8-9 {
    width: 88.88889%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-8-9 {
    margin-left: 88.88889%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-8-9 {
    margin-right: 88.88889%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-10-col > * {
    width: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-10 {
    width: 10%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-10 {
    margin-left: 10%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-10 {
    margin-right: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-10 {
    width: 30%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-3-10 {
    margin-left: 30%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-3-10 {
    margin-right: 30%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-7-10 {
    width: 70%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-7-10 {
    margin-left: 70%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-7-10 {
    margin-right: 70%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-9-10 {
    width: 90%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-9-10 {
    margin-left: 90%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-9-10 {
    margin-right: 90%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-11-col > * {
    width: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-11 {
    width: 9.09091%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-11 {
    margin-left: 9.09091%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-11 {
    margin-right: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-2-11 {
    width: 18.18182%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-2-11 {
    margin-left: 18.18182%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-2-11 {
    margin-right: 18.18182%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-3-11 {
    width: 27.27273%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-3-11 {
    margin-left: 27.27273%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-3-11 {
    margin-right: 27.27273%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-4-11 {
    width: 36.36364%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-4-11 {
    margin-left: 36.36364%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-4-11 {
    margin-right: 36.36364%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-5-11 {
    width: 45.45455%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-5-11 {
    margin-left: 45.45455%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-5-11 {
    margin-right: 45.45455%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-6-11 {
    width: 54.54545%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-6-11 {
    margin-left: 54.54545%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-6-11 {
    margin-right: 54.54545%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-7-11 {
    width: 63.63636%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-7-11 {
    margin-left: 63.63636%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-7-11 {
    margin-right: 63.63636%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-8-11 {
    width: 72.72727%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-8-11 {
    margin-left: 72.72727%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-8-11 {
    margin-right: 72.72727%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-9-11 {
    width: 81.81818%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-9-11 {
    margin-left: 81.81818%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-9-11 {
    margin-right: 81.81818%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-10-11 {
    width: 90.90909%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-10-11 {
    margin-left: 90.90909%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-10-11 {
    margin-right: 90.90909%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-12-col > * {
    width: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-1-12 {
    width: 8.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-1-12 {
    margin-left: 8.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-1-12 {
    margin-right: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-5-12 {
    width: 41.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-5-12 {
    margin-left: 41.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-5-12 {
    margin-right: 41.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-7-12 {
    width: 58.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-7-12 {
    margin-left: 58.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-7-12 {
    margin-right: 58.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-11-12 {
    width: 91.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-prefix-11-12 {
    margin-left: 91.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .desktop-suffix-11-12 {
    margin-right: 91.66667%;
  }
}
@media only screen and (min-width: 1500px) {
  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-col > * {
    width: 100%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-1 {
    width: 100%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-1 {
    margin-left: 100%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-1 {
    margin-right: 100%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-2-col > * {
    width: 50%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-2 {
    width: 50%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-2 {
    margin-left: 50%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-2 {
    margin-right: 50%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-col > * {
    width: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-3 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-3 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-3 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-2-3 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-2-3 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-2-3 {
    margin-right: 66.66667%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-4-col > * {
    width: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-4 {
    width: 25%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-4 {
    margin-left: 25%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-4 {
    margin-right: 25%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-4 {
    width: 75%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-3-4 {
    margin-left: 75%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-3-4 {
    margin-right: 75%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-5-col > * {
    width: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-5 {
    width: 20%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-5 {
    margin-left: 20%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-5 {
    margin-right: 20%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-2-5 {
    width: 40%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-2-5 {
    margin-left: 40%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-2-5 {
    margin-right: 40%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-5 {
    width: 60%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-3-5 {
    margin-left: 60%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-3-5 {
    margin-right: 60%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-4-5 {
    width: 80%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-4-5 {
    margin-left: 80%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-4-5 {
    margin-right: 80%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-6-col > * {
    width: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-6 {
    width: 16.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-6 {
    margin-left: 16.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-6 {
    margin-right: 16.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-5-6 {
    width: 83.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-5-6 {
    margin-left: 83.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-5-6 {
    margin-right: 83.33333%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-7-col > * {
    width: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-7 {
    width: 14.28571%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-7 {
    margin-left: 14.28571%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-7 {
    margin-right: 14.28571%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-2-7 {
    width: 28.57143%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-2-7 {
    margin-left: 28.57143%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-2-7 {
    margin-right: 28.57143%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-7 {
    width: 42.85714%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-3-7 {
    margin-left: 42.85714%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-3-7 {
    margin-right: 42.85714%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-4-7 {
    width: 57.14286%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-4-7 {
    margin-left: 57.14286%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-4-7 {
    margin-right: 57.14286%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-5-7 {
    width: 71.42857%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-5-7 {
    margin-left: 71.42857%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-5-7 {
    margin-right: 71.42857%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-6-7 {
    width: 85.71429%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-6-7 {
    margin-left: 85.71429%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-6-7 {
    margin-right: 85.71429%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-8-col > * {
    width: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-8 {
    width: 12.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-8 {
    margin-left: 12.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-8 {
    margin-right: 12.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-8 {
    width: 37.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-3-8 {
    margin-left: 37.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-3-8 {
    margin-right: 37.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-5-8 {
    width: 62.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-5-8 {
    margin-left: 62.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-5-8 {
    margin-right: 62.5%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-7-8 {
    width: 87.5%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-7-8 {
    margin-left: 87.5%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-7-8 {
    margin-right: 87.5%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-9-col > * {
    width: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-9 {
    width: 11.11111%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-9 {
    margin-left: 11.11111%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-9 {
    margin-right: 11.11111%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-2-9 {
    width: 22.22222%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-2-9 {
    margin-left: 22.22222%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-2-9 {
    margin-right: 22.22222%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-9 {
    width: 33.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-3-9 {
    margin-left: 33.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-3-9 {
    margin-right: 33.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-4-9 {
    width: 44.44444%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-4-9 {
    margin-left: 44.44444%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-4-9 {
    margin-right: 44.44444%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-5-9 {
    width: 55.55556%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-5-9 {
    margin-left: 55.55556%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-5-9 {
    margin-right: 55.55556%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-6-9 {
    width: 66.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-6-9 {
    margin-left: 66.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-6-9 {
    margin-right: 66.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-7-9 {
    width: 77.77778%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-7-9 {
    margin-left: 77.77778%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-7-9 {
    margin-right: 77.77778%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-8-9 {
    width: 88.88889%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-8-9 {
    margin-left: 88.88889%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-8-9 {
    margin-right: 88.88889%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-10-col > * {
    width: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-10 {
    width: 10%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-10 {
    margin-left: 10%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-10 {
    margin-right: 10%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-10 {
    width: 30%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-3-10 {
    margin-left: 30%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-3-10 {
    margin-right: 30%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-7-10 {
    width: 70%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-7-10 {
    margin-left: 70%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-7-10 {
    margin-right: 70%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-9-10 {
    width: 90%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-9-10 {
    margin-left: 90%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-9-10 {
    margin-right: 90%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-11-col > * {
    width: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-11 {
    width: 9.09091%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-11 {
    margin-left: 9.09091%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-11 {
    margin-right: 9.09091%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-2-11 {
    width: 18.18182%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-2-11 {
    margin-left: 18.18182%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-2-11 {
    margin-right: 18.18182%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-3-11 {
    width: 27.27273%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-3-11 {
    margin-left: 27.27273%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-3-11 {
    margin-right: 27.27273%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-4-11 {
    width: 36.36364%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-4-11 {
    margin-left: 36.36364%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-4-11 {
    margin-right: 36.36364%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-5-11 {
    width: 45.45455%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-5-11 {
    margin-left: 45.45455%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-5-11 {
    margin-right: 45.45455%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-6-11 {
    width: 54.54545%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-6-11 {
    margin-left: 54.54545%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-6-11 {
    margin-right: 54.54545%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-7-11 {
    width: 63.63636%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-7-11 {
    margin-left: 63.63636%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-7-11 {
    margin-right: 63.63636%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-8-11 {
    width: 72.72727%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-8-11 {
    margin-left: 72.72727%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-8-11 {
    margin-right: 72.72727%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-9-11 {
    width: 81.81818%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-9-11 {
    margin-left: 81.81818%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-9-11 {
    margin-right: 81.81818%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-10-11 {
    width: 90.90909%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-10-11 {
    margin-left: 90.90909%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-10-11 {
    margin-right: 90.90909%;
  }

  /* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-12-col > * {
    width: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-1-12 {
    width: 8.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-1-12 {
    margin-left: 8.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-1-12 {
    margin-right: 8.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-5-12 {
    width: 41.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-5-12 {
    margin-left: 41.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-5-12 {
    margin-right: 41.66667%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-7-12 {
    width: 58.33333%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-7-12 {
    margin-left: 58.33333%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-7-12 {
    margin-right: 58.33333%;
  }

  /* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-11-12 {
    width: 91.66667%;
  }

  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-prefix-11-12 {
    margin-left: 91.66667%;
  }

  /* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
  .large-desktop-suffix-11-12 {
    margin-right: 91.66667%;
  }
}
/* line 235, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries {
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
  /**
   * @category Layout
   * @selector .default-prefix-X-Y, .default-suffix-X-Y
   * <p>If your grid needs empty space added to it, this can be achieved using the <code>.default-prefix-X-Y</code> and
   * <code>.default-suffix-X-Y</code> classes. Each will do as you expect, add the desired amount of empty space before or
   * after the grid segment.</p>
   *
   * <div class="grid-example">
   *   <div class="gs-container">
   *     <div class="default-1-3 default-suffix-1-3"><div>Panel 1</div></div>
   *     <div class="default-1-3"><div>Panel 2</div></div>
   *   </div>
   * </div>
   */
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-col > * {
  width: 100%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-1 {
  width: 100%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-1 {
  margin-left: 100%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-1 {
  margin-right: 100%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-2-col > * {
  width: 50%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-2 {
  width: 50%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-2 {
  margin-left: 50%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-2 {
  margin-right: 50%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-col > * {
  width: 33.33333%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-3 {
  width: 33.33333%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-3 {
  margin-left: 33.33333%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-3 {
  margin-right: 33.33333%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-2-3 {
  width: 66.66667%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-2-3 {
  margin-left: 66.66667%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-2-3 {
  margin-right: 66.66667%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-4-col > * {
  width: 25%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-4 {
  width: 25%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-4 {
  margin-left: 25%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-4 {
  margin-right: 25%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-4 {
  width: 75%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-3-4 {
  margin-left: 75%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-3-4 {
  margin-right: 75%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-5-col > * {
  width: 20%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-5 {
  width: 20%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-5 {
  margin-left: 20%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-5 {
  margin-right: 20%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-2-5 {
  width: 40%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-2-5 {
  margin-left: 40%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-2-5 {
  margin-right: 40%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-5 {
  width: 60%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-3-5 {
  margin-left: 60%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-3-5 {
  margin-right: 60%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-4-5 {
  width: 80%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-4-5 {
  margin-left: 80%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-4-5 {
  margin-right: 80%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-6-col > * {
  width: 16.66667%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-6 {
  width: 16.66667%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-6 {
  margin-left: 16.66667%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-6 {
  margin-right: 16.66667%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-5-6 {
  width: 83.33333%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-5-6 {
  margin-left: 83.33333%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-5-6 {
  margin-right: 83.33333%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-7-col > * {
  width: 14.28571%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-7 {
  width: 14.28571%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-7 {
  margin-left: 14.28571%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-7 {
  margin-right: 14.28571%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-2-7 {
  width: 28.57143%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-2-7 {
  margin-left: 28.57143%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-2-7 {
  margin-right: 28.57143%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-7 {
  width: 42.85714%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-3-7 {
  margin-left: 42.85714%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-3-7 {
  margin-right: 42.85714%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-4-7 {
  width: 57.14286%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-4-7 {
  margin-left: 57.14286%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-4-7 {
  margin-right: 57.14286%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-5-7 {
  width: 71.42857%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-5-7 {
  margin-left: 71.42857%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-5-7 {
  margin-right: 71.42857%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-6-7 {
  width: 85.71429%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-6-7 {
  margin-left: 85.71429%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-6-7 {
  margin-right: 85.71429%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-8-col > * {
  width: 12.5%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-8 {
  width: 12.5%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-8 {
  margin-left: 12.5%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-8 {
  margin-right: 12.5%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-8 {
  width: 37.5%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-3-8 {
  margin-left: 37.5%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-3-8 {
  margin-right: 37.5%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-5-8 {
  width: 62.5%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-5-8 {
  margin-left: 62.5%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-5-8 {
  margin-right: 62.5%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-7-8 {
  width: 87.5%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-7-8 {
  margin-left: 87.5%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-7-8 {
  margin-right: 87.5%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-9-col > * {
  width: 11.11111%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-9 {
  width: 11.11111%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-9 {
  margin-left: 11.11111%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-9 {
  margin-right: 11.11111%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-2-9 {
  width: 22.22222%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-2-9 {
  margin-left: 22.22222%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-2-9 {
  margin-right: 22.22222%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-9 {
  width: 33.33333%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-3-9 {
  margin-left: 33.33333%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-3-9 {
  margin-right: 33.33333%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-4-9 {
  width: 44.44444%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-4-9 {
  margin-left: 44.44444%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-4-9 {
  margin-right: 44.44444%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-5-9 {
  width: 55.55556%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-5-9 {
  margin-left: 55.55556%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-5-9 {
  margin-right: 55.55556%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-6-9 {
  width: 66.66667%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-6-9 {
  margin-left: 66.66667%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-6-9 {
  margin-right: 66.66667%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-7-9 {
  width: 77.77778%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-7-9 {
  margin-left: 77.77778%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-7-9 {
  margin-right: 77.77778%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-8-9 {
  width: 88.88889%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-8-9 {
  margin-left: 88.88889%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-8-9 {
  margin-right: 88.88889%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-10-col > * {
  width: 10%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-10 {
  width: 10%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-10 {
  margin-left: 10%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-10 {
  margin-right: 10%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-10 {
  width: 30%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-3-10 {
  margin-left: 30%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-3-10 {
  margin-right: 30%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-7-10 {
  width: 70%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-7-10 {
  margin-left: 70%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-7-10 {
  margin-right: 70%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-9-10 {
  width: 90%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-9-10 {
  margin-left: 90%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-9-10 {
  margin-right: 90%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-11-col > * {
  width: 9.09091%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-11 {
  width: 9.09091%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-11 {
  margin-left: 9.09091%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-11 {
  margin-right: 9.09091%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-2-11 {
  width: 18.18182%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-2-11 {
  margin-left: 18.18182%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-2-11 {
  margin-right: 18.18182%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-3-11 {
  width: 27.27273%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-3-11 {
  margin-left: 27.27273%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-3-11 {
  margin-right: 27.27273%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-4-11 {
  width: 36.36364%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-4-11 {
  margin-left: 36.36364%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-4-11 {
  margin-right: 36.36364%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-5-11 {
  width: 45.45455%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-5-11 {
  margin-left: 45.45455%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-5-11 {
  margin-right: 45.45455%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-6-11 {
  width: 54.54545%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-6-11 {
  margin-left: 54.54545%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-6-11 {
  margin-right: 54.54545%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-7-11 {
  width: 63.63636%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-7-11 {
  margin-left: 63.63636%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-7-11 {
  margin-right: 63.63636%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-8-11 {
  width: 72.72727%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-8-11 {
  margin-left: 72.72727%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-8-11 {
  margin-right: 72.72727%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-9-11 {
  width: 81.81818%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-9-11 {
  margin-left: 81.81818%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-9-11 {
  margin-right: 81.81818%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-10-11 {
  width: 90.90909%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-10-11 {
  margin-left: 90.90909%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-10-11 {
  margin-right: 90.90909%;
}
/* line 250, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-12-col > * {
  width: 8.33333%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-1-12 {
  width: 8.33333%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-1-12 {
  margin-left: 8.33333%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-1-12 {
  margin-right: 8.33333%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-5-12 {
  width: 41.66667%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-5-12 {
  margin-left: 41.66667%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-5-12 {
  margin-right: 41.66667%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-7-12 {
  width: 58.33333%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-7-12 {
  margin-left: 58.33333%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-7-12 {
  margin-right: 58.33333%;
}
/* line 252, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-11-12 {
  width: 91.66667%;
}
/* line 267, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-prefix-11-12 {
  margin-left: 91.66667%;
}
/* line 268, ../RiotKit/scss/globals/layout/_mixin.scss */
.no-media-queries .desktop-suffix-11-12 {
  margin-right: 91.66667%;
}

/* line 2, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table {
  background: #efefef;
  border-collapse: collapse;
  width: 100%;
  margin-top: 1em;
}
/* line 9, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table td,
table.table th {
  padding: 8px;
  border-top: 1px solid #fcfcfc;
}
/* line 14, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table th {
  text-align: left;
  font-weight: normal;
}
/* line 20, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table thead tr:first-child td,
table.table thead tr:first-child th {
  border: 0;
}

/* line 25, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table:first-child {
  margin-top: 0;
}

/* line 30, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table-striped tbody tr:nth-child(odd) td,
table.table-striped tbody tr:nth-child(odd) th {
  background-color: #e5e5e5;
}

/* line 36, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table-bordered td,
table.table-bordered th,
table.table-bordered thead tr:first-child th {
  border: 1px solid #fcfcfc;
}

/* line 40, ../RiotKit/scss/globals/tables/_mixin.scss */
table.table-hover tbody tr:hover td {
  background-color: #e5e5e5;
}

/* line 2, ../RiotKit/scss/flair/backdrop/_mixin.scss */
.backdrop {
  position: absolute;
  width: 100%;
  min-width: 1000px;
  height: 1080px;
  z-index: -10;
  background-color: black;
  background-position: top center;
  background-repeat: no-repeat;
  background-image: url("resources/images/bg-default.jpg");
  top: 0px;
}

/* line 2, ../RiotKit/scss/flair/bright/_variables.scss */
.bright {
  color: #FFFFFF;
}
/* line 6, ../RiotKit/scss/flair/bright/_variables.scss */
.bright h2,
.bright h3 {
  color: #ff9c00;
}

/* line 17, ../RiotKit/scss/flair/content-border/_mixin.scss */
.content-border {
  box-sizing: border-box;
  padding: 4px;
  margin-top: 20px;
  background-color: transparent;
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1A000000,endColorstr=#1A000000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#1A000000,endColorstr=#1A000000);
  background-color: rgba(0, 0, 0, 0.1);
  border-left: 1px solid rgba(84, 84, 84, 0.3);
  border-top: 1px solid rgba(84, 84, 84, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
}
/* line 32, ../RiotKit/scss/flair/content-border/_mixin.scss */
.content-border > * {
  -webkit-box-shadow: 0 0 2px 0 #868686;
  -moz-box-shadow: 0 0 2px 0 #868686;
  box-shadow: 0 0 2px 0 #868686;
  background-color: #dedede;
}
/* line 37, ../RiotKit/scss/flair/content-border/_mixin.scss */
.content-border img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* line 44, ../RiotKit/scss/flair/content-border/_mixin.scss */
div.content-border {
  width: 100%;
}

/* line 48, ../RiotKit/scss/flair/content-border/_mixin.scss */
.content-border:first-child {
  margin-top: 0;
}

/* line 52, ../RiotKit/scss/flair/content-border/_mixin.scss */
span.content-border {
  display: inline-block;
  width: auto;
  max-width: 100%;
}

/* line 58, ../RiotKit/scss/flair/content-border/_mixin.scss */
.ie .content-border img {
  vertical-align: bottom;
}

/* line 12, ../RiotKit/scss/flair/divider/_mixin.scss */
hr.divider {
  background-color: #d1d3d4;
  border: 0;
  border-top: 1px solid #d1d3d4;
  border-bottom: 1px solid #f9f9fa;
  color: #d1d3d4;
  display: block;
  box-sizing: border-box;
  height: 2px;
  margin: 20px 0 0 0;
}
/* line 24, ../RiotKit/scss/flair/divider/_mixin.scss */
hr.divider.inline-divider {
  margin: 20px 0;
}

/* line 29, ../RiotKit/scss/flair/divider/_mixin.scss */
hr.divider:first-child {
  margin-top: 0;
}

/* line 20, ../RiotKit/scss/flair/emphasis/_mixin.scss */
.muted {
  color: #999999;
}

/* line 21, ../RiotKit/scss/flair/emphasis/_mixin.scss */
.warning {
  color: #c09853;
}

/* line 22, ../RiotKit/scss/flair/emphasis/_mixin.scss */
.error {
  color: #b94a48;
}

/* line 23, ../RiotKit/scss/flair/emphasis/_mixin.scss */
.info {
  color: #3a87ad;
}

/* line 24, ../RiotKit/scss/flair/emphasis/_mixin.scss */
.success {
  color: #468847;
}

/* line 25, ../RiotKit/scss/flair/emphasis/_mixin.scss */
.desc {
  font-size: 10px;
  text-transform: uppercase;
  color: #797d80;
}

/* line 32, ../RiotKit/scss/flair/emphasis/_mixin.scss */
.message-box.error {
  background-color: #881818;
  color: #FFF;
  padding: 10px 10px;
  border: 1px solid white;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 31px 1px rgba(0, 0, 0, 0.3), 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: inset 0 0 31px 1px rgba(0, 0, 0, 0.3), 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 31px 1px rgba(0, 0, 0, 0.3), 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

/* line 17, ../RiotKit/scss/flair/gray-stone/_mixin.scss */
.gray-stone {
  background-color: #ddded9;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #d4d4d2;
  border-right: 1px solid #d4d4d2;
  border-top: 1px solid #c5c6c1;
  padding: 20px;
}

/* line 34, ../RiotKit/scss/flair/grid-list/_mixin.scss */
.grid-list {
  margin: 0;
  list-style-type: none;
  padding: 0;
}
/* line 39, ../RiotKit/scss/flair/grid-list/_mixin.scss */
.grid-list > li > * {
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  border-right: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
  background-color: #efefef;
  padding: 20px;
}

/* line 19, ../RiotKit/scss/flair/header/_mixin.scss */
header.header {
  padding: 1px;
  margin: 20px 0 0 0;
  background: black url("resources/images/lol-textures.jpg") no-repeat 0 -721px;
  position: relative;
}
/* line 30, ../RiotKit/scss/flair/header/_mixin.scss */
header.header > h1,
header.header > h2,
header.header > h3,
header.header > h4,
header.header > h5,
header.header > h6 {
  color: #dfe1e1;
  font-size: 0.86667em;
  font-weight: normal;
}

/* line 37, ../RiotKit/scss/flair/header/_mixin.scss */
header.header nav {
  position: absolute;
  top: 0;
  right: 20px;
  display: table;
}

/* line 44, ../RiotKit/scss/flair/header/_mixin.scss */
header.header nav ul {
  margin: 0;
  padding: 0;
  display: table-row;
}

/* line 50, ../RiotKit/scss/flair/header/_mixin.scss */
header.header nav > ul > li {
  display: table-cell;
  vertical-align: middle;
  height: 34px;
}

/* line 56, ../RiotKit/scss/flair/header/_mixin.scss */
header.header nav > ul > li > a.btn-mini {
  margin-left: 5px;
}

/* line 60, ../RiotKit/scss/flair/header/_mixin.scss */
.content-border > header.header {
  margin-bottom: 0;
  margin-top: 0;
}

/* line 65, ../RiotKit/scss/flair/header/_mixin.scss */
header.header:first-child {
  margin-top: 0;
}

/* line 18, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain nav {
  position: absolute;
  top: 0;
  right: 20px;
  display: table;
}

/* line 25, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain nav > ul {
  margin: 0;
  padding: 0;
  display: table-row;
}

/* line 31, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain nav > ul > li {
  display: table-cell;
  vertical-align: middle;
  height: 57px;
}

/* line 37, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain > nav > ul > li > a.btn-mini {
  margin-left: 5px;
}

/* line 41, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain > nav > ul > li {
  height: 30px;
}

/* line 45, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain {
  margin-top: 20px;
  position: relative;
}

/* line 50, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain:first-child {
  margin-top: 0;
}

/* line 58, ../RiotKit/scss/flair/header-plain/_mixin.scss */
header.header-plain h1,
header.header-plain h2,
header.header-plain h3,
header.header-plain h4,
header.header-plain h5 {
  font-size: 30px;
}

/* line 19, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary {
  background: black url("resources/images/lol-textures.jpg") no-repeat 0 -6px;
  padding: 17px 20px 11px 20px;
  margin: 20px 0 0 0;
  -webkit-box-shadow: 0px 1px 2px #323232;
  -moz-box-shadow: 0px 1px 2px #323232;
  box-shadow: 0px 1px 2px #323232;
}
/* line 31, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary > h1,
header.header-primary > h2,
header.header-primary > h3,
header.header-primary > h4,
header.header-primary > h5,
header.header-primary > h6 {
  color: #dfe1e1;
  font-size: 2em;
  font-weight: normal;
  /* i18n-fonts : page title font size */
}
/* line 45, ../RiotKit/scss/flair/header-primary/_mixin.scss */
.i18n-cs header.header-primary > h1, .i18n-el header.header-primary > h1, .i18n-tr header.header-primary > h1, .i18n-pl header.header-primary > h1, .i18n-pt header.header-primary > h1, .i18n-tr header.header-primary > h1, .i18n-ro header.header-primary > h1, .i18n-hu header.header-primary > h1, .i18n-ru header.header-primary > h1, .i18n-cs
header.header-primary > h2, .i18n-el
header.header-primary > h2, .i18n-tr
header.header-primary > h2, .i18n-pl
header.header-primary > h2, .i18n-pt
header.header-primary > h2, .i18n-tr
header.header-primary > h2, .i18n-ro
header.header-primary > h2, .i18n-hu
header.header-primary > h2, .i18n-ru
header.header-primary > h2, .i18n-cs
header.header-primary > h3, .i18n-el
header.header-primary > h3, .i18n-tr
header.header-primary > h3, .i18n-pl
header.header-primary > h3, .i18n-pt
header.header-primary > h3, .i18n-tr
header.header-primary > h3, .i18n-ro
header.header-primary > h3, .i18n-hu
header.header-primary > h3, .i18n-ru
header.header-primary > h3, .i18n-cs
header.header-primary > h4, .i18n-el
header.header-primary > h4, .i18n-tr
header.header-primary > h4, .i18n-pl
header.header-primary > h4, .i18n-pt
header.header-primary > h4, .i18n-tr
header.header-primary > h4, .i18n-ro
header.header-primary > h4, .i18n-hu
header.header-primary > h4, .i18n-ru
header.header-primary > h4, .i18n-cs
header.header-primary > h5, .i18n-el
header.header-primary > h5, .i18n-tr
header.header-primary > h5, .i18n-pl
header.header-primary > h5, .i18n-pt
header.header-primary > h5, .i18n-tr
header.header-primary > h5, .i18n-ro
header.header-primary > h5, .i18n-hu
header.header-primary > h5, .i18n-ru
header.header-primary > h5, .i18n-cs
header.header-primary > h6, .i18n-el
header.header-primary > h6, .i18n-tr
header.header-primary > h6, .i18n-pl
header.header-primary > h6, .i18n-pt
header.header-primary > h6, .i18n-tr
header.header-primary > h6, .i18n-ro
header.header-primary > h6, .i18n-hu
header.header-primary > h6, .i18n-ru
header.header-primary > h6 {
  font-size: 1.8em;
}

/* line 52, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary nav {
  position: absolute;
  top: 0;
  right: 20px;
  display: table;
}
/* line 58, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary nav > ul {
  margin: 0;
  padding: 0;
  display: table-row;
}
/* line 63, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary nav > ul > li {
  display: table-cell;
  vertical-align: middle;
  height: 57px;
}
/* line 69, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary nav > ul > li a .icon {
  margin-top: -3px;
  margin-left: 5px;
  vertical-align: middle;
}
/* line 76, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary nav > ul > li a.btn-mini {
  margin-left: 5px;
}

/* line 83, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary > nav.header-links {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 87, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary > nav.header-links > ul > li > a {
  display: block;
  color: #bbbbbb;
  text-decoration: none;
  line-height: 37px;
  padding: 12px 15px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* line 96, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary > nav.header-links > ul > li > a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.15);
}

/* line 101, ../RiotKit/scss/flair/header-primary/_mixin.scss */
.content-border > header.header-primary {
  margin-bottom: 0;
  margin-top: 0;
}

/* line 106, ../RiotKit/scss/flair/header-primary/_mixin.scss */
header.header-primary:first-child {
  margin-top: 0;
}

/* line 12, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle nav {
  position: absolute;
  top: 0;
  right: 20px;
  display: table;
}

/* line 19, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle nav > ul {
  margin: 0;
  padding: 0;
  display: table-row;
}

/* line 25, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle nav > ul > li {
  display: table-cell;
  vertical-align: middle;
  height: 57px;
}

/* line 31, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle > nav > ul > li > a.btn-mini {
  margin-left: 5px;
}

/* line 35, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle > nav > ul > li {
  height: 30px;
}

/* line 39, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle {
  margin-top: 20px;
  position: relative;
  background: #CCC;
  border: 1px solid #bbb;
  border-color: #bbb #eee #eee #bbb;
  -webkit-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.05), inset -1px -1px 2px 0 rgba(240, 240, 255, 0.3);
  -moz-box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.05), inset -1px -1px 2px 0 rgba(240, 240, 255, 0.3);
  box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.05), inset -1px -1px 2px 0 rgba(240, 240, 255, 0.3);
}

/* line 52, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle:first-child {
  margin-top: 0;
}

/* line 60, ../RiotKit/scss/flair/header-subtle/_mixin.scss */
header.header-subtle h1,
header.header-subtle h2,
header.header-subtle h3,
header.header-subtle h4,
header.header-subtle h5 {
  font-size: 1.4em;
  padding: 0.5em 0.5em 0.5em 1.2em;
}

/* line 8, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon,
.icon-container {
  background-image: url("resources/images/lol-icons.png");
  background-repeat: no-repeat;
}

/* line 13, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container {
  padding-left: 30px;
}

/* line 17, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: bottom;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-arrow-down {
  background-position: 50% -197px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-arrow-down {
  background-position: 0 -195px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-arrow-down-light {
  background-position: 50% -104px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-arrow-down-light {
  background-position: 0 -102px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-arrow-active-left, .pager a:first-child, .pager a.prev {
  background-position: 50% -325px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-arrow-active-left, .pager a.icon-container:first-child, .pager a.icon-container.prev {
  background-position: 0 -323px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-arrow-deactive-left, .pager a.disabled:first-child, .pager a.disabled.prev {
  background-position: 50% -389px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-arrow-deactive-left, .pager a.icon-container.disabled:first-child, .pager a.icon-container.disabled.prev {
  background-position: 0 -387px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-arrow-active-right, .pager a:last-child {
  background-position: 50% -357px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-arrow-active-right, .pager a.icon-container:last-child {
  background-position: 0 -355px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-arrow-deactive-right, .pager a.disabled:last-child {
  background-position: 50% -421px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-arrow-deactive-right, .pager a.icon-container.disabled:last-child {
  background-position: 0 -419px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-comments {
  background-position: 50% -40px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-comments {
  background-position: 0 -38px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-grid {
  background-position: 50% -165px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-grid {
  background-position: 0 -163px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-list {
  background-position: 50% -133px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-list {
  background-position: 0 -131px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-posted {
  background-position: 50% -8px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-posted {
  background-position: 0 -6px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-search {
  background-position: 50% -229px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-search {
  background-position: 0 -227px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-video {
  background-position: 50% -261px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-video {
  background-position: 0 -259px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-zoom {
  background-position: 50% -293px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-zoom {
  background-position: 0 -291px;
}

/* line 2, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-zoom {
  background-position: 50% -293px;
}

/* line 3, ../RiotKit/scss/flair/icons/_mixin.scss */
.icon-container.icon-zoom {
  background-position: 0 -291px;
}

/* line 2, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper {
  position: relative;
  box-sizing: border-box;
  min-height: 150px;
  width: 100%;
  margin: 50px auto 7px auto;
  background: transparent none repeat-y;
}
/* line 10, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper .section-wrapper-content {
  padding: 0;
  position: relative;
}
/* line 14, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper .section-wrapper-content .section-wrapper-content-wrapper {
  position: relative;
  z-index: 1;
}
/* line 20, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper .section-wrapper-top {
  display: none;
  width: 100%;
  position: absolute;
  background: transparent url("resources/images/frame-textures-sprite.jpg") no-repeat 50% 0;
  top: -14px;
  left: 0;
  height: 111px;
}
/* line 30, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper .section-wrapper-bottom {
  display: none;
  width: 100%;
  position: absolute;
  background: transparent url("resources/images/frame-sprite.png") no-repeat 50% -284px;
  bottom: -7px;
  left: 0;
  height: 130px;
}

/* line 43, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper .section-wrapper-top {
  display: block;
}

/* line 57, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper .section-wrapper-bottom {
  display: block;
}

/* line 70, ../RiotKit/scss/flair/section-wrapper/_mixin.scss */
.section-wrapper .section-wrapper-top:before {
  content: "";
  width: 100%;
  height: 136px;
  position: absolute;
  top: -21px;
  left: 0;
  background: transparent url("resources/images/frame-sprite.png") no-repeat 50% -148px;
}

/* line 13, ../RiotKit/scss/flair/subtle-divider/_mixin.scss */
hr.subtle-divider {
  background-color: #d1d3d4;
  border: 0;
  border-top: 1px solid #d1d3d4;
  border-bottom: 1px solid #f9f9fa;
  color: #d1d3d4;
  position: relative;
  display: block;
  box-sizing: border-box;
  height: 2px;
}

/* line 26, ../RiotKit/scss/flair/subtle-divider/_mixin.scss */
hr.subtle-divider:first-child {
  margin-top: 0;
}

/* line 31, ../RiotKit/scss/flair/subtle-divider/_mixin.scss */
hr.subtle-divider:before,
hr.subtle-divider:after {
  content: "";
  display: block;
  height: 2px;
  width: 33px;
  background: transparent url("resources/images/divider-bg.png") 0 -6px;
  position: absolute;
  top: -1px;
  right: 0;
}

/* line 42, ../RiotKit/scss/flair/subtle-divider/_mixin.scss */
hr.subtle-divider:before {
  left: 0;
  background-position: 0 -4px;
}

/* line 48, ../RiotKit/scss/flair/subtle-divider/_mixin.scss */
.white-stone hr.subtle-divider {
  background-color: #d9d9d9;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #fbfbfb;
  color: #d9d9d9;
}
/* line 55, ../RiotKit/scss/flair/subtle-divider/_mixin.scss */
.white-stone hr.subtle-divider:before {
  background-position: 0 0;
}
/* line 59, ../RiotKit/scss/flair/subtle-divider/_mixin.scss */
.white-stone hr.subtle-divider:after {
  background-position: 0 -2px;
}

/* line 3, ../RiotKit/scss/flair/vertical-align/_mixin.scss */
.vertical-align > * {
  vertical-align: middle;
}

/* line 15, ../RiotKit/scss/flair/white-stone/_mixin.scss */
.white-stone {
  padding: 20px;
  box-sizing: border-box;
  background: #e9eaec;
  color: #333132;
  width: auto;
  position: relative;
}
/* line 23, ../RiotKit/scss/flair/white-stone/_mixin.scss */
.white-stone .white-stone-content {
  position: relative;
  z-index: 1;
  min-height: 0;
}

/* line 23, ../RiotKit/scss/widgets/accordion/_mixin.scss */
.riot-accordion .riot-accordion-header {
  height: 29px;
  line-height: 29px;
  font-size: 14px;
  background: #565656 url("resources/images/lol-textures.jpg") no-repeat left -755px;
  color: #fff;
  cursor: pointer;
  padding: 0 0 0 14px;
  text-transform: uppercase;
  position: relative;
}
/* line 38, ../RiotKit/scss/widgets/accordion/_mixin.scss */
.riot-accordion .riot-accordion-header .riot-accordion-icon {
  width: 31px;
  height: 100%;
  background: transparent url("resources/images/lol-textures-alpha.png") no-repeat -262px -1px;
  position: absolute;
  left: auto;
  right: 2px;
  top: 0;
  margin: 0;
  padding: 0;
}
/* line 54, ../RiotKit/scss/widgets/accordion/_mixin.scss */
.riot-accordion .riot-accordion-header.active {
  background: #827d79 url("resources/images/lol-textures.jpg") no-repeat left -784px;
  cursor: default;
}
/* line 59, ../RiotKit/scss/widgets/accordion/_mixin.scss */
.riot-accordion .riot-accordion-header.active .riot-accordion-icon {
  background-position: -231px -1px;
}
/* line 64, ../RiotKit/scss/widgets/accordion/_mixin.scss */
.riot-accordion .riot-accordion-section {
  background: white url("resources/images/lol-accordion-bg.jpg") repeat-x left top;
  padding: 10px;
  overflow: hidden;
}

/* line 2, ../RiotKit/scss/widgets/alert/_mixin.scss */
.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #F2DEDE;
  border-color: #EED3D7;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  position: relative;
}
/* line 12, ../RiotKit/scss/widgets/alert/_mixin.scss */
.alert .alert-close {
  position: absolute;
  top: 5px;
  right: 5px;
}

/* line 20, ../RiotKit/scss/widgets/alert/_mixin.scss */
.alert > p,
.alert > ul {
  margin-bottom: 0;
}

/* line 24, ../RiotKit/scss/widgets/alert/_mixin.scss */
.alert-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border-color: #EED3D7;
}

/* line 30, ../RiotKit/scss/widgets/alert/_mixin.scss */
.alert-info {
  color: #3A87AD;
  background-color: #D9EDF7;
  border-color: #BCE8F1;
}

/* line 36, ../RiotKit/scss/widgets/alert/_mixin.scss */
.alert-success {
  color: #468847;
  background-color: #DFF0D8;
  border-color: #D6E9C6;
}

/* line 2, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn {
  background: transparent url("resources/images/lol-textures-alpha.png") no-repeat 0 -90px;
  padding: 0 0 0 2px;
  border: 0;
  height: 30px;
  position: relative;
  vertical-align: bottom;
  display: inline-block;
  cursor: pointer;
  color: #342812;
}
/* line 14, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn span {
  display: inline-block;
  background: transparent url("resources/images/lol-textures-alpha.png") no-repeat right -60px;
  padding: 4px 8px;
  height: 30px;
  box-sizing: border-box;
  vertical-align: bottom;
  line-height: 22px;
  text-shadow: 0 1px 1px #dedede;
}
/* line 25, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn span .icon {
  float: right;
  width: 16px;
  display: inline-block;
  height: 22px;
  padding: 0;
  margin-left: 5px;
}
/* line 35, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn .glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  background: transparent url("resources/images/lol-textures-alpha.png") no-repeat 50% -242px;
}

/* line 48, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-icon span .icon {
  margin: 0;
}

/* line 54, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn:hover {
  background-position: 0 -150px;
  color: #342812;
}
/* line 58, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn:hover span {
  background-position: right -120px;
}
/* line 62, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn:hover .glow {
  display: block;
}

/* line 67, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn:visited {
  color: #342812;
}

/* line 72, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn {
  margin: 0;
  background-position: 0 -180px;
}
/* line 76, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn span {
  background-position: 0 -60px;
}
/* line 81, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn:hover {
  background-position: 0 -210px;
}
/* line 84, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn:hover span {
  background-position: 0 -120px;
}
/* line 89, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn:first-child {
  background-position: 0 -90px;
}
/* line 93, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn:first-child:hover {
  background-position: 0 -150px;
}
/* line 98, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn:last-child span {
  background-position: right -60px;
}
/* line 104, ../RiotKit/scss/widgets/button/_mixin.scss */
.btn-group .btn:last-child:hover span {
  background-position: right -120px;
}

/* line 2, ../RiotKit/scss/widgets/button-input/_mixin.scss */
.btn-input {
  display: inline-block;
  border-width: 1px 0;
  border-color: #cecfcf black #f7f8f8 black;
  border-style: solid;
  background: white;
  padding: 2px 3px;
  box-sizing: border-box;
  height: 30px;
  -webkit-box-shadow: inset 0 0 2px #bebfc0;
  -moz-box-shadow: inset 0 0 2px #bebfc0;
  box-shadow: inset 0 0 2px #bebfc0;
}
/* line 13, ../RiotKit/scss/widgets/button-input/_mixin.scss */
.btn-input input {
  border: 0;
  color: #2b2b2b;
  float: left;
  outline: none;
  line-height: 24px;
  background: transparent;
}

/* line 3, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large,
.btn-large:visited {
  box-sizing: border-box;
  border-style: solid;
  border-width: 3px;
  width: auto;
  font-family: "Adobe Garamond Pro", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 20px 4px 20px;
  display: inline-block;
  text-align: center;
  /* i18n-fonts : button large font */
}
/* line 25, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.i18n-cs .btn-large, .i18n-el .btn-large, .i18n-tr .btn-large, .i18n-pl .btn-large, .i18n-pt .btn-large, .i18n-tr .btn-large, .i18n-ro .btn-large, .i18n-hu .btn-large, .i18n-ru .btn-large, .i18n-cs
.btn-large:visited, .i18n-el
.btn-large:visited, .i18n-tr
.btn-large:visited, .i18n-pl
.btn-large:visited, .i18n-pt
.btn-large:visited, .i18n-tr
.btn-large:visited, .i18n-ro
.btn-large:visited, .i18n-hu
.btn-large:visited, .i18n-ru
.btn-large:visited {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 0.9em;
}
/* line 30, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.i18n-ja .btn-large, .i18n-ja
.btn-large:visited {
  font-family: "AxisStd-Medium", sans-serif;
}

/* line 36, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-primary,
.btn-large-primary:visited {
  color: #222222;
  border-color: #f6c653 #bd6a23 #b6631f #e8ab4a;
  background: #d79922 url("resources/images/lol-textures.jpg") no-repeat 50% -846px;
}

/* line 41, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-primary:hover {
  color: #222222;
  border-color: #fdeaba #bf712c #b66521 #edbd6e;
  background-position: 50% -878px;
}

/* line 46, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-primary:active {
  color: #222222;
  border-color: #e1b03d #7f3517 #772d16 #c17f30;
  background-position: 50% -911px;
}

/* line 53, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-secondary,
.btn-large-secondary:visited {
  color: #222222;
  border-color: #aeb5b6 #585e6b #525664 #869094;
  background: #8f8775 url("resources/images/lol-textures.jpg") no-repeat 50% -944px;
}

/* line 58, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-secondary:hover {
  color: #222222;
  border-color: #bbcdd0 #6c797b #687373 #99afb4;
  background-position: 50% -977px;
}

/* line 63, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-secondary:active {
  color: #222222;
  border-color: #9ba5a9 #485354 #434e4e #899197;
  background-position: 50% -1010px;
}

/* line 70, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-tertiary,
.btn-large-tertiary:visited {
  color: #222222;
  border-color: #c0c0bd #616260 #5f5e5b #8b908c;
  background: #a0a4a6 url("resources/images/lol-textures.jpg") no-repeat 50% -1043px;
}

/* line 75, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-tertiary:hover {
  color: #222222;
  border-color: #cbccc6 #6e6f6f #676767 #abada9;
  background-position: 50% -1076px;
}

/* line 80, ../RiotKit/scss/widgets/button-large/_mixin.scss */
.btn-large-tertiary:active {
  color: #222222;
  border-color: #a3a8aa #53504c #4e4943 #898b8d;
  background-position: 50% -1109px;
}

/* line 2, ../RiotKit/scss/widgets/button-mini/_mixin.scss */
.btn-mini {
  display: inline-block;
  width: 23px;
  height: 24px;
  background: transparent url("resources/images/lol-textures-alpha.png") no-repeat -231px -30px;
  border: 0;
  box-sizing: border-box;
  padding: 1px 3px 1px 4px;
}
/* line 11, ../RiotKit/scss/widgets/button-mini/_mixin.scss */
.btn-mini .icon {
  width: 16px;
  display: inline-block;
  height: 22px;
  padding: 0;
}

/* line 19, ../RiotKit/scss/widgets/button-mini/_mixin.scss */
.btn-mini:hover {
  background-position: -255px -30px;
}

/* line 21, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#colorbox, #cboxOverlay, #cboxWrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

/* line 29, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxOverlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: transparent url(resources/images/colorbox/overlay.png) repeat 0 0;
  background: #00050a none;
}

/* line 37, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxMiddleLeft, #cboxBottomLeft {
  clear: left;
}

/* line 41, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxContent {
  position: relative;
  background: #fff;
  overflow: hidden;
}

/* line 47, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxLoadedContent {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 28px;
}

/* line 53, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxTitle {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  color: #313131;
  font-size: larger;
  margin: 0;
}

/* line 64, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxLoadingOverlay, #cboxLoadingGraphic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* line 72, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
  cursor: pointer;
}

/* line 76, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxPhoto {
  float: left;
  border: 0;
  display: block;
  max-width: none;
  margin: auto;
}

/* line 84, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #fff;
}

/* line 92, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#colorbox, #cboxContent, #cboxLoadedContent {
  box-sizing: content-box;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
}

/* line 98, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxTopLeft {
  width: 21px;
  height: 21px;
  background: url(resources/images/colorbox/controls.png) no-repeat -101px 0;
}

/* line 104, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxTopRight {
  width: 21px;
  height: 21px;
  background: url(resources/images/colorbox/controls.png) no-repeat -130px 0;
}

/* line 110, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxBottomLeft {
  width: 21px;
  height: 21px;
  background: url(resources/images/colorbox/controls.png) no-repeat -101px -29px;
}

/* line 116, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxBottomRight {
  width: 21px;
  height: 21px;
  background: url(resources/images/colorbox/controls.png) no-repeat -130px -29px;
}

/* line 122, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxMiddleLeft {
  width: 21px;
  background: url(resources/images/colorbox/controls.png) left top repeat-y;
}

/* line 127, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxMiddleRight {
  width: 21px;
  background: url(resources/images/colorbox/controls.png) right top repeat-y;
}

/* line 132, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxTopCenter {
  height: 21px;
  background: url(resources/images/colorbox/border.png) 0 0 repeat-x;
}

/* line 137, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxBottomCenter {
  height: 21px;
  background: url(resources/images/colorbox/border.png) 0 -29px repeat-x;
}

/* line 142, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxError {
  border: 1px solid #ccc;
  padding: 50px;
}

/* line 147, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxCurrent {
  position: absolute;
  bottom: 0;
  left: 58px;
  color: #949494;
}

/* line 154, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxLoadingOverlay {
  background: url(resources/images/colorbox/loading_background.png) no-repeat center center;
}

/* line 158, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxLoadingGraphic {
  background: url(resources/images/colorbox/loading.gif) no-repeat center center;
}

/* line 162, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
  border: 0;
  overflow: visible;
  width: auto;
  background: 0;
  margin: 0;
  padding: 0;
}

/* line 171, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxSlideshow {
  position: absolute;
  bottom: 4px;
  right: 30px;
  color: #0092ef;
}

/* line 178, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxPrevious {
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(resources/images/colorbox/controls.png) no-repeat -75px 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
}

/* line 188, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxPrevious:hover {
  background-position: -75px -25px;
}

/* line 192, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxNext {
  position: absolute;
  bottom: 0;
  left: 27px;
  background: url(resources/images/colorbox/controls.png) no-repeat -50px 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
}

/* line 202, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxNext:hover {
  background-position: -50px -25px;
}

/* line 206, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxClose {
  position: absolute;
  bottom: 0;
  right: 0;
  background: url(resources/images/colorbox/controls.png) no-repeat -25px 0;
  width: 25px;
  height: 25px;
  text-indent: -9999px;
}

/* line 216, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#cboxClose:hover {
  background-position: -25px -25px;
}

/* line 220, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE #cboxTopLeft, .cboxIE #cboxTopCenter, .cboxIE #cboxTopRight, .cboxIE #cboxBottomLeft, .cboxIE #cboxBottomCenter, .cboxIE #cboxBottomRight, .cboxIE #cboxMiddleLeft, .cboxIE #cboxMiddleRight {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/* line 224, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxTopLeft {
  background: url(resources/images/colorbox/ie6/borderTopLeft.png);
}

/* line 228, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxTopCenter {
  background: url(resources/images/colorbox/ie6/borderTopCenter.png);
}

/* line 232, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxTopRight {
  background: url(resources/images/colorbox/ie6/borderTopRight.png);
}

/* line 236, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxBottomLeft {
  background: url(resources/images/colorbox/ie6/borderBottomLeft.png);
}

/* line 240, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxBottomCenter {
  background: url(resources/images/colorbox/ie6/borderBottomCenter.png);
}

/* line 244, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxBottomRight {
  background: url(resources/images/colorbox/ie6/borderBottomRight.png);
}

/* line 248, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxMiddleLeft {
  background: url(resources/images/colorbox/ie6/borderMiddleLeft.png);
}

/* line 252, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
.cboxIE6 #cboxMiddleRight {
  background: url(resources/images/colorbox/ie6/borderMiddleRight.png);
}

/* line 256, ../RiotKit/scss/widgets/colorbox/_mixin.scss */
#colorbox, #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
  outline: 0;
}

/* line 20, ../RiotKit/scss/widgets/dropdown/_mixin.scss */
.dropdown {
  position: relative;
}

/* line 24, ../RiotKit/scss/widgets/dropdown/_mixin.scss */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-color: #fff;
  display: none;
  margin: 0;
  list-style-type: none;
  padding: 5px 0;
  z-index: 1000;
}
/* line 40, ../RiotKit/scss/widgets/dropdown/_mixin.scss */
.dropdown-menu a {
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 20px;
  color: #333;
  text-decoration: none;
}

/* line 50, ../RiotKit/scss/widgets/dropdown/_mixin.scss */
.open > .dropdown-menu {
  display: block;
}

/* line 64, ../RiotKit/scss/widgets/faq/_mixin.scss */
section.question header {
  font-size: 1.26667em;
  cursor: pointer;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
  -o-user-select: none;
  user-select: none;
  color: #257372;
  font-family: "Adobe Garamond Pro", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  /* i18n-fonts : faq header font */
}
/* line 84, ../RiotKit/scss/widgets/faq/_mixin.scss */
.i18n-cs section.question header, .i18n-el section.question header, .i18n-tr section.question header, .i18n-pl section.question header, .i18n-pt section.question header, .i18n-tr section.question header, .i18n-ro section.question header, .i18n-hu section.question header, .i18n-ru section.question header {
  font-family: Georgia, "Times New Roman", Times, serif;
}
/* line 88, ../RiotKit/scss/widgets/faq/_mixin.scss */
.i18n-ja section.question header {
  font-family: "AxisStd-Medium", sans-serif;
}
/* line 93, ../RiotKit/scss/widgets/faq/_mixin.scss */
section.question .answer {
  margin-top: 20px;
  display: none;
}

/* line 2, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery {
  position: relative;
}
/* line 5, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager {
  margin: 0 25px 0 25px;
  height: 110px;
}
/* line 9, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap {
  top: 7px !important;
}
/* line 12, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap .cycle-slide {
  position: relative !important;
}
/* line 15, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap .cycle-slide img {
  width: 170px;
  height: 96px;
  max-width: none;
}
/* line 21, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap .cycle-slide .riot-gallery-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  opacity: .3;
  -webkit-opacity: 0.3;
  -moz-opacity: 0.3;
  filter: alpha(opacity=30);
}
/* line 35, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap .cycle-slide:hover .riot-gallery-overlay {
  display: none;
}
/* line 39, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap .cycle-slide.cycle-slide-active {
  -webkit-box-shadow: 0 0 3px 3px #7cf4fe;
  -moz-box-shadow: 0 0 3px 3px #7cf4fe;
  box-shadow: 0 0 3px 3px #7cf4fe;
}
/* line 43, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap .cycle-slide.cycle-slide-active .riot-gallery-overlay {
  background: transparent url("resources/images/gallery-selected-overlay.png") no-repeat center bottom;
  opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
}
/* line 53, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-pager .cycle-carousel-wrap .cycle-slide.cycle-slide-active:hover .riot-gallery-overlay {
  display: block;
}
/* line 60, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-pager-prev, .riot-gallery .riot-pager-next {
  height: 96px;
  width: 23px;
  background: transparent url("resources/images/gallery-nav-sprite.png") no-repeat 0 0;
  position: absolute;
  top: 7px;
  left: 0;
  z-index: 2;
  cursor: pointer;
}
/* line 71, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-pager-prev:hover, .riot-gallery .riot-pager-next:hover {
  background-position: 0 -96px;
}
/* line 75, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-pager-next {
  left: auto;
  right: 0;
  background-position: -25px 0;
}
/* line 83, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-pager-next:hover {
  background-position: -25px -96px;
}
/* line 87, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-viewport-prev, .riot-gallery .riot-viewport-next {
  height: 75px;
  width: 65px;
  background: transparent url("resources/images/gallery-main-nav-sprite.png") no-repeat 0 0;
  position: absolute;
  top: 329px;
  left: 0;
  z-index: 101;
  cursor: pointer;
}
/* line 98, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-viewport-next {
  left: auto;
  right: 0;
  background-position: -65px 0;
}
/* line 107, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-viewport .no-title .title {
  display: none;
}
/* line 111, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-viewport .no-caption .caption {
  display: none;
}
/* line 115, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-viewport .item > .simple-border {
  padding-top: 1px;
  background-color: #000;
  text-align: center;
  width: 940px;
  height: 530px;
  display: table-cell;
  vertical-align: middle;
}
/* line 125, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-viewport .widescreen img {
  width: 938px;
  height: 528px;
}
/* line 130, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-viewport .tall-widescreen img {
  height: 528px;
  width: auto;
}
/* line 135, ../RiotKit/scss/widgets/gallery/_mixin.scss */
.riot-gallery .riot-gallery-viewport .short-widescreen img {
  width: 938px;
  height: auto;
}

/* line 25, ../RiotKit/scss/widgets/modal/_mixin.scss */
.modal {
  background: #fff;
  border: 1px solid #c0c0c0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  display: none;
  position: fixed;
  z-index: 10050;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* line 34, ../RiotKit/scss/widgets/modal/_mixin.scss */
.modal .modal-header {
  padding: 9px 15px;
  border-bottom: 1px solid #eee;
}
/* line 39, ../RiotKit/scss/widgets/modal/_mixin.scss */
.modal .modal-body {
  padding: 15px;
}
/* line 43, ../RiotKit/scss/widgets/modal/_mixin.scss */
.modal .modal-footer {
  padding: 9px 15px;
  border-top: 1px solid #eee;
  background-color: whiteSmoke;
  text-align: right;
  -webkit-border-radius: 0 0 4px 4px;
  -moz-border-radius: 0 0 4px 4px;
  -ms-border-radius: 0 0 4px 4px;
  -o-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

/* line 52, ../RiotKit/scss/widgets/modal/_mixin.scss */
.modal-static {
  position: relative;
  display: block;
  z-index: auto;
}

/* line 58, ../RiotKit/scss/widgets/modal/_mixin.scss */
.modal-centered {
  position: fixed;
}

/* line 62, ../RiotKit/scss/widgets/modal/_mixin.scss */
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  z-index: 10000;
}

/* line 3, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager a, .pager span {
  display: inline-block;
  height: 25px;
  width: 25px;
  text-align: center;
  margin-right: 10px;
  color: #333132 !important;
  text-shadow: 1px 1px 0 white;
}
/* line 13, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager a {
  border: 1px solid #c0c0c0;
  background: #f3f4f4;
  text-decoration: none;
  line-height: 25px;
  font-size: 10px;
  vertical-align: bottom;
}
/* line 23, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager a.prev,
.pager a.next {
  background-color: transparent;
  background-image: url("resources/images/lol-icons.png");
  background-repeat: no-repeat;
  border: 0;
  width: 16px;
}
/* line 31, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager a:first-child, .pager a:last-child {
  background-color: transparent;
  background-image: url("resources/images/lol-icons.png");
  background-repeat: no-repeat;
  border: 0;
  width: 16px;
}
/* line 47, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager a:last-child {
  margin: 0;
}
/* line 66, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager a.next {
  background-position: 50% -357px;
  margin: 0;
}
/* line 71, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager a.disabled.next {
  background-position: 50% -421px;
}
/* line 75, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager span {
  position: relative;
  top: 8px;
  color: #b3b3b3;
}
/* line 81, ../RiotKit/scss/widgets/pager/_mixin.scss */
.pager .active {
  background: #e4e4e4;
  color: #7a7979;
}

/* line 22, ../RiotKit/scss/widgets/tabs/_mixin.scss */
.riot-tabs .riot-tabs-header-container {
  border-bottom: 1px solid #cdcdce;
}

/* line 25, ../RiotKit/scss/widgets/tabs/_mixin.scss */
.riot-tabs .riot-tabs-header-container .riot-tabs-header {
  float: left;
  padding: 5px 15px 4px 15px;
  margin-right: 5px;
  border: 1px solid #cdcdce;
  border-bottom: 0;
  background: #cfd2de url("resources/images/lol-textures.jpg") no-repeat -255px -814px;
  cursor: pointer;
  position: relative;
  color: #77787b;
}

/* line 36, ../RiotKit/scss/widgets/tabs/_mixin.scss */
.riot-tabs .riot-tabs-header-container .riot-tabs-header:hover {
  background-position: -128px -814px;
}

/* line 39, ../RiotKit/scss/widgets/tabs/_mixin.scss */
.riot-tabs .riot-tabs-header-container .riot-tabs-header.active {
  background-position: -1px -814px;
  cursor: default;
}

/* line 43, ../RiotKit/scss/widgets/tabs/_mixin.scss */
.riot-tabs .riot-tabs-body {
  display: none;
  padding: 10px;
}

/* line 47, ../RiotKit/scss/widgets/tabs/_mixin.scss */
.riot-tabs .riot-tabs-body.active {
  display: block;
}

/* line 2, ../RiotKit/scss/widgets/tooltip/_mixin.scss */
.tooltip {
  position: absolute;
  z-index: 10000;
  color: #fff;
  display: none;
}
/* line 8, ../RiotKit/scss/widgets/tooltip/_mixin.scss */
.tooltip .tooltip-arrow {
  height: 5px;
  width: 5px;
  margin: 0 auto;
  background: #000;
}
/* line 15, ../RiotKit/scss/widgets/tooltip/_mixin.scss */
.tooltip .tooltip-inner {
  padding: 5px;
  background: #000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}

@font-face {
  font-family: "Gill Sans W04";
  src: url("resources/fonts/gill-sans-w04-book.eot?#iefix");
  src: url("resources/fonts/gill-sans-w04-book.eot?#iefix") format("eot"), url("resources/fonts/gill-sans-w04-book.woff") format("woff"), url("resources/fonts/gill-sans-w04-book.ttf") format("truetype"), url("resources/fonts/gill-sans-w04-book.svg#beb2cee2-1a51-44ca-848f-4f795394ee5a") format("svg");
}

@font-face {
  font-family: "Adobe Garamond Pro";
  src: url("resources/fonts/adobe-garamond-pro-1166234.eot?#iefix");
  src: url("resources/fonts/adobe-garamond-pro-1166234.eot?#iefix") format("eot"), url("resources/fonts/adobe-garamond-pro-1166234.woff") format("woff"), url("resources/fonts/adobe-garamond-pro-1166234.ttf") format("truetype"), url("resources/fonts/adobe-garamond-pro-1166234.svg#825d51b9-cc7d-4f4d-ba2c-47ffd291aebd") format("svg");
}

/* line 10, ../scss/globals/_headers.scss */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
a h1,
a h2,
a h3,
a h4,
a h5 {
  text-decoration: none;
}

/* line 1, ../scss/globals/_tables.scss */
table.table-bordered {
  border-collapse: separate;
  border-spacing: 0;
}
/* line 5, ../scss/globals/_tables.scss */
table.table-bordered thead tr:first-child th {
  background-color: #1a1a1a;
  color: #fff;
  border: 1px solid #534c45;
  border-right: 1px solid #1c1c1c;
}
/* line 12, ../scss/globals/_tables.scss */
table.table-bordered tbody tr:first-child td {
  border-top: 0;
}
/* line 16, ../scss/globals/_tables.scss */
table.table-bordered tbody td {
  border-left: 1px solid #d7d7d7;
  border-bottom: 1px solid #d7d7d7;
}
/* line 21, ../scss/globals/_tables.scss */
table.table-bordered tbody td:first-child {
  border-left: 0;
}
/* line 25, ../scss/globals/_tables.scss */
table.table-bordered tbody td:last-child {
  border-right: 0;
}

/**
 * @category Flair
 * @selector .accent-before, .accent-after
 * The accent classes add decorative accents to the top or bottom of a given element. This style is automatically applied
 * to the {@link header.header-primary} style.
 * @example
 * <div class="content-border">
 *   <div class="white-stone accent-before accent-after">
 *     <p>Some example content</p>
 *   </div>
 * </div>
 * @endexample
 */
/* line 15, ../scss/flair/_accent.scss */
.accent-before, header.header-primary,
.accent-after {
  position: relative;
}

/* line 20, ../scss/flair/_accent.scss */
.accent-before::before, header.header-primary::before,
.accent-after::after {
  content: "";
  display: block;
  height: 2px;
  background: black url("resources/images/lol-textures.jpg") no-repeat center -1px;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
}

/* line 32, ../scss/flair/_accent.scss */
.accent-before::before, header.header-primary::before {
  top: 0;
}

/* line 35, ../scss/flair/_accent.scss */
.accent-after::after {
  bottom: 0;
}

/* line 6, ../scss/flair/_header.scss */
header.header > h1,
header.header > h2,
header.header > h3,
header.header > h4,
header.header > h5 {
  border: 1px solid #524d44;
  padding: 9px 18px;
  font-family: "Gill Sans W04", GillSans, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  /* i18n-fonts : header.header font */
}
/* line 20, ../scss/flair/_header.scss */
.i18n-cs header.header > h1, .i18n-el header.header > h1, .i18n-tr header.header > h1, .i18n-pl header.header > h1, .i18n-pt header.header > h1, .i18n-tr header.header > h1, .i18n-ro header.header > h1, .i18n-hu header.header > h1, .i18n-ru header.header > h1, .i18n-cs
header.header > h2, .i18n-el
header.header > h2, .i18n-tr
header.header > h2, .i18n-pl
header.header > h2, .i18n-pt
header.header > h2, .i18n-tr
header.header > h2, .i18n-ro
header.header > h2, .i18n-hu
header.header > h2, .i18n-ru
header.header > h2, .i18n-cs
header.header > h3, .i18n-el
header.header > h3, .i18n-tr
header.header > h3, .i18n-pl
header.header > h3, .i18n-pt
header.header > h3, .i18n-tr
header.header > h3, .i18n-ro
header.header > h3, .i18n-hu
header.header > h3, .i18n-ru
header.header > h3, .i18n-cs
header.header > h4, .i18n-el
header.header > h4, .i18n-tr
header.header > h4, .i18n-pl
header.header > h4, .i18n-pt
header.header > h4, .i18n-tr
header.header > h4, .i18n-ro
header.header > h4, .i18n-hu
header.header > h4, .i18n-ru
header.header > h4, .i18n-cs
header.header > h5, .i18n-el
header.header > h5, .i18n-tr
header.header > h5, .i18n-pl
header.header > h5, .i18n-pt
header.header > h5, .i18n-tr
header.header > h5, .i18n-ro
header.header > h5, .i18n-hu
header.header > h5, .i18n-ru
header.header > h5 {
  font-family: Calibri, Helvetica, Arial, sans-serif;
}
/* line 24, ../scss/flair/_header.scss */
.i18n-ja header.header > h1, .i18n-ja
header.header > h2, .i18n-ja
header.header > h3, .i18n-ja
header.header > h4, .i18n-ja
header.header > h5 {
  font-family: "AxisStd-Regular", sans-serif;
}

/**
 * @category Flair
 * @selector .simple-border
 * Simple border provides a way to give elements a {@link content-border} without nesting the engraved look of .content-border.
 * When wrapping an inline block, make sure to use a <code>span</code> instead of a <code>div</code>.
 * @example
 * <span class="simple-border">
 *   <img src="http://riot-web-static.s3.amazonaws.com/forum/forum_icons/2.jpg">
 * </span>
 * @endexample
 */
/* line 12, ../scss/flair/_simple-border.scss */
.simple-border {
  border: 1px solid #909090;
  display: inline-block;
}
/* line 16, ../scss/flair/_simple-border.scss */
.simple-border img {
  vertical-align: bottom;
}

/* line 21, ../scss/flair/_simple-border.scss */
div.simple-border {
  width: 100%;
}

/* line 2, ../scss/flair/_bullet-styles.scss */
ul.arrow-bullets {
  list-style-image: url("resources/images/bullet-arrow.png");
  padding: 0 0 0 16px;
}

/* line 7, ../scss/flair/_bullet-styles.scss */
.list-items-padded > * {
  margin-top: 10px;
  margin-bottom: 10px;
}
/* line 11, ../scss/flair/_bullet-styles.scss */
.list-items-padded > *:first-child {
  margin-top: inherit;
}
/* line 15, ../scss/flair/_bullet-styles.scss */
.list-items-padded > * *:last-child {
  margin-bottom: inherit;
}

/* line 20, ../scss/flair/_bullet-styles.scss */
.list-margin-none {
  margin: 0px;
}

/* line 23, ../scss/flair/_bullet-styles.scss */
.list-margin-half {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* line 27, ../scss/flair/_bullet-styles.scss */
.list-margin-full {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* line 1, ../scss/elements/_breadcrumbs.scss */
#breadcrumbs {
  width: 1000px;
  padding: 0 30px;
  margin: 0 auto;
  font-size: 0.9em;
  /*  new style for breadcrumb-body-spacer */
}
/* line 7, ../scss/elements/_breadcrumbs.scss */
#breadcrumbs ol {
  list-style-type: none;
  margin: 0;
  height: 1.5em;
  padding: 0.25em 0;
}
/* line 13, ../scss/elements/_breadcrumbs.scss */
#breadcrumbs ol li {
  float: left;
  color: #dedede;
  margin-left: 5px;
  padding-right: 12px;
  background: transparent url("resources/images/icons.png") no-repeat 100% 6px;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
  /* i18n-fonts : adjusts position of breadcrumb caret */
}
/* line 22, ../scss/elements/_breadcrumbs.scss */
#breadcrumbs ol li a {
  color: #dedede;
  text-decoration: none;
}
/* line 27, ../scss/elements/_breadcrumbs.scss */
.i18n-el #breadcrumbs ol li {
  text-transform: none;
}
/* line 40, ../scss/elements/_breadcrumbs.scss */
.i18n-cs #breadcrumbs ol li, .i18n-el #breadcrumbs ol li, .i18n-tr #breadcrumbs ol li, .i18n-pl #breadcrumbs ol li, .i18n-pt #breadcrumbs ol li, .i18n-tr #breadcrumbs ol li, .i18n-ro #breadcrumbs ol li, .i18n-hu #breadcrumbs ol li, .i18n-ru #breadcrumbs ol li {
  background-position: 100% 8px;
}
/* line 46, ../scss/elements/_breadcrumbs.scss */
#breadcrumbs ol li:first-child {
  margin: 0;
}
/* line 51, ../scss/elements/_breadcrumbs.scss */
#breadcrumbs h1 {
  float: none;
  clear: left;
  margin: 0;
  font-size: 2.26667em;
  background-image: none;
  padding: 4px 0 0 0;
  color: #dedede;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7), -1px -1px 4px rgba(0, 0, 0, 0.5);
  /* i18n-fonts : page title font size */
}
/* line 61, ../scss/elements/_breadcrumbs.scss */
#breadcrumbs h1 a {
  color: #dedede;
}
/* line 74, ../scss/elements/_breadcrumbs.scss */
.i18n-cs #breadcrumbs h1, .i18n-el #breadcrumbs h1, .i18n-tr #breadcrumbs h1, .i18n-pl #breadcrumbs h1, .i18n-pt #breadcrumbs h1, .i18n-tr #breadcrumbs h1, .i18n-ro #breadcrumbs h1, .i18n-hu #breadcrumbs h1, .i18n-ru #breadcrumbs h1 {
  font-size: 2.1em;
}
/* line 81, ../scss/elements/_breadcrumbs.scss */
.breadcrumb-body-spacer #breadcrumbs {
  margin-bottom: 0px;
}
/* line 84, ../scss/elements/_breadcrumbs.scss */
.breadcrumb-body-spacer #breadcrumbs h1 {
  margin: 70px 0 110px 0;
}

/* line 1, ../scss/elements/_footer.scss */
#footer {
  width: 100%;
  margin: 25px auto 0px auto;
  padding: 20px 0;
  text-align: center;
  color: #efefef;
  position: relative;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  -webkit-box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 25px 15px rgba(0, 0, 0, 0.6);
  /* note that 'ad-bar' class is deprecated .. lol-sponsors should be used instead. */
}
/* line 17, ../scss/elements/_footer.scss */
#footer #footer-content {
  width: 1000px;
  margin: 0px auto 0px;
  text-align: center;
}
/* line 23, ../scss/elements/_footer.scss */
#footer p {
  margin: 0;
}
/* line 27, ../scss/elements/_footer.scss */
#footer #footer-nav {
  margin-top: 10px;
}
/* line 29, ../scss/elements/_footer.scss */
#footer #footer-nav a {
  color: #bafff7;
}
/* line 33, ../scss/elements/_footer.scss */
#footer #footer-sub-nav {
  margin-top: 10px;
}
/* line 39, ../scss/elements/_footer.scss */
#footer .lol-sponsors,
#footer .ad-bar {
  margin-top: 10px;
}
/* line 42, ../scss/elements/_footer.scss */
#footer .lol-sponsors a,
#footer .ad-bar a {
  margin: 0 auto;
}

/* line 48, ../scss/elements/_footer.scss */
ul.simple-menu {
  text-align: center;
  font-size: 0.66667em;
  list-style: none;
  padding: 0;
}
/* line 54, ../scss/elements/_footer.scss */
ul.simple-menu li {
  display: inline;
}
/* line 57, ../scss/elements/_footer.scss */
ul.simple-menu li:after {
  content: " | ";
  display: inline;
}
/* line 61, ../scss/elements/_footer.scss */
ul.simple-menu li:last-child:after {
  display: none;
}
/* line 65, ../scss/elements/_footer.scss */
ul.simple-menu a {
  text-decoration: none;
  text-transform: uppercase;
  margin: 0 6px;
}
/* line 70, ../scss/elements/_footer.scss */
.i18n-el ul.simple-menu a {
  text-transform: none;
}

/* line 77, ../scss/elements/_footer.scss */
#footer-sub-nav,
#pvp-net-ad {
  list-style: none;
  padding: 0;
}
/* line 81, ../scss/elements/_footer.scss */
#footer-sub-nav a,
#pvp-net-ad a {
  color: #656565;
  text-decoration: none;
  text-transform: uppercase;
  margin: 0 8px 0 5px;
}
/* line 88, ../scss/elements/_footer.scss */
.i18n-el #footer-sub-nav a, .i18n-el
#pvp-net-ad a {
  text-transform: none;
}
/* line 94, ../scss/elements/_footer.scss */
#footer-sub-nav li:after,
#pvp-net-ad li:after {
  content: "|";
  display: inline;
}
/* line 99, ../scss/elements/_footer.scss */
#footer-sub-nav li:last-child:after,
#pvp-net-ad li:last-child:after {
  display: none;
}

/* line 104, ../scss/elements/_footer.scss */
#riot-social {
  text-align: center;
}
/* line 108, ../scss/elements/_footer.scss */
#riot-social a.riot-logo {
  background-image: url("resources/images/footer-sprite.png");
  background-repeat: no-repeat;
  text-indent: -999999em;
  display: block;
  height: 76px;
  width: 98px;
  margin: 0 auto 5px;
}
/* line 118, ../scss/elements/_footer.scss */
#riot-social .social-links {
  list-style: none;
  padding: 0;
}
/* line 122, ../scss/elements/_footer.scss */
#riot-social .social-links li {
  display: inline;
}
/* line 126, ../scss/elements/_footer.scss */
#riot-social .social-links a {
  background-image: url("resources/images/footer-sprite.png");
  background-repeat: no-repeat;
  text-indent: -999999em;
  display: inline-block;
  height: 28px;
  width: 28px;
  margin: 2px;
}
/* line 137, ../scss/elements/_footer.scss */
#riot-social .social-links .youtube {
  background-position: 0 -76px;
}
/* line 141, ../scss/elements/_footer.scss */
#riot-social .social-links .twitter {
  background-position: -28px -76px;
}
/* line 145, ../scss/elements/_footer.scss */
#riot-social .social-links .facebook {
  background-position: -56px -76px;
}

/* line 152, ../scss/elements/_footer.scss */
#pvp-net-ad .pvp-net {
  width: 170px;
  height: 26px;
  background: transparent url("resources/images/footer-sprite.png") no-repeat -101px 0;
  display: block;
  text-indent: -9999em;
  margin: 50px auto 10px;
}

/* line 162, ../scss/elements/_footer.scss */
#footer-play-for-free {
  margin: 10px auto 30px auto;
  min-width: 150px;
}
/* line 166, ../scss/elements/_footer.scss */
.i18n-el #footer-play-for-free {
  text-transform: none;
}

/* line 171, ../scss/elements/_footer.scss */
#website-feedback a {
  position: fixed;
  bottom: 0px;
  right: 20px;
  padding: 2px 10px 3px;
  color: #eeeeee;
  background-color: #be461e;
  border: 1px solid white;
  border-color: rgba(255, 255, 255, 0.5);
  border-bottom: none;
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  z-index: 100;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -ms-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  -webkit-box-shadow: inset -3px 2px 5px -1px rgba(0, 0, 0, 0.5), inset 3px 0px 5px -1px rgba(255, 255, 255, 0.5);
  -moz-box-shadow: inset -3px 2px 5px -1px rgba(0, 0, 0, 0.5), inset 3px 0px 5px -1px rgba(255, 255, 255, 0.5);
  box-shadow: inset -3px 2px 5px -1px rgba(0, 0, 0, 0.5), inset 3px 0px 5px -1px rgba(255, 255, 255, 0.5);
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
/* line 193, ../scss/elements/_footer.scss */
#website-feedback a:hover {
  background-color: #d25a1e;
}

/* line 1, ../scss/elements/_frame.scss */
.section-wrapper {
  min-width: 1000px;
}
/* line 4, ../scss/elements/_frame.scss */
.section-wrapper .section-wrapper-content {
  background-image: url("resources/images/frame-center.png");
  background-repeat: repeat-y;
  background-position: 50% 0;
}
/* line 9, ../scss/elements/_frame.scss */
.section-wrapper .section-wrapper-content .section-wrapper-content-wrapper {
  position: relative;
  width: 980px;
  margin: -121px auto -116px auto;
  padding: 20px 20px;
  min-height: 350px;
}
/* line 18, ../scss/elements/_frame.scss */
.section-wrapper .section-wrapper-top {
  z-index: 1;
}
/* line 23, ../scss/elements/_frame.scss */
.section-wrapper .section-wrapper-top,
.section-wrapper .section-wrapper-bottom {
  position: relative;
}
/* line 27, ../scss/elements/_frame.scss */
.section-wrapper .section-quickbg {
  position: absolute;
  max-width: 1000px;
  background: #DEDEDE;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  margin-left: -500px;
  z-index: -10;
}

/* line 40, ../scss/elements/_frame.scss */
.section-wrapper:before {
  z-index: 2;
}

/* line 44, ../scss/elements/_frame.scss */
.section-wrapper-primary {
  margin-top: 50px;
}
/* line 47, ../scss/elements/_frame.scss */
.section-wrapper-primary .section-wrapper-top:before {
  background-position: 50% 0;
  top: -33px;
  height: 148px;
}

/* line 57, ../scss/elements/_frame.scss */
.navigation-frame .section-wrapper-top {
  top: 5px;
}
/* line 61, ../scss/elements/_frame.scss */
.navigation-frame .section-wrapper-top:before {
  top: -40px;
}
/* line 66, ../scss/elements/_frame.scss */
.navigation-frame .section-wrapper-content .section-wrapper-content-wrapper {
  padding-top: 37px;
}
/* line 70, ../scss/elements/_frame.scss */
.navigation-frame .section-wrapper-content .section-wrapper-content-wrapper:before {
  content: " ";
  display: block;
  position: absolute;
  height: 32px;
  width: 970px;
  background-color: #2D2B26;
  z-index: -2;
  left: 5px;
  top: 0px;
}
/* line 83, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation {
  background-image: url("resources/images/frame-sprite.png");
  background-position: -33px -414px;
  position: absolute;
  left: 3px;
  right: 0;
  top: -1px;
  z-index: -1;
  display: table;
  width: 975px;
  height: 48px;
  margin: 0;
  padding: 0;
  text-align: center;
  list-style-type: none;
  font-size: 0.95em;
}
/* line 107, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation li {
  background: transparent url("resources/images/nav-divider.png") no-repeat 0 7px;
  display: table-cell;
  padding: 0px 0 0px 0;
  user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  cursor: default;
}
/* line 115, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation li a {
  color: #e7e7e7;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
  display: block;
  margin-left: 1px;
  padding: 10px 10px 7px;
  min-width: 80px;
  font-family: "Adobe Garamond Pro", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 0.9em;
  /* i18n-fonts : primary navigation font */
}
/* line 129, ../scss/elements/_frame.scss */
.i18n-el .navigation-frame .primary-navigation li a {
  font-size: 1em;
  text-transform: none;
}
/* line 133, ../scss/elements/_frame.scss */
.i18n-ru .navigation-frame .primary-navigation li a {
  font-size: 0.8em;
}
/* line 146, ../scss/elements/_frame.scss */
.i18n-cs .navigation-frame .primary-navigation li a, .i18n-el .navigation-frame .primary-navigation li a, .i18n-tr .navigation-frame .primary-navigation li a, .i18n-pl .navigation-frame .primary-navigation li a, .i18n-pt .navigation-frame .primary-navigation li a, .i18n-tr .navigation-frame .primary-navigation li a, .i18n-ro .navigation-frame .primary-navigation li a, .i18n-hu .navigation-frame .primary-navigation li a, .i18n-ru .navigation-frame .primary-navigation li a {
  font-family: Georgia, "Times New Roman", Times, serif;
}
/* line 150, ../scss/elements/_frame.scss */
.i18n-ja .navigation-frame .primary-navigation li a {
  font-family: "AxisStd-Medium", sans-serif;
}
/* line 155, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation li a:hover {
  background: transparent url("resources/images/header-hover-bg.png") no-repeat 50% -58px;
  color: #BAFFF7;
}
/* line 160, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation li.active a {
  background: transparent url("resources/images/header-hover-bg.png") no-repeat 50% -98px;
  color: #BAFFF7;
}
/* line 164, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation li.active a:hover {
  background-position: 50% -58px;
}
/* line 168, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation li:first-child {
  background: transparent;
}
/* line 171, ../scss/elements/_frame.scss */
.navigation-frame .primary-navigation li:first-child a {
  margin: 0;
}

/* line 179, ../scss/elements/_frame.scss */
.section-wrapper-primary.navigation-frame .section-wrapper-top:before {
  top: -52px;
}

/**
 * @category Globals
 * @selector Global Elements
 * Most sites in the LoL network will make use of Global Elements to include the header and footer of the website, so your application will include a print statement which prints out the resulting HTML provided by Global Elements.  For details on how to do this, <a href="https://gh.riotgames.com/web/global-elements" target="_blank">read the docs</a>.
 */
/**
 * @category Globals
 * @selector Header Wrapper
 * If you are creating your own navigation system and just want to get the header styling, you can use the following code.
 * @example
 * <div id="header">
 *   <div id="header-content">
 *     <!-- primary navigation goes here -->
 *     <!-- CTA button goes here -->
 *   </div>
 * </div>
 * @endexample
 */
/* line 20, ../scss/elements/_header.scss */
#header {
  background: transparent url("resources/images/header-bg.png") no-repeat 50% 0;
  position: relative;
  height: 222px;
  margin: 0 auto;
  min-width: 1000px;
  z-index: 8;
  top: 10px;
  margin-bottom: 10px;
}
/* line 34, ../scss/elements/_header.scss */
body.small-header-noplay #header {
  background-image: url("resources/images/header-bg-noplay.png");
  height: 170px;
}

/**
 * @category Globals
 * @selector Primary Navigation
 * The primary navigation consists of several links as well as optional dropdown menus full of additional links. The markup for adding top level links is very simple and is as follows:
 * @example
 * <div id="header">
 *   <div id="header-content">
 *     <div id="main-navigation">
 *       <ul class="gs-container gs-table">
 *         <li><a href="#">Link 1</a></li>
 *         <li><a href="#">Link 2</a></li>
 *         <li><a href="#">Link 3</a></li>
 *       </ul>
 *     </div>
 *   </div>
 * </div>
 * @endexample
 */
/**
 * @category Globals
 * @selector Primary Navigation Dropdowns
 * Adding dropdown menus is slightly more complex. If you only want a single level of sublinks you can use the following template:
 * @example
 * <div id="header">
 *   <div id="header-content">
 *     <div id="main-navigation">
 *       <ul class="gs-container gs-table">
 *         <li>
 *           <a href="#" title="">Link 1</a>
 *           <div class="nav-dropdown-trigger">
 *             <div class="nav-dropdown-container">
 *               <div class="nav-dropdown-magic-bl"></div>
 *               <div class="nav-dropdown-magic-br"></div>
 *               <ul>
 *                 <li><a href="#">Secondary Link 1</a></li>
 *                 <li><a href="#">Secondary Link 2</a></li>
 *                 <li><a href="#">Secondary Link 3</a></li>
 *               </ul>
 *             </div>
 *           </div>
 *         </li>
 *         <li>
 *           <a href="#" title="">Link 2</a>
 *           <div class="nav-dropdown-trigger">
 *             <div class="nav-dropdown-container">
 *               <div class="nav-dropdown-magic-bl"></div>
 *               <div class="nav-dropdown-magic-br"></div>
 *               <ul>
 *                 <li><a href="#">Secondary Link 1</a></li>
 *                 <li>
 *                   <a href="#">Secondary Link 2</a>
 *                   <ul>
 *                     <li><a href="#">Tertiary Link 1</a></li>
 *                     <li><a href="#">Tertiary Link 2 Longer Text</a></li>
 *                     <li><a href="#">Tertiary Link 3</a></li>
 *                   </ul>
 *                 </li>
 *                 <li><a href="#">Secondary Link 3</a></li>
 *               </ul>
 *             </div>
 *           </div>
 *         </li>
 *         <li>
 *           <a href="#" title="">Link 3</a>
 *         </li>
 *         <li>
 *           <a href="#" title="">Link 4</a>
 *         </li>
 *       </ul>
 *     </div>
 *   </div>
 * </div>
 * @endexample
 */
/* line 115, ../scss/elements/_header.scss */
#main-navigation {
  position: relative;
  top: 86px;
  padding: 0 15px;
  font-size: 0.9em;
}
/* line 121, ../scss/elements/_header.scss */
#main-navigation > ul {
  overflow: visible;
  list-style-type: none;
  overflow: visible;
  height: 37px;
  margin: 0;
}
/* line 129, ../scss/elements/_header.scss */
#main-navigation > ul > li {
  text-align: center;
  list-style: none;
  padding: 0;
  min-width: 130px;
}
/* line 135, ../scss/elements/_header.scss */
#main-navigation > ul > li > a {
  color: #d1d3d5;
  font-family: "Adobe Garamond Pro", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  display: block;
  padding: 23px 0 11px 0;
  position: relative;
  z-index: 2;
  /* i18n-fonts : header navigation font */
}
/* line 151, ../scss/elements/_header.scss */
.i18n-el #main-navigation > ul > li > a {
  text-transform: none;
}
/* line 164, ../scss/elements/_header.scss */
.i18n-cs #main-navigation > ul > li > a, .i18n-el #main-navigation > ul > li > a, .i18n-tr #main-navigation > ul > li > a, .i18n-pl #main-navigation > ul > li > a, .i18n-pt #main-navigation > ul > li > a, .i18n-tr #main-navigation > ul > li > a, .i18n-ro #main-navigation > ul > li > a, .i18n-hu #main-navigation > ul > li > a, .i18n-ru #main-navigation > ul > li > a {
  font-family: Georgia, "Times New Roman", Times, serif;
}
/* line 168, ../scss/elements/_header.scss */
.i18n-ja #main-navigation > ul > li > a {
  font-family: "AxisStd-Medium", sans-serif;
}
/* line 174, ../scss/elements/_header.scss */
#main-navigation > ul > li:hover > a {
  background: transparent url("resources/images/header-hover-bg.png") no-repeat 50% 4px;
  color: #6ac4cc;
}

/* line 181, ../scss/elements/_header.scss */
#header #lol-home-logo {
  display: block;
  width: 256px;
  height: 96px;
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -128px;
  z-index: 0;
  text-align: left;
  text-indent: -9999px;
  overflow: hidden;
  opacity: 0;
  outline: 0;
}

/* line 199, ../scss/elements/_header.scss */
#play-for-free {
  background: transparent url("resources/images/header-buttton-blank.png") no-repeat 50% -7px;
  display: block;
  width: 190px;
  height: 56px;
  position: relative;
  top: 100px;
  margin: 0 auto;
  padding-top: 3px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  line-height: 56px;
  font-family: "Adobe Garamond Pro", Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 0 1px rgba(250, 153, 55, 0.7), 0 0 6px rgba(255, 255, 255, 0.8);
}
/* line 219, ../scss/elements/_header.scss */
.i18n-el #play-for-free {
  text-transform: none;
}
/* line 223, ../scss/elements/_header.scss */
body.small-header-noplay #play-for-free {
  display: none;
}

/* line 228, ../scss/elements/_header.scss */
#play-for-free:hover {
  color: #FFF;
  background-position: 50% -75px;
}

/* line 233, ../scss/elements/_header.scss */
#header-content {
  width: 972px;
  margin: 0 auto;
  position: relative;
}

/* line 1, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger {
  position: relative;
  z-index: 1;
  height: 3px;
}
/* line 6, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container {
  background: rgba(28, 30, 39, 0.83) url("resources/images/header-dropdown-bg.png") repeat-x 0 0;
  background: -moz-linear-gradient(top, rgba(5, 5, 15, 0.95) 0%, rgba(9, 20, 35, 0.9) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(5, 5, 15, 0.95)), color-stop(100%, rgba(9, 20, 35, 0.9)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(5, 5, 15, 0.95) 0%, rgba(9, 20, 35, 0.9) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(5, 5, 15, 0.95) 0%, rgba(9, 20, 35, 0.9) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(5, 5, 15, 0.95) 0%, rgba(9, 20, 35, 0.9) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, rgba(5, 5, 15, 0.95) 0%, rgba(9, 20, 35, 0.9) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee05050F', endColorstr='#dd091423',GradientType=0 );
  /* IE6-9 */
  -webkit-border-radius: 0 0 9px 9px;
  -moz-border-radius: 0 0 9px 9px;
  -ms-border-radius: 0 0 9px 9px;
  -o-border-radius: 0 0 9px 9px;
  border-radius: 0 0 9px 9px;
  -webkit-box-shadow: inset 0 0 100px 2px rgba(35, 108, 132, 0.3), inset 0 0 20px 2px rgba(35, 108, 132, 0.8), inset 0 0 5px 0px rgba(82, 181, 187, 0.5);
  -moz-box-shadow: inset 0 0 100px 2px rgba(35, 108, 132, 0.3), inset 0 0 20px 2px rgba(35, 108, 132, 0.8), inset 0 0 5px 0px rgba(82, 181, 187, 0.5);
  box-shadow: inset 0 0 100px 2px rgba(35, 108, 132, 0.3), inset 0 0 20px 2px rgba(35, 108, 132, 0.8), inset 0 0 5px 0px rgba(82, 181, 187, 0.5);
  border: 1px solid #52b5bb;
  border: 1px solid rgba(82, 181, 187, 0.7);
  border-top: 0;
  position: absolute;
  left: 0;
  top: -2px;
  z-index: 2;
  display: none;
  padding: 10px 10px 8px 12px;
  min-width: 160px;
}
/* line 37, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container .nav-dropdown-magic-br, #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container .nav-dropdown-magic-bl {
  background: transparent url("resources/images/header-magic-sprite.png") no-repeat -77px bottom;
  position: absolute;
  bottom: -5px;
  right: 0px;
  z-index: -1;
  height: 159px;
  width: 80px;
}
/* line 49, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container .nav-dropdown-magic-bl {
  left: 0px;
  right: auto;
  background-position: -2px bottom;
}
/* line 56, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* line 62, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li {
  text-align: left;
  list-style: none;
  width: 150px;
}
/* line 67, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a {
  color: #6ac4cc;
  font-size: 1em;
  display: inline-block;
  line-height: 1.2em;
  padding: 3px 0;
  text-decoration: none;
  text-transform: none;
  font-family: "Gill Sans W04", GillSans, "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  /* i18n-fonts : nav dropdown font */
}
/* line 86, ../scss/elements/_header-dropdown.scss */
.i18n-cs #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-el #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-tr #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-pl #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-pt #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-tr #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-ro #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-hu #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a, .i18n-ru #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a {
  font-family: Calibri, Helvetica, Arial, sans-serif;
}
/* line 90, ../scss/elements/_header-dropdown.scss */
.i18n-ja #main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a {
  font-family: "AxisStd-Regular", sans-serif;
}
/* line 95, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container li a:hover {
  color: #bafff7;
}
/* line 103, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container > ul > li:first-child {
  margin-top: 0;
}
/* line 107, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container > ul > li > ul li {
  padding: 0 0 0px 15px;
}

/* line 115, ../scss/elements/_header-dropdown.scss */
.nav-dropdown-2-col .nav-dropdown-container {
  width: 335px;
}
/* line 122, ../scss/elements/_header-dropdown.scss */
.nav-dropdown-2-col .nav-dropdown-2nd-col {
  float: right;
  clear: right;
}

/* line 128, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li:last-child > .nav-dropdown-trigger > .nav-dropdown-container {
  right: 0;
  left: auto;
}

/* line 133, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container > ul > li > a {
  color: #d1d3d5;
}

/* line 136, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container > ul > li > a:hover {
  color: #bafff7;
}

/* line 141, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li:hover > .nav-dropdown-trigger .nav-dropdown-container,
#main-navigation > ul > li > .nav-dropdown-trigger .nav-dropdown-container:hover {
  display: block;
}

/* line 146, ../scss/elements/_header-dropdown.scss */
#main-navigation > ul > li:hover .nav-dropdown-container {
  visibility: visible;
}

/* line 150, ../scss/elements/_header-dropdown.scss */
.no-rgba #main-navigation li > .nav-dropdown-trigger .nav-dropdown-container {
  background: transparent url("resources/images/dropdown-background.png");
}

/* old file ... can be removed.
*/
/* line 24, ../scss/lol-kit.scss */
html body {
  font-size: auto;
  background: #000;
  margin: 0px;
  position: relative;
}

/* line 31, ../scss/lol-kit.scss */
html body.pvpnetbar {
  margin-top: 31px !important;
}

/* line 34, ../scss/lol-kit.scss */
html body.admin-menu.pvpnetbar {
  margin-top: 51px !important;
}

/* line 38, ../scss/lol-kit.scss */
.hidden-text {
  text-indent: -99999em;
}