@charset "UTF-8";


/* 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;*/
  font-family: microsoft yahei,tahoma,simsun,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;*/
}

/* 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;
}


/* 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;
}


/* 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;
}


/* line 23, ../RiotKit/scss/globals/layout/_mixin.scss */
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


/* line 34, ../RiotKit/scss/globals/layout/_mixin.scss */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}


/* 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;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}

/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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%;
}


/* 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;
}




/* 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">
 *   <ossweb-img src="https://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;
}