@charset "UTF-8";
/*------------------------------------*\
    VARS.SCSS
\*------------------------------------*/
/**
 * Any variables you find set in inuit.css’ `_vars.scss` that you do not wish to
 * keep, simply redefine here. This means that if inuit.css, for example, sets
 * your `$base-font-size` at 16px and you wish it to be 14px, simply redeclare
 * that variable in this file. inuit.css ignores its own variables in favour of
 * using your own, so you can completely modify how inuit.css works without ever
 * having to alter the framework itself.
 */
/*------------------------------------*\
    $OBJECTS-AND-ABSTRACTIONS
\*------------------------------------*/
/**
 * All of inuit.css’ objects and abstractions are initially turned off by
 * default. This means that you start any project with as little as possible,
 * and introducing objects and abstractions is as simple as switching the
 * following variables to `true`.
 */
/*-----------------------------------------------*\
     $STYLE GUIDE
\*-----------------------------------------------*/
/*
 * Colors
 */
/* Font sizes */
/*
 * Spacing Units
 */
/*------------------------------------*\
    $DEFAULTS
\*------------------------------------*/
/**
 * inuit.css’ default variables. Redefine these in your `_vars.scss` file (found
 * in the inuit.css-web-template) to override them.
 */
/*------------------------------------*\
    $DEBUG
\*------------------------------------*/
/**
 * Debug mode will visually highlight any potential markup/accessibility quirks
 * in the browser. Set to `true` or `false`.
 */
/*------------------------------------*\
    $BORDER-BOX
\*------------------------------------*/
/**
 * Do you want all elements to adopt `box-sizing:border-box;` as per
 * paulirish.com/2012/box-sizing-border-box-ftw ?
 */
/*------------------------------------*\
    $BASE
\*------------------------------------*/
/**
 * Base stuff
 */
/**
 * Base font-family.
 */
/**
 * Default colour for objects’ borders etc.
 */
/*------------------------------------*\
    $RESPONSIVE
\*------------------------------------*/
/**
 * Responsiveness?
 */
/**
 * Responsiveness for widescreen/high resolution desktop monitors and beyond?
 * Note: `$responsive` variable above must be set to true before enabling this.
 */
/**
 * Responsive push and pull produce a LOT of code, only turn them on if you
 * definitely need them.
 */
/**
 * Note: `$push` variable above must be set to true before enabling these.
 */
/**
 * Note: `$pull` variable above must be set to true before enabling these.
 */
/**
 * Tell inuit.css when breakpoints start.
 */
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Font-sizes (in pixels). Refer to relevant sections for their implementations.
 */
/*------------------------------------*\
    $QUOTES
\*------------------------------------*/
/**
 * English quote marks?
 */
/**
 * If you want English quotes then please do not edit these; they’re only here
 * because Sass needs them.
 */
/**
 * If you need non-English quotes, please alter the following values accordingly:
 */
/*------------------------------------*\
    $BRAND
\*------------------------------------*/
/**
 * Brand stuff
 */
/**
 * How big would you like round corners to be by default?
 */
/*------------------------------------*\
    $OBJECTS AND ABSTRACTIONS
\*------------------------------------*/
/**
 * Which objects and abstractions would you like to use?
 */
/*------------------------------------*\
    $FRAMEWORK
\*------------------------------------*/
/**
 * inuit.css will work these next ones out for use within the framework.
 *
 * Assign our `$base-line-height` to a new spacing var for more transparency.
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * Create a fully formed type style (sizing and vertical rhythm) by passing in a
 * single value, e.g.:
 *
   `@include font-size(10px);`
 *
 * Thanks to @redclov3r for the `line-height` Sass:
 * twitter.com/redclov3r/status/250301539321798657
 */
/**
 * Convert basic px measurements into rem units
 */
/**
 * Style any number of headings in one fell swoop, e.g.:
 *
   .foo{
       @include headings(1, 3){
           color:#BADA55;
       }
    }
 *
 * With thanks to @lar_zzz, @paranoida and @rowanmanning for refining and
 * improving my initial mixin.
 */
/**/
/**
 * Create vendor-prefixed CSS in one go, e.g.
 *
   `@include vendor(border-radius, 4px);`
 *
 */
/**
 * Create CSS keyframe animations for all vendors in one go, e.g.:
 *
   .foo{
       @include vendor(animation, shrink 3s);
   }

   @include keyframe(shrink){
       from{
           font-size:5em;
       }
   }
 *
 * Courtesy of @integralist: twitter.com/integralist/status/260484115315437569
 */
/**
 * Force overly long spans of text to truncate, e.g.:
 *
   `@include truncate(100%);`
 *
 * Where `$truncation-boundary` is a united measurement.
 */
/**
 * CSS arrows!!! But... before you read on, you might want to grab a coffee...
 *
 * This mixin creates a CSS arrow on a given element. We can have the arrow
 * appear in one of 12 locations, thus:
 *
 *       01    02    03
 *    +------------------+
 * 12 |                  | 04
 *    |                  |
 * 11 |                  | 05
 *    |                  |
 * 10 |                  | 06
 *    +------------------+
 *       09    08    07
 *
 * You pass this position in along with a desired arrow color and optional
 * border color, for example:
 *
 * `@include arrow(top, left, red)`
 *
 * for just a single, red arrow, or:
 *
 * `@include arrow(bottom, center, red, black)`
 *
 * which will create a red triangle with a black border which sits at the bottom
 * center of the element. Call the mixin thus:
 *
   .foo{
       background-color:#BADA55;
       border:1px solid #ACE;
       @include arrow(top, left, #BADA55, #ACE);
   }
 *
 */
/**
 * Media query mixin.
 *
 * It’s not great practice to define solid breakpoints up-front, preferring to
 * modify your design when it needs it, rather than assuming you’ll want a
 * change at ‘mobile’. However, as inuit.css is required to take a hands off
 * approach to design decisions, this is the closest we can get to baked-in
 * responsiveness. It’s flexible enough to allow you to set your own breakpoints
 * but solid enough to be frameworkified.
 *
 * We define some broad breakpoints in our vars file that are picked up here
 * for use in a simple media query mixin. Our options are:
 *
 * palm
 * lap
 * lap-and-up
 * portable
 * desk
 * desk-wide
 *
 * Not using a media query will, naturally, serve styles to all devices.
 *
 * `@include media-query(palm){ [styles here] }`
 *
 * We work out your end points for you:
 */
/*------------------------------------*\
    $CLEARFIX
\*------------------------------------*/
/**
 * Micro clearfix, as per: css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
 * Extend the clearfix class with Sass to avoid the `.cf` class appearing over
 * and over in your markup.
 */
.cf:after, .grid:after {
  content: "";
  display: table;
  clear: both; }

/*------------------------------*\
               RTL SUPPORT
\*------------------------------*/
/*body*/
.rtl {
  direction: rtl;
  unicode-bidi: embed;
  text-align: right; }

.grid {
  margin-right: -24px;
  margin-left: 0; }
  .grid .grid__item {
    float: right;
    padding-left: 0;
    padding-right: 24px; }

.pixcode--grid {
  margin-right: -48px; }

.pixcode--grid > .grid__item {
  padding-right: 48px; }

th, td {
  text-align: right; }

blockquote {
  padding-right: 36px;
  padding-left: 0;
  border-left-width: 0;
  border-right-width: 10px;
  border-right-style: solid; }

.page-numbers.prev {
  left: auto;
  right: 0; }

.page-numbers.next {
  right: auto;
  left: 0; }

.page-numbers.prev:before {
  content: "\2192";
  margin-right: 0;
  margin-left: 12px; }

.page-numbers.next:after {
  content: "\2190";
  margin-left: 0;
  margin-right: 12px; }

.media__img, .author__avatar, .latest-comments__avatar {
  float: right;
  margin-left: 24px;
  margin-left: 1.5rem;
  margin-right: 0; }

.pixlikes-box {
  float: right; }

@media only screen and (min-width: 900px) {
  .add_this_list {
    float: left; } }
/*------------------------------------*\
	$NAVIGATION
\*------------------------------------*/
.navigation--main {
  float: left; }

.nav--items-social {
  float: left; }

.menu-item-has-children:after {
  left: 6px;
  right: auto; }

.navigator {
  right: auto;
  left: 48px; }

.archive-filter {
  left: 0;
  right: auto; }

.pix-dropdown .dropdown__trigger:after {
  top: -3px;
  margin-right: 15px; }

/*------------------------------------*\
    $SIDEBAR
\*------------------------------------*/
@media only screen and (min-width: 900px) {
  .page-content.has-sidebar {
    margin-left: -325px;
    margin-right: 0;
    float: right; }
    .page-content.has-sidebar:after {
      right: auto;
      left: 325px; }
    .page-content.has-sidebar .page-content__wrapper {
      padding-left: 48px;
      padding-right: 0;
      margin-left: 325px;
      margin-right: 0; } }

@media only screen and (min-width: 900px) {
  .sidebar--main {
    float: left; } }

.meta-list .list-head {
  margin-right: 0;
  margin-left: 12px; }

.btn-list > .btn {
  float: right; }

/*------------------------------------*\
    $COMMENTS
\*------------------------------------*/
.comments-area:before {
  left: auto;
  right: 20px; }

.commentlist > .comment, .commentlist > .pingback {
  padding-left: 0;
  padding-right: 60px; }

.comment .comment-number, .pingback .comment-number {
  left: auto;
  right: 0; }
  @media only screen and (max-width: 899px) {
    .comment .comment-number, .pingback .comment-number {
      left: auto;
      right: -60px; } }

li.comment .children, li.pingback .children {
  margin-left: 0; }
  @media only screen and (min-width: 900px) {
    li.comment .children li, li.pingback .children li {
      padding-left: 0;
      padding-right: 72px; } }

li.depth-2:before {
  left: auto;
  right: -40px; }

@media only screen and (min-width: 900px) {
  li.depth-3:before {
    left: auto;
    right: -112px; }

  li.depth-4:before {
    left: auto;
    right: -184px; }

  li.depth-5:before {
    left: auto;
    right: -256px; }

  li.depth-6:before {
    left: auto;
    right: -328px; }

  li.depth-7:before {
    left: auto;
    right: -400px; }

  li.depth-8:before {
    left: auto;
    right: -472px; }

  li.depth-9:before {
    left: auto;
    right: -544px; }

  li.depth-10:before {
    left: auto;
    right: -616px; } }
.comment-number.total,
.total.comment-number--dark,
.comments-area-title .total.comment-number,
.comment-reply-title .total.comment-number,
.add-comment .total.add-comment__button {
  margin-right: 0;
  margin-left: 12px; }

.comments-area-title .comments-title, .comment-reply-title .comments-title {
  margin-right: 0;
  margin-left: 6px; }

.comment__meta > * {
  display: inline-block; }

/*------------------------------------*\
    $MENUS
\*------------------------------------*/
.menu-list__title, .menu-list__item-title, p.menu-list__item-desc {
  text-align: right; }

.menu-list__item-title {
  padding-right: 0;
  padding-left: 72px; }

.menu-list__item-price {
  right: auto;
  left: 0; }

@media only screen and (min-width: 900px) {
  .menu-list__item-highlight-title {
    left: auto;
    right: -18px; } }
/*------------------------------------*\
    $WOO
\*------------------------------------*/
a.shipping-calculator-button {
  display: block;
  text-align: right; }

.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals {
  float: none;
  width: 100%; }

.woocommerce #content div.product form.cart .button,
.woocommerce div.product form.cart .button,
.woocommerce-page #content div.product form.cart .button,
.woocommerce-page div.product form.cart .button {
  float: right; }

.woocommerce #content div.product form.cart div.quantity,
.woocommerce div.product form.cart div.quantity,
.woocommerce-page #content div.product form.cart div.quantity,
.woocommerce-page div.product form.cart div.quantity {
  float: right;
  margin-left: 12px; }

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
  float: right; }

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
  float: left; }

.product__badge {
  left: auto;
  right: -3px; }

.woocommerce #reviews #comments ol.commentlist li img.avatar,
.woocommerce-page #reviews #comments ol.commentlist li img.avatar {
  left: auto;
  right: 0; }

.woocommerce #reviews #comments ol.commentlist li .comment-text,
.woocommerce-page #reviews #comments ol.commentlist li .comment-text {
  margin-left: 0;
  margin-right: 50px; }

.woocommerce .star-rating, .woocommerce-page .star-rating {
  float: none;
  display: inline-block; }