/**
 * Frontender v0.0.1 http://frontender.emelkay.com
 * Cautiously handcrafted by Matt Kingston
 */

/**
 * ---------------------------------------------------
 * :: Grid system 1 to 6 columns
 * ---------------------------------------------------
 */

/**
 * Defines a row of columns/cells and whatnot... Used as a 'clearfix'
 * for the nested elements. check out oocss.org for more info.
 */
.xline,
.xgrid2,
.xgrid3,
.xgrid4,
.xgrid5,
.xgrid6,
.xgrid7,
.xgrid8,
.xgrid9,
.xgrid10,
.xgrid11,
.xgrid12 {
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  clear: left;
  display: block;
}
.xline:after,
.xgrid2:after,
.xgrid3:after,
.xgrid4:after,
.xgrid5:after,
.xgrid6:after,
.xgrid7:after,
.xgrid8:after,
.xgrid9:after,
.xgrid10:after,
.xgrid11:after,
.xgrid12:after {
  content: ".";
  display: block;
  height: 0 !important;
  clear: both;
  visibility: hidden;
  line-height: 0;
}
/**
 * Defines a column/cell within a row. Any cell should be floated, either
 * left or right, except for the last cell in which it is given special styles
 * to fill the remaining space.
 */
.xleft {
  float: left;
}
.xrite,
.xright {
  float: right;
}
/**
 * The last column/cell in the row that has a 'flexible' width. This will 
 * automagically wrap it self within the contraints of columns/cells that
 * are floated to the left and right. Creates an amazing fixed:fluid:fixed
 * layout!
 */
.xlast {
  display: table-cell;
  *display: block;
  *zoom: 1;
  float: none;
  _position: relative;
  _left: -3px;
  _margin-right: -3px;
  width: auto !important;
  /**
	 * Opera... pfft.
	 */

}
.xlast:after {
  display: block;
  height: 0 !important;
  clear: both;
  visibility: hidden;
  line-height: 0;
  /**
		 * Generated content is required here long enough to fill any remaining
		 * space that might be left unfilled from the floated columns!
		 */

  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . " !important;
}
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {
  .xlast .xlast {
    display: block;
  }
}
.x1of1 {
  float: none;
}
.x1of2 {
  width: 50%;
}
.x1of3 {
  width: 33.33333%;
}
.x2of3 {
  width: 66.66667%;
}
.x1of4 {
  width: 25%;
}
.x3of4 {
  width: 75%;
}
.x1of5 {
  width: 20%;
}
.x2of5 {
  width: 40%;
}
.x3of5 {
  width: 60%;
}
.x4of5 {
  width: 80%;
}
.x1of6 {
  width: 16.66667%;
}
.x5of6 {
  width: 83.33335%;
}
.l1of2 {
  margin-left: 50%;
}
.l1of3 {
  margin-left: 33.33333%;
}
.l2of3 {
  margin-left: 66.66667%;
}
.l1of4 {
  margin-left: 25%;
}
.l3of4 {
  margin-left: 75%;
}
.l1of5 {
  margin-left: 20%;
}
.l2of5 {
  margin-left: 40%;
}
.l3of5 {
  margin-left: 60%;
}
.l4of5 {
  margin-left: 80%;
}
.l1of6 {
  margin-left: 16.66667%;
}
.l5of6 {
  margin-left: 83.33335%;
}
.r1of2 {
  margin-right: 50%;
}
.r1of3 {
  margin-right: 33.33333%;
}
.r2of3 {
  margin-right: 66.66667%;
}
.r1of4 {
  margin-right: 25%;
}
.r3of4 {
  margin-right: 75%;
}
.r1of5 {
  margin-right: 20%;
}
.r2of5 {
  margin-right: 40%;
}
.r3of5 {
  margin-right: 60%;
}
.r4of5 {
  margin-right: 80%;
}
.r1of6 {
  margin-right: 16.66667%;
}
.r5of6 {
  margin-right: 83.33335%;
}
.xcell {
  float: left;
  display: inline;
}
.xgrid2 .xcell {
  width: 50%;
}
.xgrid3 .xcell {
  width: 33.33333%;
}
.xgrid4 .xcell {
  width: 25%;
}
.xgrid5 .xcell {
  width: 20%;
}
.xgrid6 .xcell {
  width: 16.66667%;
}
.xgrid7 .xcell {
  width: 14.28571%;
}
.xgrid8 .xcell {
  width: 12.5%;
}
.xgrid9 .xcell {
  width: 11.11111%;
}
.xgrid10 .xcell {
  width: 10%;
}
.xgrid11 .xcell {
  width: 9.09091%;
}
.xgrid12 .xcell {
  width: 8.33333%;
}
.xgrid2 .xcell:nth-child(2n+1),
.xgrid3 .xcell:nth-child(3n+1),
.xgrid4 .xcell:nth-child(4n+1),
.xgrid5 .xcell:nth-child(5n+1),
.xgrid6 .xcell:nth-child(6n+1),
.xgrid7 .xcell:nth-child(7n+1),
.xgrid8 .xcell:nth-child(8n+1),
.xgrid9 .xcell:nth-child(9n+1),
.xgrid10 .xcell:nth-child(10n+1),
.xgrid11 .xcell:nth-child(11n+1),
.xgrid12 .xcell:nth-child(12n+1) {
  clear: both;
}
/**
 * Classes available: Assumes Large display
 * 1. show-small
 * 2. hide-small
 * 3. show-medium
 * 5. hide-medium
 * 7. show-large
 * 8. hide-large
 */
.show-when-small,
.show-when-medium,
.hide-when-large {
  display: none !important;
}
.hide-when-small,
.hide-when-medium,
.show-when-large {
  display: inherit !important;
}
/* Large display targeting */
@media only screen and (min-width: 1440px) {
  .hide-when-small,
  .hide-when-medium,
  .show-when-large {
    display: inherit !important;
  }
  .show-when-small,
  .show-when-medium,
  .hide-when-large {
    display: none !important;
  }
}
/* Medium display targeting */
@media only screen and (min-width: 800px) and (max-width: 1440px) {
  .hide-when-small,
  .show-when-medium,
  .hide-when-large {
    display: inherit !important;
  }
  .show-when-small,
  .hide-when-medium,
  .show-when-large {
    display: none !important;
  }
}
/* Small display targeting */
@media only screen and (max-width: 800px) {
  .show-when-small,
  .hide-when-medium,
  .hide-when-large {
    display: inherit !important;
  }
  .hide-when-small,
  .show-when-medium,
  .show-when-large {
    display: none !important;
  }
}
/* Orientation targeting */
.show-for-landscape,
.hide-for-portrait {
  display: inherit !important;
}
.hide-for-landscape,
.show-for-portrait {
  display: none !important;
}
@media screen and (orientation: landscape) {
  .show-for-landscape,
  .hide-for-portrait {
    display: inherit !important;
  }
  .hide-for-landscape,
  .show-for-portrait {
    display: none !important;
  }
}
@media screen and (orientation: portrait) {
  .show-for-portrait,
  .hide-for-landscape {
    display: inherit !important;
  }
  .hide-for-portrait,
  .show-for-landscape {
    display: none !important;
  }
}
/* Touch-enabled device targeting */
.show-for-touch {
  display: none !important;
}
.hide-for-touch {
  display: inherit !important;
}
.has-touch .show-for-touch {
  display: inherit !important;
}
.has-touch .hide-for-touch {
  display: none !important;
}
@media screen and (min-width: 320px) and (max-width: 480px) {
  
}
@media screen and (min-width: 480px) and (max-width: 640px) {
  
}
@media screen and (min-width: 320px) and (max-width: 640px) {
  .x1of6.mobile,
  .x1of4.mobile {
    width: 50%;
  }
  .x1of1.mobile,
  .x1of2.mobile,
  .x1of3.mobile,
  .x2of3.mobile,
  .x3of4.mobile,
  .x1of5.mobile,
  .x2of5.mobile,
  .x3of5.mobile,
  .x4of5.mobile,
  .x5of6.mobile {
    clear: both;
    width: 100%;
  }
  .l1of2.mobile,
  .l1of3.mobile,
  .l2of3.mobile,
  .l1of4.mobile,
  .l3of4.mobile,
  .l1of5.mobile,
  .l2of5.mobile,
  .l3of5.mobile,
  .l4of5.mobile,
  .l5of6.mobile,
  .l1of6.mobile,
  .r1of2.mobile,
  .r1of3.mobile,
  .r2of3.mobile,
  .r1of4.mobile,
  .r3of4.mobile,
  .r1of5.mobile,
  .r2of5.mobile,
  .r3of5.mobile,
  .r4of5.mobile,
  .r1of6.mobile,
  .r5of6.mobile {
    margin-left: 0;
    margin-right: 0;
  }
  .xlast.mobile {
    display: block;
    width: 100% !important;
  }
  .x1of6.xlast.mobile,
  .x1of4.xlast.mobile {
    display: table-cell;
    *display: block;
    *zoom: 1;
    float: none;
    _position: relative;
    _left: -3px;
    _margin-right: -3px;
    width: auto !important;
  }
}
@media screen and (min-width: 640px) and (max-width: 960px) {
  .x1of6.mobile {
    width: 33.3333334%;
  }
  .x5of6.mobile {
    width: 100%;
  }
}
@media screen and (min-width: 960px) and (max-width: 1280px) {
  .x1of2.mobile {
    width: 50%;
  }
  .x1of3.mobile {
    width: 33.3333334%;
  }
  .x2of3.mobile {
    width: 66.6666668%;
  }
  .x1of4.mobile {
    width: 33.3333334%;
  }
  .x3of4.mobile {
    width: 75%;
  }
  .x5of6.mobile {
    width: 83.3333335%;
  }
  .xlast.mobile {
    display: table-cell;
    *display: block;
    *zoom: 1;
    float: none;
    _position: relative;
    _left: -3px;
    _margin-right: -3px;
    width: auto !important;
  }
  .x1of6.mobile,
  .x5of6.mobile,
  .x1of4.mobile,
  .x3of4.mobile,
  .x1of3.mobile,
  .x2of3.mobile,
  .x1of2.mobile {
    clear: none;
  }
  .l1of2.mobile {
    margin-left: 50%;
  }
  .l1of3.mobile {
    margin-left: 33.3333334%;
  }
  .l2of3.mobile {
    margin-left: 66.6666668%;
  }
  .l1of4.mobile {
    margin-left: 25%;
  }
  .l3of4.mobile {
    margin-left: 75%;
  }
  .l1of5.mobile {
    margin-left: 20%;
  }
  .l2of5.mobile {
    margin-left: 40%;
  }
  .l3of5.mobile {
    margin-left: 60%;
  }
  .l4of5.mobile {
    margin-left: 80%;
  }
  .l1of6.mobile {
    margin-left: 16.6666667%;
  }
  .l5of6.mobile {
    margin-left: 83.3333335%;
  }
  .r1of2.mobile {
    margin-right: 50%;
  }
  .r1of3.mobile {
    margin-right: 33.3333334%;
  }
  .r2of3.mobile {
    margin-right: 66.6666668%;
  }
  .r1of4.mobile {
    margin-right: 25%;
  }
  .r3of4.mobile {
    margin-right: 75%;
  }
  .r1of5.mobile {
    margin-right: 20%;
  }
  .r2of5.mobile {
    margin-right: 40%;
  }
  .r3of5.mobile {
    margin-right: 60%;
  }
  .r4of5.mobile {
    margin-right: 80%;
  }
  .r1of6.mobile {
    margin-right: 16.6666667%;
  }
  .r5of6.mobile {
    margin-right: 83.3333335%;
  }
}
@media screen and (min-width: 1280px) {
  .x1of6.mobile {
    width: 16.6666667%;
  }
  .x1of4.mobile {
    width: 25%;
  }
  .x3of4.mobile {
    width: 75%;
  }
}