@charset "UTF-8";
/*------------------------------------*\
    #BREAKPOINTS
\*------------------------------------*/
/*------------------------------------*\
    #GRID SETTINGS
\*------------------------------------*/
/*------------------------------------*\
    #PATH
\*------------------------------------*/
/*------------------------------------*\
    #COLORS
\*------------------------------------*/
/*------------------------------------*\
    $CSSWIZARDRY-GRIDS
\*------------------------------------*/
/**
 * CONTENTS
 * INTRODUCTION.........How the grid system works.
 * VARIABLES............Your settings.
 * MIXINS...............Library mixins.
 * GRID SETUP...........Build the grid structure.
 * WIDTHS...............Build our responsive widths around our breakpoints.
 * PUSH.................Push classes.
 * PULL.................Pull classes.
 */
/*------------------------------------*\
    $INTRODUCTION
\*------------------------------------*/
/**
 * csswizardry grids provides you with widths to suit a number of breakpoints
 * designed around devices of a size you specify. Out of the box, csswizardry
 * grids caters to the following types of device:
 *
 * palm     --  palm-based devices, like phones and small tablets
 * lap      --  lap-based devices, like iPads or laptops
 * portable --  all of the above
 * desk     --  stationary devices, like desktop computers
 * regular  --  any/all types of device
 *
 * These namespaces are then used in the library to give you the ability to
 * manipulate your layouts based around them, for example:
 *
   <div class="grid__item  one-whole  lap--one-half  desk--one-third">
 *
 * This would give you a grid item which is 100% width unless it is on a lap
 * device, at which point it become 50% wide, or it is on a desktop device, at
 * which point it becomes 33.333% width.
 *
 * csswizardry grids also has push and pull classes which allow you to nudge
 * grid items left and right by a defined amount. These follow the same naming
 * convention as above, but are prepended by either `push--` or `pull--`, for
 * example:
 *
   `class="grid__item  one-half  push--one-half"`
 *
 * This would give you a grid item which is 50% width and pushed over to the
 * right by 50%.
 *
 * All classes in csswizardry grids follow this patten, so you should fairly
 * quickly be able to piece together any combinations you can imagine, for
 * example:
 *
   `class="grid__item  one-whole  lap--one-half  desk--one-third  push--desk--one-third"`
 *
   `class="grid__item  one-quarter  palm--one-half  push--palm--one-half"`
 *
   `class="grid__item  palm--one-third  desk--five-twelfths"`
 */
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * If you are building a non-responsive site but would still like to use
 * csswizardry-grids, set this to ‘false’:
 */
/**
 * Is this build mobile first? Setting to ‘true’ means that all grids will be
 * 100% width if you do not apply a more specific class to them.
 */
/**
 * Set the spacing between your grid items.
 */
/**
 * Would you like Sass’ silent classes, or regular CSS classes?
 */
/**
 * Would you like push and pull classes enabled?
 */
/**
 * Using `inline-block` means that the grid items need their whitespace removing
 * in order for them to work correctly. Set the following to true if you are
 * going to achieve this by manually removing/commenting out any whitespace in
 * your HTML yourself.
 *
 * Setting this to false invokes a hack which cannot always be guaranteed,
 * please see the following for more detail:
 *
 * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
 */
/**
 * Define your breakpoints. The first value is the prefix that shall be used for
 * your classes (e.g. `.palm--one-half`), the second value is the media query
 * that the breakpoint fires at.
 */
/**
 * Define which namespaced breakpoints you would like to generate for each of
 * widths, push and pull. This is handy if you only need pull on, say, desk, or
 * you only need a new width breakpoint at mobile sizes. It allows you to only
 * compile as much CSS as you need. All are turned on by default, but you can
 * add and remove breakpoints at will.
 *
 * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
 * have been set to ‘true’.
 */
/**
 * You do not need to edit anything from this line onward; csswizardry-grids is
 * good to go. Happy griddin’!
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * These mixins are for the library to use only, you should not need to modify
 * them at all.
 *
 * Enclose a block of code with a media query as named in `$breakpoints`.
 */
/**
 * Drop relative positioning into silent classes which can’t take advantage of
 * the `[class*="push--"]` and `[class*="pull--"]` selectors.
 */
/*------------------------------------*\
    $GRID SETUP
\*------------------------------------*/
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
 */
.grid {
  list-style: none;
  /* [1] */
  margin: 0;
  /* [2] */
  padding: 0;
  /* [2] */
  margin-left: -2px;
  /* [3] */
}

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
.grid__item {
  display: inline-block;
  /* [1] */
  padding-left: 2px;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */
  -webkit-box-sizing: border-box;
  /* [5] */
  /* [5] */
  box-sizing: border-box;
  /* [5] */
}

/**
 * Reversed grids allow you to structure your source in the opposite order to
 * how your rendered layout will appear. Extends `.grid`.
 */
.grid--rev {
  direction: rtl;
  text-align: left;
}
.grid--rev > .grid__item {
  direction: ltr;
  text-align: left;
}

/**
 * Gutterless grids have all the properties of regular grids, minus any spacing.
 * Extends `.grid`.
 */
.grid--full {
  margin-left: 0;
}
.grid--full > .grid__item {
  padding-left: 0;
}

/**
 * Align the entire grid to the right. Extends `.grid`.
 */
.grid--right {
  text-align: right;
}
.grid--right > .grid__item {
  text-align: left;
}

/**
 * Centered grids align grid items centrally without needing to use push or pull
 * classes. Extends `.grid`.
 */
.grid--center {
  text-align: center;
}
.grid--center > .grid__item {
  text-align: left;
}

/**
 * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
 * `.grid`.
 */
.grid--middle > .grid__item {
  vertical-align: middle;
}

.grid--bottom > .grid__item {
  vertical-align: bottom;
}

/**
 * Create grids with narrower gutters. Extends `.grid`.
 */
.grid--narrow {
  margin-left: -1px;
}
.grid--narrow > .grid__item {
  padding-left: 1px;
}

/**
 * Create grids with wider gutters. Extends `.grid`.
 */
.grid--wide {
  margin-left: -4px;
}
.grid--wide > .grid__item {
  padding-left: 4px;
}

/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * Create our width classes, prefixed by the specified namespace.
 */
/**
 * Our regular, non-responsive width classes.
 */
/**
 * Whole
 */
.one-whole {
  width: 100%;
}

/**
 * Halves
 */
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%;
}

/**
 * Thirds
 */
.one-third, .two-sixths, .four-twelfths {
  width: 33.333%;
}

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666%;
}

/**
 * Quarters
 */
.one-quarter, .two-eighths, .three-twelfths {
  width: 25%;
}

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%;
}

/**
 * Fifths
 */
.one-fifth, .two-tenths {
  width: 20%;
}

.two-fifths, .four-tenths {
  width: 40%;
}

.three-fifths, .six-tenths {
  width: 60%;
}

.four-fifths, .eight-tenths {
  width: 80%;
}

/**
 * Sixths
 */
.one-sixth, .two-twelfths {
  width: 16.666%;
}

.five-sixths, .ten-twelfths {
  width: 83.333%;
}

/**
 * Eighths
 */
.one-eighth {
  width: 12.5%;
}

.three-eighths {
  width: 37.5%;
}

.five-eighths {
  width: 62.5%;
}

.seven-eighths {
  width: 87.5%;
}

/**
 * Tenths
 */
.one-tenth {
  width: 10%;
}

.three-tenths {
  width: 30%;
}

.seven-tenths {
  width: 70%;
}

.nine-tenths {
  width: 90%;
}

/**
 * Twelfths
 */
.one-twelfth {
  width: 8.333%;
}

.five-twelfths {
  width: 41.666%;
}

.seven-twelfths {
  width: 58.333%;
}

.eleven-twelfths {
  width: 91.666%;
}

/**
 * Our responsive classes, if we have enabled them.
 */
@media only screen and (min-width: 320px) {
  /**
   * Whole
   */
  .sm--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .sm--one-half, .sm--two-quarters, .sm--three-sixths, .sm--four-eighths, .sm--five-tenths, .sm--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .sm--one-third, .sm--two-sixths, .sm--four-twelfths {
    width: 33.333%;
  }

  .sm--two-thirds, .sm--four-sixths, .sm--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .sm--one-quarter, .sm--two-eighths, .sm--three-twelfths {
    width: 25%;
  }

  .sm--three-quarters, .sm--six-eighths, .sm--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .sm--one-fifth, .sm--two-tenths {
    width: 20%;
  }

  .sm--two-fifths, .sm--four-tenths {
    width: 40%;
  }

  .sm--three-fifths, .sm--six-tenths {
    width: 60%;
  }

  .sm--four-fifths, .sm--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .sm--one-sixth, .sm--two-twelfths {
    width: 16.666%;
  }

  .sm--five-sixths, .sm--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .sm--one-eighth {
    width: 12.5%;
  }

  .sm--three-eighths {
    width: 37.5%;
  }

  .sm--five-eighths {
    width: 62.5%;
  }

  .sm--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .sm--one-tenth {
    width: 10%;
  }

  .sm--three-tenths {
    width: 30%;
  }

  .sm--seven-tenths {
    width: 70%;
  }

  .sm--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .sm--one-twelfth {
    width: 8.333%;
  }

  .sm--five-twelfths {
    width: 41.666%;
  }

  .sm--seven-twelfths {
    width: 58.333%;
  }

  .sm--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 768px) {
  /**
   * Whole
   */
  .md--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .md--one-half, .md--two-quarters, .md--three-sixths, .md--four-eighths, .md--five-tenths, .md--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .md--one-third, .md--two-sixths, .md--four-twelfths {
    width: 33.333%;
  }

  .md--two-thirds, .md--four-sixths, .md--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .md--one-quarter, .md--two-eighths, .md--three-twelfths {
    width: 25%;
  }

  .md--three-quarters, .md--six-eighths, .md--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .md--one-fifth, .md--two-tenths {
    width: 20%;
  }

  .md--two-fifths, .md--four-tenths {
    width: 40%;
  }

  .md--three-fifths, .md--six-tenths {
    width: 60%;
  }

  .md--four-fifths, .md--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .md--one-sixth, .md--two-twelfths {
    width: 16.666%;
  }

  .md--five-sixths, .md--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .md--one-eighth {
    width: 12.5%;
  }

  .md--three-eighths {
    width: 37.5%;
  }

  .md--five-eighths {
    width: 62.5%;
  }

  .md--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .md--one-tenth {
    width: 10%;
  }

  .md--three-tenths {
    width: 30%;
  }

  .md--seven-tenths {
    width: 70%;
  }

  .md--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .md--one-twelfth {
    width: 8.333%;
  }

  .md--five-twelfths {
    width: 41.666%;
  }

  .md--seven-twelfths {
    width: 58.333%;
  }

  .md--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
   * Whole
   */
  .lg--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .lg--one-half, .lg--two-quarters, .lg--three-sixths, .lg--four-eighths, .lg--five-tenths, .lg--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .lg--one-third, .lg--two-sixths, .lg--four-twelfths {
    width: 33.333%;
  }

  .lg--two-thirds, .lg--four-sixths, .lg--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .lg--one-quarter, .lg--two-eighths, .lg--three-twelfths {
    width: 25%;
  }

  .lg--three-quarters, .lg--six-eighths, .lg--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .lg--one-fifth, .lg--two-tenths {
    width: 20%;
  }

  .lg--two-fifths, .lg--four-tenths {
    width: 40%;
  }

  .lg--three-fifths, .lg--six-tenths {
    width: 60%;
  }

  .lg--four-fifths, .lg--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .lg--one-sixth, .lg--two-twelfths {
    width: 16.666%;
  }

  .lg--five-sixths, .lg--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .lg--one-eighth {
    width: 12.5%;
  }

  .lg--three-eighths {
    width: 37.5%;
  }

  .lg--five-eighths {
    width: 62.5%;
  }

  .lg--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .lg--one-tenth {
    width: 10%;
  }

  .lg--three-tenths {
    width: 30%;
  }

  .lg--seven-tenths {
    width: 70%;
  }

  .lg--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .lg--one-twelfth {
    width: 8.333%;
  }

  .lg--five-twelfths {
    width: 41.666%;
  }

  .lg--seven-twelfths {
    width: 58.333%;
  }

  .lg--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 1200px) {
  /**
   * Whole
   */
  .xl--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .xl--one-half, .xl--two-quarters, .xl--three-sixths, .xl--four-eighths, .xl--five-tenths, .xl--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .xl--one-third, .xl--two-sixths, .xl--four-twelfths {
    width: 33.333%;
  }

  .xl--two-thirds, .xl--four-sixths, .xl--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .xl--one-quarter, .xl--two-eighths, .xl--three-twelfths {
    width: 25%;
  }

  .xl--three-quarters, .xl--six-eighths, .xl--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .xl--one-fifth, .xl--two-tenths {
    width: 20%;
  }

  .xl--two-fifths, .xl--four-tenths {
    width: 40%;
  }

  .xl--three-fifths, .xl--six-tenths {
    width: 60%;
  }

  .xl--four-fifths, .xl--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .xl--one-sixth, .xl--two-twelfths {
    width: 16.666%;
  }

  .xl--five-sixths, .xl--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .xl--one-eighth {
    width: 12.5%;
  }

  .xl--three-eighths {
    width: 37.5%;
  }

  .xl--five-eighths {
    width: 62.5%;
  }

  .xl--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .xl--one-tenth {
    width: 10%;
  }

  .xl--three-tenths {
    width: 30%;
  }

  .xl--seven-tenths {
    width: 70%;
  }

  .xl--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .xl--one-twelfth {
    width: 8.333%;
  }

  .xl--five-twelfths {
    width: 41.666%;
  }

  .xl--seven-twelfths {
    width: 58.333%;
  }

  .xl--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 1535px) {
  /**
   * Whole
   */
  .xxl--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .xxl--one-half, .xxl--two-quarters, .xxl--three-sixths, .xxl--four-eighths, .xxl--five-tenths, .xxl--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .xxl--one-third, .xxl--two-sixths, .xxl--four-twelfths {
    width: 33.333%;
  }

  .xxl--two-thirds, .xxl--four-sixths, .xxl--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .xxl--one-quarter, .xxl--two-eighths, .xxl--three-twelfths {
    width: 25%;
  }

  .xxl--three-quarters, .xxl--six-eighths, .xxl--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .xxl--one-fifth, .xxl--two-tenths {
    width: 20%;
  }

  .xxl--two-fifths, .xxl--four-tenths {
    width: 40%;
  }

  .xxl--three-fifths, .xxl--six-tenths {
    width: 60%;
  }

  .xxl--four-fifths, .xxl--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .xxl--one-sixth, .xxl--two-twelfths {
    width: 16.666%;
  }

  .xxl--five-sixths, .xxl--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .xxl--one-eighth {
    width: 12.5%;
  }

  .xxl--three-eighths {
    width: 37.5%;
  }

  .xxl--five-eighths {
    width: 62.5%;
  }

  .xxl--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .xxl--one-tenth {
    width: 10%;
  }

  .xxl--three-tenths {
    width: 30%;
  }

  .xxl--seven-tenths {
    width: 70%;
  }

  .xxl--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .xxl--one-twelfth {
    width: 8.333%;
  }

  .xxl--five-twelfths {
    width: 41.666%;
  }

  .xxl--seven-twelfths {
    width: 58.333%;
  }

  .xxl--eleven-twelfths {
    width: 91.666%;
  }
}
/*------------------------------------*\
    $PUSH
\*------------------------------------*/
/**
 * Push classes, to move grid items over to the right by certain amounts.
 */
/**
 * Not a particularly great selector, but the DRYest way to do things.
 */
[class*="push--"] {
  position: relative;
}

/**
 * Whole
 */
.push--one-whole {
  left: 100%;
}

/**
 * Halves
 */
.push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths {
  left: 50%;
}

/**
 * Thirds
 */
.push--one-third, .push--two-sixths, .push--four-twelfths {
  left: 33.333%;
}

.push--two-thirds, .push--four-sixths, .push--eight-twelfths {
  left: 66.666%;
}

/**
 * Quarters
 */
.push--one-quarter, .push--two-eighths, .push--three-twelfths {
  left: 25%;
}

.push--three-quarters, .push--six-eighths, .push--nine-twelfths {
  left: 75%;
}

/**
 * Fifths
 */
.push--one-fifth, .push--two-tenths {
  left: 20%;
}

.push--two-fifths, .push--four-tenths {
  left: 40%;
}

.push--three-fifths, .push--six-tenths {
  left: 60%;
}

.push--four-fifths, .push--eight-tenths {
  left: 80%;
}

/**
 * Sixths
 */
.push--one-sixth, .push--two-twelfths {
  left: 16.666%;
}

.push--five-sixths, .push--ten-twelfths {
  left: 83.333%;
}

/**
 * Eighths
 */
.push--one-eighth {
  left: 12.5%;
}

.push--three-eighths {
  left: 37.5%;
}

.push--five-eighths {
  left: 62.5%;
}

.push--seven-eighths {
  left: 87.5%;
}

/**
 * Tenths
 */
.push--one-tenth {
  left: 10%;
}

.push--three-tenths {
  left: 30%;
}

.push--seven-tenths {
  left: 70%;
}

.push--nine-tenths {
  left: 90%;
}

/**
 * Twelfths
 */
.push--one-twelfth {
  left: 8.333%;
}

.push--five-twelfths {
  left: 41.666%;
}

.push--seven-twelfths {
  left: 58.333%;
}

.push--eleven-twelfths {
  left: 91.666%;
}

@media only screen and (min-width: 320px) {
  /**
   * Whole
   */
  .push--sm--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--sm--one-half, .push--sm--two-quarters, .push--sm--three-sixths, .push--sm--four-eighths, .push--sm--five-tenths, .push--sm--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--sm--one-third, .push--sm--two-sixths, .push--sm--four-twelfths {
    left: 33.333%;
  }

  .push--sm--two-thirds, .push--sm--four-sixths, .push--sm--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--sm--one-quarter, .push--sm--two-eighths, .push--sm--three-twelfths {
    left: 25%;
  }

  .push--sm--three-quarters, .push--sm--six-eighths, .push--sm--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--sm--one-fifth, .push--sm--two-tenths {
    left: 20%;
  }

  .push--sm--two-fifths, .push--sm--four-tenths {
    left: 40%;
  }

  .push--sm--three-fifths, .push--sm--six-tenths {
    left: 60%;
  }

  .push--sm--four-fifths, .push--sm--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--sm--one-sixth, .push--sm--two-twelfths {
    left: 16.666%;
  }

  .push--sm--five-sixths, .push--sm--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--sm--one-eighth {
    left: 12.5%;
  }

  .push--sm--three-eighths {
    left: 37.5%;
  }

  .push--sm--five-eighths {
    left: 62.5%;
  }

  .push--sm--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--sm--one-tenth {
    left: 10%;
  }

  .push--sm--three-tenths {
    left: 30%;
  }

  .push--sm--seven-tenths {
    left: 70%;
  }

  .push--sm--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--sm--one-twelfth {
    left: 8.333%;
  }

  .push--sm--five-twelfths {
    left: 41.666%;
  }

  .push--sm--seven-twelfths {
    left: 58.333%;
  }

  .push--sm--eleven-twelfths {
    left: 91.666%;
  }
}
@media only screen and (min-width: 768px) {
  /**
   * Whole
   */
  .push--md--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--md--one-half, .push--md--two-quarters, .push--md--three-sixths, .push--md--four-eighths, .push--md--five-tenths, .push--md--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--md--one-third, .push--md--two-sixths, .push--md--four-twelfths {
    left: 33.333%;
  }

  .push--md--two-thirds, .push--md--four-sixths, .push--md--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--md--one-quarter, .push--md--two-eighths, .push--md--three-twelfths {
    left: 25%;
  }

  .push--md--three-quarters, .push--md--six-eighths, .push--md--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--md--one-fifth, .push--md--two-tenths {
    left: 20%;
  }

  .push--md--two-fifths, .push--md--four-tenths {
    left: 40%;
  }

  .push--md--three-fifths, .push--md--six-tenths {
    left: 60%;
  }

  .push--md--four-fifths, .push--md--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--md--one-sixth, .push--md--two-twelfths {
    left: 16.666%;
  }

  .push--md--five-sixths, .push--md--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--md--one-eighth {
    left: 12.5%;
  }

  .push--md--three-eighths {
    left: 37.5%;
  }

  .push--md--five-eighths {
    left: 62.5%;
  }

  .push--md--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--md--one-tenth {
    left: 10%;
  }

  .push--md--three-tenths {
    left: 30%;
  }

  .push--md--seven-tenths {
    left: 70%;
  }

  .push--md--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--md--one-twelfth {
    left: 8.333%;
  }

  .push--md--five-twelfths {
    left: 41.666%;
  }

  .push--md--seven-twelfths {
    left: 58.333%;
  }

  .push--md--eleven-twelfths {
    left: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
   * Whole
   */
  .push--lg--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--lg--one-half, .push--lg--two-quarters, .push--lg--three-sixths, .push--lg--four-eighths, .push--lg--five-tenths, .push--lg--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--lg--one-third, .push--lg--two-sixths, .push--lg--four-twelfths {
    left: 33.333%;
  }

  .push--lg--two-thirds, .push--lg--four-sixths, .push--lg--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--lg--one-quarter, .push--lg--two-eighths, .push--lg--three-twelfths {
    left: 25%;
  }

  .push--lg--three-quarters, .push--lg--six-eighths, .push--lg--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--lg--one-fifth, .push--lg--two-tenths {
    left: 20%;
  }

  .push--lg--two-fifths, .push--lg--four-tenths {
    left: 40%;
  }

  .push--lg--three-fifths, .push--lg--six-tenths {
    left: 60%;
  }

  .push--lg--four-fifths, .push--lg--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--lg--one-sixth, .push--lg--two-twelfths {
    left: 16.666%;
  }

  .push--lg--five-sixths, .push--lg--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--lg--one-eighth {
    left: 12.5%;
  }

  .push--lg--three-eighths {
    left: 37.5%;
  }

  .push--lg--five-eighths {
    left: 62.5%;
  }

  .push--lg--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--lg--one-tenth {
    left: 10%;
  }

  .push--lg--three-tenths {
    left: 30%;
  }

  .push--lg--seven-tenths {
    left: 70%;
  }

  .push--lg--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--lg--one-twelfth {
    left: 8.333%;
  }

  .push--lg--five-twelfths {
    left: 41.666%;
  }

  .push--lg--seven-twelfths {
    left: 58.333%;
  }

  .push--lg--eleven-twelfths {
    left: 91.666%;
  }
}
@media only screen and (min-width: 1200px) {
  /**
   * Whole
   */
  .push--xl--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--xl--one-half, .push--xl--two-quarters, .push--xl--three-sixths, .push--xl--four-eighths, .push--xl--five-tenths, .push--xl--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--xl--one-third, .push--xl--two-sixths, .push--xl--four-twelfths {
    left: 33.333%;
  }

  .push--xl--two-thirds, .push--xl--four-sixths, .push--xl--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--xl--one-quarter, .push--xl--two-eighths, .push--xl--three-twelfths {
    left: 25%;
  }

  .push--xl--three-quarters, .push--xl--six-eighths, .push--xl--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--xl--one-fifth, .push--xl--two-tenths {
    left: 20%;
  }

  .push--xl--two-fifths, .push--xl--four-tenths {
    left: 40%;
  }

  .push--xl--three-fifths, .push--xl--six-tenths {
    left: 60%;
  }

  .push--xl--four-fifths, .push--xl--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--xl--one-sixth, .push--xl--two-twelfths {
    left: 16.666%;
  }

  .push--xl--five-sixths, .push--xl--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--xl--one-eighth {
    left: 12.5%;
  }

  .push--xl--three-eighths {
    left: 37.5%;
  }

  .push--xl--five-eighths {
    left: 62.5%;
  }

  .push--xl--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--xl--one-tenth {
    left: 10%;
  }

  .push--xl--three-tenths {
    left: 30%;
  }

  .push--xl--seven-tenths {
    left: 70%;
  }

  .push--xl--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--xl--one-twelfth {
    left: 8.333%;
  }

  .push--xl--five-twelfths {
    left: 41.666%;
  }

  .push--xl--seven-twelfths {
    left: 58.333%;
  }

  .push--xl--eleven-twelfths {
    left: 91.666%;
  }
}
@media only screen and (min-width: 1535px) {
  /**
   * Whole
   */
  .push--xxl--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--xxl--one-half, .push--xxl--two-quarters, .push--xxl--three-sixths, .push--xxl--four-eighths, .push--xxl--five-tenths, .push--xxl--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--xxl--one-third, .push--xxl--two-sixths, .push--xxl--four-twelfths {
    left: 33.333%;
  }

  .push--xxl--two-thirds, .push--xxl--four-sixths, .push--xxl--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--xxl--one-quarter, .push--xxl--two-eighths, .push--xxl--three-twelfths {
    left: 25%;
  }

  .push--xxl--three-quarters, .push--xxl--six-eighths, .push--xxl--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--xxl--one-fifth, .push--xxl--two-tenths {
    left: 20%;
  }

  .push--xxl--two-fifths, .push--xxl--four-tenths {
    left: 40%;
  }

  .push--xxl--three-fifths, .push--xxl--six-tenths {
    left: 60%;
  }

  .push--xxl--four-fifths, .push--xxl--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--xxl--one-sixth, .push--xxl--two-twelfths {
    left: 16.666%;
  }

  .push--xxl--five-sixths, .push--xxl--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--xxl--one-eighth {
    left: 12.5%;
  }

  .push--xxl--three-eighths {
    left: 37.5%;
  }

  .push--xxl--five-eighths {
    left: 62.5%;
  }

  .push--xxl--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--xxl--one-tenth {
    left: 10%;
  }

  .push--xxl--three-tenths {
    left: 30%;
  }

  .push--xxl--seven-tenths {
    left: 70%;
  }

  .push--xxl--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--xxl--one-twelfth {
    left: 8.333%;
  }

  .push--xxl--five-twelfths {
    left: 41.666%;
  }

  .push--xxl--seven-twelfths {
    left: 58.333%;
  }

  .push--xxl--eleven-twelfths {
    left: 91.666%;
  }
}
/*------------------------------------*\
    $PULL
\*------------------------------------*/
/**
 * Pull classes, to move grid items back to the left by certain amounts.
 */
/**
 * Not a particularly great selector, but the DRYest way to do things.
 */
[class*="pull--"] {
  position: relative;
}

/**
 * Whole
 */
.pull--one-whole {
  right: 100%;
}

/**
 * Halves
 */
.pull--one-half, .pull--two-quarters, .pull--three-sixths, .pull--four-eighths, .pull--five-tenths, .pull--six-twelfths {
  right: 50%;
}

/**
 * Thirds
 */
.pull--one-third, .pull--two-sixths, .pull--four-twelfths {
  right: 33.333%;
}

.pull--two-thirds, .pull--four-sixths, .pull--eight-twelfths {
  right: 66.666%;
}

/**
 * Quarters
 */
.pull--one-quarter, .pull--two-eighths, .pull--three-twelfths {
  right: 25%;
}

.pull--three-quarters, .pull--six-eighths, .pull--nine-twelfths {
  right: 75%;
}

/**
 * Fifths
 */
.pull--one-fifth, .pull--two-tenths {
  right: 20%;
}

.pull--two-fifths, .pull--four-tenths {
  right: 40%;
}

.pull--three-fifths, .pull--six-tenths {
  right: 60%;
}

.pull--four-fifths, .pull--eight-tenths {
  right: 80%;
}

/**
 * Sixths
 */
.pull--one-sixth, .pull--two-twelfths {
  right: 16.666%;
}

.pull--five-sixths, .pull--ten-twelfths {
  right: 83.333%;
}

/**
 * Eighths
 */
.pull--one-eighth {
  right: 12.5%;
}

.pull--three-eighths {
  right: 37.5%;
}

.pull--five-eighths {
  right: 62.5%;
}

.pull--seven-eighths {
  right: 87.5%;
}

/**
 * Tenths
 */
.pull--one-tenth {
  right: 10%;
}

.pull--three-tenths {
  right: 30%;
}

.pull--seven-tenths {
  right: 70%;
}

.pull--nine-tenths {
  right: 90%;
}

/**
 * Twelfths
 */
.pull--one-twelfth {
  right: 8.333%;
}

.pull--five-twelfths {
  right: 41.666%;
}

.pull--seven-twelfths {
  right: 58.333%;
}

.pull--eleven-twelfths {
  right: 91.666%;
}

@media only screen and (min-width: 320px) {
  /**
   * Whole
   */
  .pull--sm--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--sm--one-half, .pull--sm--two-quarters, .pull--sm--three-sixths, .pull--sm--four-eighths, .pull--sm--five-tenths, .pull--sm--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--sm--one-third, .pull--sm--two-sixths, .pull--sm--four-twelfths {
    right: 33.333%;
  }

  .pull--sm--two-thirds, .pull--sm--four-sixths, .pull--sm--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--sm--one-quarter, .pull--sm--two-eighths, .pull--sm--three-twelfths {
    right: 25%;
  }

  .pull--sm--three-quarters, .pull--sm--six-eighths, .pull--sm--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--sm--one-fifth, .pull--sm--two-tenths {
    right: 20%;
  }

  .pull--sm--two-fifths, .pull--sm--four-tenths {
    right: 40%;
  }

  .pull--sm--three-fifths, .pull--sm--six-tenths {
    right: 60%;
  }

  .pull--sm--four-fifths, .pull--sm--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--sm--one-sixth, .pull--sm--two-twelfths {
    right: 16.666%;
  }

  .pull--sm--five-sixths, .pull--sm--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--sm--one-eighth {
    right: 12.5%;
  }

  .pull--sm--three-eighths {
    right: 37.5%;
  }

  .pull--sm--five-eighths {
    right: 62.5%;
  }

  .pull--sm--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--sm--one-tenth {
    right: 10%;
  }

  .pull--sm--three-tenths {
    right: 30%;
  }

  .pull--sm--seven-tenths {
    right: 70%;
  }

  .pull--sm--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--sm--one-twelfth {
    right: 8.333%;
  }

  .pull--sm--five-twelfths {
    right: 41.666%;
  }

  .pull--sm--seven-twelfths {
    right: 58.333%;
  }

  .pull--sm--eleven-twelfths {
    right: 91.666%;
  }
}
@media only screen and (min-width: 768px) {
  /**
   * Whole
   */
  .pull--md--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--md--one-half, .pull--md--two-quarters, .pull--md--three-sixths, .pull--md--four-eighths, .pull--md--five-tenths, .pull--md--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--md--one-third, .pull--md--two-sixths, .pull--md--four-twelfths {
    right: 33.333%;
  }

  .pull--md--two-thirds, .pull--md--four-sixths, .pull--md--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--md--one-quarter, .pull--md--two-eighths, .pull--md--three-twelfths {
    right: 25%;
  }

  .pull--md--three-quarters, .pull--md--six-eighths, .pull--md--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--md--one-fifth, .pull--md--two-tenths {
    right: 20%;
  }

  .pull--md--two-fifths, .pull--md--four-tenths {
    right: 40%;
  }

  .pull--md--three-fifths, .pull--md--six-tenths {
    right: 60%;
  }

  .pull--md--four-fifths, .pull--md--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--md--one-sixth, .pull--md--two-twelfths {
    right: 16.666%;
  }

  .pull--md--five-sixths, .pull--md--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--md--one-eighth {
    right: 12.5%;
  }

  .pull--md--three-eighths {
    right: 37.5%;
  }

  .pull--md--five-eighths {
    right: 62.5%;
  }

  .pull--md--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--md--one-tenth {
    right: 10%;
  }

  .pull--md--three-tenths {
    right: 30%;
  }

  .pull--md--seven-tenths {
    right: 70%;
  }

  .pull--md--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--md--one-twelfth {
    right: 8.333%;
  }

  .pull--md--five-twelfths {
    right: 41.666%;
  }

  .pull--md--seven-twelfths {
    right: 58.333%;
  }

  .pull--md--eleven-twelfths {
    right: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
   * Whole
   */
  .pull--lg--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--lg--one-half, .pull--lg--two-quarters, .pull--lg--three-sixths, .pull--lg--four-eighths, .pull--lg--five-tenths, .pull--lg--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--lg--one-third, .pull--lg--two-sixths, .pull--lg--four-twelfths {
    right: 33.333%;
  }

  .pull--lg--two-thirds, .pull--lg--four-sixths, .pull--lg--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--lg--one-quarter, .pull--lg--two-eighths, .pull--lg--three-twelfths {
    right: 25%;
  }

  .pull--lg--three-quarters, .pull--lg--six-eighths, .pull--lg--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--lg--one-fifth, .pull--lg--two-tenths {
    right: 20%;
  }

  .pull--lg--two-fifths, .pull--lg--four-tenths {
    right: 40%;
  }

  .pull--lg--three-fifths, .pull--lg--six-tenths {
    right: 60%;
  }

  .pull--lg--four-fifths, .pull--lg--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--lg--one-sixth, .pull--lg--two-twelfths {
    right: 16.666%;
  }

  .pull--lg--five-sixths, .pull--lg--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--lg--one-eighth {
    right: 12.5%;
  }

  .pull--lg--three-eighths {
    right: 37.5%;
  }

  .pull--lg--five-eighths {
    right: 62.5%;
  }

  .pull--lg--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--lg--one-tenth {
    right: 10%;
  }

  .pull--lg--three-tenths {
    right: 30%;
  }

  .pull--lg--seven-tenths {
    right: 70%;
  }

  .pull--lg--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--lg--one-twelfth {
    right: 8.333%;
  }

  .pull--lg--five-twelfths {
    right: 41.666%;
  }

  .pull--lg--seven-twelfths {
    right: 58.333%;
  }

  .pull--lg--eleven-twelfths {
    right: 91.666%;
  }
}
@media only screen and (min-width: 1200px) {
  /**
   * Whole
   */
  .pull--xl--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--xl--one-half, .pull--xl--two-quarters, .pull--xl--three-sixths, .pull--xl--four-eighths, .pull--xl--five-tenths, .pull--xl--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--xl--one-third, .pull--xl--two-sixths, .pull--xl--four-twelfths {
    right: 33.333%;
  }

  .pull--xl--two-thirds, .pull--xl--four-sixths, .pull--xl--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--xl--one-quarter, .pull--xl--two-eighths, .pull--xl--three-twelfths {
    right: 25%;
  }

  .pull--xl--three-quarters, .pull--xl--six-eighths, .pull--xl--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--xl--one-fifth, .pull--xl--two-tenths {
    right: 20%;
  }

  .pull--xl--two-fifths, .pull--xl--four-tenths {
    right: 40%;
  }

  .pull--xl--three-fifths, .pull--xl--six-tenths {
    right: 60%;
  }

  .pull--xl--four-fifths, .pull--xl--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--xl--one-sixth, .pull--xl--two-twelfths {
    right: 16.666%;
  }

  .pull--xl--five-sixths, .pull--xl--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--xl--one-eighth {
    right: 12.5%;
  }

  .pull--xl--three-eighths {
    right: 37.5%;
  }

  .pull--xl--five-eighths {
    right: 62.5%;
  }

  .pull--xl--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--xl--one-tenth {
    right: 10%;
  }

  .pull--xl--three-tenths {
    right: 30%;
  }

  .pull--xl--seven-tenths {
    right: 70%;
  }

  .pull--xl--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--xl--one-twelfth {
    right: 8.333%;
  }

  .pull--xl--five-twelfths {
    right: 41.666%;
  }

  .pull--xl--seven-twelfths {
    right: 58.333%;
  }

  .pull--xl--eleven-twelfths {
    right: 91.666%;
  }
}
@media only screen and (min-width: 1535px) {
  /**
   * Whole
   */
  .pull--xxl--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--xxl--one-half, .pull--xxl--two-quarters, .pull--xxl--three-sixths, .pull--xxl--four-eighths, .pull--xxl--five-tenths, .pull--xxl--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--xxl--one-third, .pull--xxl--two-sixths, .pull--xxl--four-twelfths {
    right: 33.333%;
  }

  .pull--xxl--two-thirds, .pull--xxl--four-sixths, .pull--xxl--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--xxl--one-quarter, .pull--xxl--two-eighths, .pull--xxl--three-twelfths {
    right: 25%;
  }

  .pull--xxl--three-quarters, .pull--xxl--six-eighths, .pull--xxl--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--xxl--one-fifth, .pull--xxl--two-tenths {
    right: 20%;
  }

  .pull--xxl--two-fifths, .pull--xxl--four-tenths {
    right: 40%;
  }

  .pull--xxl--three-fifths, .pull--xxl--six-tenths {
    right: 60%;
  }

  .pull--xxl--four-fifths, .pull--xxl--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--xxl--one-sixth, .pull--xxl--two-twelfths {
    right: 16.666%;
  }

  .pull--xxl--five-sixths, .pull--xxl--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--xxl--one-eighth {
    right: 12.5%;
  }

  .pull--xxl--three-eighths {
    right: 37.5%;
  }

  .pull--xxl--five-eighths {
    right: 62.5%;
  }

  .pull--xxl--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--xxl--one-tenth {
    right: 10%;
  }

  .pull--xxl--three-tenths {
    right: 30%;
  }

  .pull--xxl--seven-tenths {
    right: 70%;
  }

  .pull--xxl--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--xxl--one-twelfth {
    right: 8.333%;
  }

  .pull--xxl--five-twelfths {
    right: 41.666%;
  }

  .pull--xxl--seven-twelfths {
    right: 58.333%;
  }

  .pull--xxl--eleven-twelfths {
    right: 91.666%;
  }
}
/*------------------------------------*\
    #MEDIA QUERIES MIXINS
\*------------------------------------*/
/*------------------------------------*\
    #CHILID MIXINS
\*------------------------------------*/
/*------------------------------------*\
    #STYLE MIXINS
\*------------------------------------*/
/*------------------------------------*\
    #GRID MIXINS
\*------------------------------------*/
/**
* It allows to hide grid elements if they aren't necessary in given viewport
* usage: add class palm-hide, lap-hide...
*/
@media only screen and (min-width: 320px) {
  .sm--hide {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .md--hide {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .lg--hide {
    display: none;
  }
}
@media only screen and (min-width: 1200px) {
  .xl--hide {
    display: none;
  }
}
@media only screen and (min-width: 1535px) {
  .xxl--hide {
    display: none;
  }
}
@media only screen and (min-width: 320px) {
  .sm--show {
    display: inline-block;
  }
}
@media only screen and (min-width: 768px) {
  .md--show {
    display: inline-block;
  }
}
@media only screen and (min-width: 1024px) {
  .lg--show {
    display: inline-block;
  }
}
@media only screen and (min-width: 1200px) {
  .xl--show {
    display: inline-block;
  }
}
@media only screen and (min-width: 1535px) {
  .xxl--show {
    display: inline-block;
  }
}
/*------------------------------------*\
    #GLBOAL STYLES
\*------------------------------------*/
body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  letter-spacing: 1px;
  font-size: 14px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
@media screen and (min-width: 1024px) {
  body {
    font-size: 16px;
  }
}

a {
  color: #000;
  text-decoration: none;
}
a:hover, a:visited, a:active {
  color: #000;
}

p {
  text-align: center;
  line-height: 1.5;
  letter-spacing: 1px;
}

h1 {
  font-family: "EB Garamond", Garamond, Arial, serif;
  letter-spacing: 5px;
}

.pi-single-nav .title p,
.related-post-item .post-title p,
.h2,
h2 {
  font-family: "EB Garamond", Garamond, Arial, serif;
  font-weight: 100 !important;
  font-style: normal !important;
  text-transform: uppercase;
}

.pi-single-nav .title p,
.related-post-item .post-title p a,
.h2 a,
h2 a {
  text-shadow: none !important;
}

.pi-related-posts-title,
div.tag-share div.tag-box p,
.h4,
h4 {
  font-family: "Lato", sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
@media screen and (min-width: 1024px) {
  .pi-related-posts-title,
  div.tag-share div.tag-box p,
  .h4,
  h4 {
    font-size: 16px;
  }
}

.blog-content .post .post-entry ol > li {
  font-weight: 300;
}

.btn-primary {
  display: inline-block;
  padding: 15px 20px 10px;
  margin: 20px 10px;
  border: 1px solid #000;
  font-family: "BebasBold";
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
}
@media screen and (min-width: 1535px) {
  .btn-primary {
    font-size: 16px;
  }
}

.btn-primary--black {
  border: 1px solid #000;
  background-color: #000;
  color: #fff;
  text-align: center;
}
.btn-primary--black:hover, .btn-primary--black:visited, .btn-primary--black:active {
  color: #fff;
}
.btn-primary--black:hover {
  background-color: transparent;
  color: #000;
}

.btn-primary--black-transparent {
  border: 1px solid #000;
  background-color: transparent;
  color: black;
  text-align: center;
}
.btn-primary--black-transparent:visited, .btn-primary--black-transparent:active {
  color: #000;
  background-color: #fff;
}
.btn-primary--black-transparent:hover {
  background-color: #000;
  color: #fff;
}

/*------------------------------------*\
    #FONTS
\*------------------------------------*/
@font-face {
  font-family: 'BebasBold';
  src: url("../fonts/bebas/BebasNeueBold.otf");
}
@font-face {
  font-family: 'BebasRegular';
  src: url("../fonts/bebas/BebasNeueRegular.woff");
}
@font-face {
  font-family: 'BebasLight';
  src: url("../fonts/bebas/BebasNeueLight.otf");
}
@font-face {
  font-family: 'BebasThin';
  src: url("../fonts/bebas/BebasNeueThin.otf");
}
.header {
  height: 85px;
}
.header .header-inner {
  border-bottom: 0px;
}
.header .logo {
  left: 30px;
}
@media screen and (min-width: 768px) {
  .header .logo {
    left: 15px;
  }
}
.header .logo img {
  position: relative;
  top: 0;
  max-height: 68px;
}
@media screen and (min-width: 1200px) {
  .header .logo img {
    top: 10px;
  }
}
.header .header-fixed .container {
  height: 80px;
  top: -15px;
  margin-bottom: -25px;
}
@media screen and (min-width: 1200px) {
  .header .header-fixed .container {
    margin-bottom: 0;
    top: -10px;
  }
}
.header.header-responsive .logo img {
  max-height: 30px;
}
@media screen and (min-width: 641px) {
  .header.header-responsive .logo img {
    max-height: 35px;
  }
}
@media screen and (min-width: 992px) {
  .header.header-responsive .logo img {
    max-height: 40px;
  }
}

.navlist {
  top: 23px;
}
.navlist li {
  margin-right: 5px;
  margin-left: 0px;
}
.navlist li a {
  display: block;
  position: relative;
  padding: 10px 15px;
  color: #000;
  line-height: 10px;
  letter-spacing: 1px;
  z-index: 1;
}
.navlist li a:before {
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  content: "";
  background-color: transparent;
  width: 0;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 41px;
  bottom: 5px;
  left: 50%;
}
@media screen and (min-width: 1200px) {
  .navlist li a:before {
    top: 0px;
  }
}
.navlist li.current-menu-parent > a, .navlist li.current-menu-item > a {
  color: #000;
}
.navlist li:hover > a {
  color: #000;
}
@media screen and (min-width: 1200px) {
  .navlist li:hover > a {
    color: #fff;
  }
}
.navlist li:hover > a:before {
  content: "";
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 41px;
  bottom: 5px;
  left: 0;
  right: 0;
}
@media screen and (min-width: 1200px) {
  .navlist li:hover > a:before {
    top: 0;
  }
}
.navlist li.menu-item-has-children.item-plus > a:after {
  content: "";
}
.navlist li .sub-menu {
  left: 0;
  width: 100%;
  padding-bottom: 3px;
}
.navlist li .sub-menu a:before {
  top: 39px;
}
.navlist li .sub-menu.current-menu-parent > a, .navlist li .sub-menu.current-menu-item > a {
  color: #000;
}
.navlist li .sub-menu :hover > a {
  color: #000;
}
.navlist li .sub-menu :hover > a:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: 39px;
  bottom: 5px;
  left: 0;
  right: 0;
}
@media screen and (min-width: 1200px) {
  .navlist li .sub-menu :hover > a:before {
    top: 39px;
  }
}
.navlist li .sub-menu li:last-child > a {
  border-bottom: 1px solid #f3f3f3;
}
.navlist .megamenu > .sub-menu li {
  width: 25%;
}
.navlist .megamenu > .sub-menu li .sub-menu li:hover a:before {
  top: 0;
  left: 55%;
  background-color: transparent;
}
.navlist .megamenu > .sub-menu li .sub-menu li a:before {
  top: 0;
  left: 50%;
  background-color: transparent;
}
.navlist .menu-category-7 .sub-menu {
  width: 250px;
  left: -80px;
}
.navlist.off-canvas .submenu-toggle {
  z-index: 9999;
  height: 41px;
}
.navlist.off-canvas .sub-menu a:before {
  top: 39px;
}
@media screen and (min-width: 1200px) {
  .navlist.off-canvas .sub-menu a:before {
    top: 0;
  }
}
.navlist.off-canvas li .sub-menu.sub-menu-active {
  z-index: 99999;
}
.navlist.off-canvas li.megamenu .sub-menu {
  padding: 0;
}
@media screen and (min-width: 1200px) {
  .navlist.off-canvas li.megamenu .sub-menu {
    padding: 0 15px;
  }
}
.navlist.off-canvas li.megamenu .sub-menu li.back-mb a {
  padding: 0 30px;
  line-height: 40px;
}
@media screen and (min-width: 1200px) {
  .navlist.off-canvas li.megamenu .sub-menu li.back-mb a {
    padding: 0 15px;
  }
}
.navlist.off-canvas li.megamenu .sub-menu li a {
  padding: 0 15px;
}
.navlist.off-canvas li.megamenu .sub-menu .sub-menu li a {
  margin-left: 15px;
}
.navlist.off-canvas li.megamenu .sub-menu .menu-item .submenu-toggle {
  display: none;
}

.blog-heading:after {
  background-color: #000;
  opacity: 0.2;
}

.featured-slider .item-content h2 a {
  letter-spacing: 1px;
  text-transform: none;
  font-style: italic;
  font-size: 22px;
  line-height: 24px;
}
@media screen and (min-width: 641px) {
  .featured-slider .item-content h2 a {
    font-size: 36px;
  }
}
@media screen and (min-width: 992px) {
  .featured-slider .item-content h2 a {
    font-size: 48px;
    line-height: 58px;
  }
}
.featured-slider .item-content h2 a:hover {
  opacity: inherit;
}
.featured-slider .item-content .cat ul li a {
  letter-spacing: 1.5px;
  padding: 3px 6px;
  font-size: 6px;
}
@media screen and (min-width: 768px) {
  .featured-slider .item-content .cat ul li a {
    font-size: 8px;
    padding: 4px 8px;
  }
}
@media screen and (min-width: 1024px) {
  .featured-slider .item-content .cat ul li a {
    font-size: 10px;
    padding: 5px 10px;
  }
}
.featured-slider .item-content .date {
  font-family: "EB Garamond", Garamond, Arial, serif;
  font-weight: 100;
  text-shadow: none;
}
.featured-slider .owl-controls .owl-buttons > div:hover {
  background-color: #333333;
}
.featured-slider .owl-controls .owl-buttons > div .navslider-img {
  display: none;
}
@media screen and (min-width: 1024px) {
  .featured-slider .owl-controls .owl-buttons > div .navslider-img {
    display: block;
  }
}
.featured-slider .overlay-slider {
  opacity: 0.2;
}

.search-section {
  background: #000;
}
.search-section h2 {
  color: #fff;
}
.search-section p {
  color: #fff;
  text-align: left;
}
.search-section .tb {
  padding: 10px 0 20px;
}
@media screen and (min-width: 641px) {
  .search-section .tb {
    padding-top: 20px;
  }
}
.search-section .tb .tb-cell p {
  position: relative;
  top: 10px;
  letter-spacing: 1px;
  left: 0%;
  font-size: 18px;
  font-family: "BebasBold";
  font-weight: 100 !important;
  font-style: normal !important;
  text-transform: uppercase;
}
@media screen and (min-width: 641px) {
  .search-section .tb .tb-cell p {
    font-size: 20px;
  }
}
@media screen and (min-width: 1024px) {
  .search-section .tb .tb-cell p {
    left: 0;
  }
}
.search-section .tb .tb-cell .search-box .form-actions {
  right: 10%;
}
.search-section .tb .tb-cell .search-box .form-actions input {
  font-family: "Lato", sans-serif;
  background: url("../img/find_icon.svg") no-repeat center, #ff5a5f;
  -webkit-background-size: 100% 100%;
          background-size: 100%;
  color: transparent;
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  height: 36px;
  line-height: 16px;
  padding: 0px;
}
@media screen and (min-width: 641px) {
  .search-section .tb .tb-cell .search-box .form-actions input {
    background: none;
    background-color: #ff5a5f;
    color: #fff;
    font-size: 16px;
    padding: 0 22px;
  }
}
.search-section .tb .tb-cell .search-box .form-actions input:hover {
  background-color: #c03237;
}
.search-section .tb .tb-cell .search-box .form-item input {
  padding-right: 50px;
  font-family: "Lato", sans-serif;
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 1px;
  line-height: 24px;
  height: 36px;
  width: 70%;
  padding-right: 30px;
  padding-left: 10px;
}
@media screen and (min-width: 641px) {
  .search-section .tb .tb-cell .search-box .form-item input {
    padding-right: 45px;
    font-size: 11px;
  }
}
@media screen and (min-width: 992px) {
  .search-section .tb .tb-cell .search-box .form-item input {
    padding-right: 20px;
    padding-left: 15px;
    font-size: 12px;
  }
}

.widget h4 {
  font-family: "BebasBold";
  font-size: 20px;
}

.sidebar .widget_about {
  padding-bottom: 50px;
}
@media screen and (min-width: 641px) {
  .sidebar .widget_about {
    padding-bottom: 15px;
  }
}

.widget_about .author-thumb {
  cursor: pointer;
  height: auto;
  width: auto;
  margin-top: 55px;
  margin-bottom: -35px;
}
.widget_about .author-thumb .image-cover {
  border-radius: 0px;
}
.widget_about .author-thumb .image-cover:after {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
}
.widget_about:hover .btn-primary {
  opacity: 1;
}
.widget_about:hover .image-cover:after {
  opacity: 1;
}
.widget_about .author-name {
  position: absolute;
  top: 40px;
  margin-top: 10px;
  font-family: "Lato", sans-serif;
  font-size: 11px;
  line-height: 15px;
  color: #666666;
  text-align: center;
  width: 90%;
  left: 0px;
  margin: 0 5%;
}
@media screen and (min-width: 641px) {
  .widget_about .author-name {
    position: relative;
    width: auto;
    top: -470px;
    margin: 5px 40px -7px;
  }
}
@media screen and (min-width: 992px) {
  .widget_about .author-name {
    top: -245px;
    margin-top: 10px;
  }
}
@media screen and (min-width: 1200px) {
  .widget_about .author-name {
    top: -275px;
    font-size: 12px;
  }
}
.widget_about .btn-primary {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  display: block;
  opacity: 0;
  left: 0px;
  top: 55%;
  padding: 8px 20px 6px;
  margin: 0 30%;
  color: #fff;
  border-color: #fff;
  background: transparent;
  line-height: 20px;
}
@media screen and (min-width: 992px) {
  .widget_about .btn-primary {
    margin: 0 25%;
  }
}
.widget_about .btn-primary:hover {
  color: #fff;
  border-color: #fff;
  background: transparent;
}

.sidebar .widget_follow {
  padding-bottom: 35px;
}

.widget_follow .page-social a {
  margin-right: 8px;
}
.widget_follow .page-social a:hover .page-social__info-box {
  color: #000;
  border-color: #000;
}
.widget_follow .page-social a:hover .page-social__info-box:after {
  color: #000;
}
.widget_follow .page-social a .fa {
  background-color: transparent;
  color: #000;
  font-size: 22px;
  width: 36px;
}
.widget_follow .page-social__info-box {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
  top: 10px;
  font-family: "Lato", sans-serif;
  font-size: 10px;
  border: 1px solid #eeeeee;
  color: #888888;
  padding: 2px 8px 4px;
}
.widget_follow .page-social__info-box:after {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: '►';
  display: block;
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 30px;
  color: #eeeeee;
  text-align: center;
  line-height: 30px;
  font-size: 8px;
  -o-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.widget_follow .page-social__info-box--hidden {
  opacity: 0;
}

.pi_post_has_thumbnail ul li .content-text .date {
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: none;
}

.tagcloud a:hover {
  border-color: #000;
  color: #000;
}

.widget_instagram .instagram li a {
  background-color: #333333;
}

.video-popup__trigger {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}
@media screen and (min-width: 1024px) {
  .video-popup__trigger {
    display: block;
  }
}

#footer {
  background: #000;
}
#footer .widget h4 {
  margin: 0 0 30px;
  font-size: 30px;
  letter-spacing: 2px;
  text-align: center;
}
@media screen and (min-width: 1024px) {
  #footer .widget h4 {
    margin: 0 0 30px;
    font-size: 40px;
  }
}
#footer .widget h4:after {
  content: none;
}
#footer .page-social__info-box {
  display: none;
}

.footer-contact--address {
  display: block;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 1.7;
}

.footer-contact--tel {
  display: block;
  font-family: "BebasBold";
  padding: 20px 0 5px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  top: -10px;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .footer-contact--tel {
    padding: 25px 0 10px;
    font-size: 30px;
  }
}
.footer-contact--tel a {
  color: #fff;
}
.footer-contact--tel a:hover {
  text-decoration: underline;
}

.btn--footer {
  display: block;
  background-color: transparent;
  border-color: #fff;
  color: #fff;
  margin: 0 auto;
  width: 50%;
  text-align: center;
}
.btn--footer:visited, .btn--footer:active {
  color: #fff;
  background-color: transparent;
}
.btn--footer:hover {
  color: #000;
  background-color: #fff;
}

.copyright {
  font-size: 14px;
  font-family: "Lato", sans-serif;
}

#footer .page-social {
  position: relative;
  left: -8px;
}
#footer .page-social a .fa {
  background-color: transparent;
  color: #fff;
  font-size: 36px;
  width: 60px;
}

.blog-content .post .post-title h2 {
  font-family: "EB Garamond", Garamond, Arial, serif;
  text-transform: none;
}
.blog-content .post .post-date {
  font-family: "Lato", sans-serif;
  letter-spacing: 1.5px;
}
.blog-content .post .post-cat ul li a {
  letter-spacing: 0.8px;
  margin-right: 5px;
}
.blog-content .post .post-entry ul > li::before {
  top: 1.2vh;
}

.blog-grid .content .post .post-body {
  padding-bottom: 0px;
}

.post .post-meta:after {
  content: '';
  background-color: #333333 !important;
}
.post .post-media .post-format a:after {
  content: '';
  background-color: #333333 !important;
}

.post-body p {
  line-height: 1.8;
}

.pi-pagination-page .current,
.pi-pagination-page a:hover {
  color: #333333;
  border: 1px solid #333333;
}

.pi-pagination-page > a {
  border: 1px solid transparent;
}

.pi-masonry-single {
  height: auto !important;
}
.pi-masonry-single .post {
  position: relative !important;
  float: none !important;
}

.pi-nav-map {
  overflow: hidden;
}
.pi-nav-map:after {
  display: none;
}
@media screen and (min-width: 1024px) {
  .pi-nav-map:after {
    display: inline-block;
  }
}

.pi-scrollto {
  width: 100%;
}

.pi-map-list-location-mobile.pi-map-group {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  width: 100%;
  -webkit-appearance: none;
}

.post .wp-caption img {
  width: 100% !important;
}

.page-not-found .content h4 {
  font-size: 12px;
}
@media screen and (min-width: 768px) {
  .page-not-found .content h4 {
    font-size: 14px;
  }
}
@media screen and (min-width: 1024px) {
  .page-not-found .content h4 {
    font-size: 16px;
  }
}
.page-not-found .content input {
  font-size: 10px;
}
@media screen and (min-width: 400px) {
  .page-not-found .content input {
    font-size: 13px;
  }
}

.featured-slider .item-content .cat ul .category-advise a {
  background-color: #1abc9c;
  color: #fff;
}
.featured-slider .item-content .cat ul .category-advise a:hover {
  background-color: #fff;
  color: #1abc9c;
}
.featured-slider .item-content .cat ul .category-inspiration a {
  background-color: #0463BD;
  color: #fff;
}
.featured-slider .item-content .cat ul .category-inspiration a:hover {
  background-color: #fff;
  color: #0463BD;
}
.featured-slider .item-content .cat ul .category-reviews a {
  background-color: #af3838;
  color: #fff;
}
.featured-slider .item-content .cat ul .category-reviews a:hover {
  background-color: #fff;
  color: #af3838;
}

.blog-content .post .post-cat ul li a:after {
  content: ' ';
  margin-right: 5px;
}
.blog-content .post .post-cat ul .category-advise a {
  color: #1abc9c;
}
.blog-content .post .post-cat ul .category-inspiration a {
  color: #0463BD;
}
.blog-content .post .post-cat ul .category-reviews a {
  color: #af3838;
}

.category-5 .post .post-meta:after {
  content: '';
  background-color: #af3838 !important;
}
.category-5 .post .post-media .post-format a:after {
  content: '';
  background-color: #af3838 !important;
}

.category-6 .post .post-meta:after {
  content: '';
  background-color: #0463BD !important;
}
.category-6 .post .post-media .post-format a:after {
  content: '';
  background-color: #0463BD !important;
}

.category-7 .post .post-meta:after {
  content: '';
  background-color: #1abc9c !important;
}
.category-7 .post .post-media .post-format a:after {
  content: '';
  background-color: #1abc9c !important;
}

.navlist .menu-category-5.current-menu-parent a:before,
.navlist .menu-category-5.current-menu-item a:before,
.navlist .menu-category-5:hover a:before {
  content: '';
  background-color: #af3838;
}
.navlist .menu-category-6.current-menu-parent a:before,
.navlist .menu-category-6.current-menu-item a:before,
.navlist .menu-category-6:hover a:before {
  content: '';
  background-color: #0463BD;
}
.navlist .menu-category-7.current-menu-parent a:before,
.navlist .menu-category-7.current-menu-item a:before,
.navlist .menu-category-7:hover a:before {
  content: '';
  background-color: #1abc9c;
}

.pi_post_has_thumbnail ul .post-category-7:hover a {
  color: #1abc9c;
}
.pi_post_has_thumbnail ul .post-category-6:hover a {
  color: #0463BD;
}
.pi_post_has_thumbnail ul .post-category-5:hover a {
  color: #af3838;
}

.category-icon {
  display: block;
  position: relative;
  top: -5px;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  background-color: #000;
}
@media screen and (min-width: 400px) {
  .category-icon {
    width: 70px;
    height: 70px;
    top: -10px;
  }
}
@media screen and (min-width: 768px) {
  .category-icon {
    width: 90px;
    height: 90px;
    top: -10px;
  }
}
.category-reportaze-z-podrozy .category-icon {
  background: url("../img/icon-reportaze-white.svg") no-repeat center;
}
.category-porady .category-icon {
  background: url("../img/icon-porady-white.svg") no-repeat center;
}
.category-inspiracje-podroznicze .category-icon {
  background: url("../img/icon-inspiracje-podroznicze-white.svg") no-repeat center;
}

.open-menu,
.close-menu {
  right: 30px;
}
@media screen and (min-width: 768px) {
  .open-menu,
  .close-menu {
    right: 0;
  }
}

svg {
  position: relative;
  top: -25px;
  width: 60px;
  height: 60px;
  cursor: pointer;
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

path {
  fill: none;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  -o-transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
  stroke-width: 40px;
  stroke-linecap: round;
  stroke: #333333;
  stroke-dashoffset: 0px;
}
path#top, path#bottom {
  stroke-dasharray: 240px 950px;
}
path#middle {
  stroke-dasharray: 240px 240px;
}

.toggle-active path#top, .toggle-active path#bottom {
  stroke-dashoffset: -650px;
  stroke-dashoffset: -650px;
}
.toggle-active path#middle {
  stroke-dashoffset: -115px;
  stroke-dasharray: 1px 220px;
}

.blog-content p {
  word-wrap: break-word;
  line-height: 1.8;
  text-align: left;
}
.blog-content strong {
  color: #484848;
}
.blog-content li {
  font-weight: 300;
}
.blog-content .category-porady .post-cat ul li a {
  color: #1abc9c;
  border-color: #1abc9c;
}
.blog-content .category-reportaze-z-podrozy .post-cat ul li a {
  color: #af3838;
  border-color: #af3838;
}
.blog-content .category-inspiracje-podroznicze .post-cat ul li a {
  color: #0463BD;
  border-color: #0463BD;
}
.blog-content .gallery-item {
  cursor: pointer;
}

.blog-standard .post .post-body {
  border: 0px;
}

.single-post h1 {
  letter-spacing: 1px;
}
.single-post .post-entry p,
.single-post .author-content p {
  font-weight: 300;
}

.tag-share {
  border: 0px;
}
.tag-share .share-box .share a:hover,
.tag-share .tag-box a:hover {
  color: #000;
  border-color: #000;
}
.category-porady .tag-share .share-box .share a:hover, .category-porady
.tag-share .tag-box a:hover {
  color: #1abc9c;
  border-color: #1abc9c;
}
.category-reportaze-z-podrozy .tag-share .share-box .share a:hover, .category-reportaze-z-podrozy
.tag-share .tag-box a:hover {
  color: #af3838;
  border-color: #af3838;
}
.category-inspiracje-podroznicze .tag-share .share-box .share a:hover, .category-inspiracje-podroznicze
.tag-share .tag-box a:hover {
  color: #0463BD;
  border-color: #0463BD;
}
.tag-share .share-box .share a:nth-child(n+3) {
  display: none;
}

.about-author .author-social a:hover {
  color: #000;
  border-color: #000;
}
.category-porady + .about-author .author-social a:hover {
  color: #1abc9c;
  border-color: #1abc9c;
}
.category-reportaze-z-podrozy + .about-author .author-social a:hover {
  color: #af3838;
  border-color: #af3838;
}
.category-inspiracje-podroznicze + .about-author .author-social a:hover {
  color: #0463BD;
  border-color: #0463BD;
}

.blog-standard .post .post-meta .post-view:hover,
.blog-standard .post .post-meta .post-like:hover,
.blog-standard .post .post-meta .post-comment:hover {
  color: #000;
  border-color: #000;
}
.blog-standard .category-porady .post-meta .post-view:hover,
.blog-standard .category-porady .post-meta .post-like:hover,
.blog-standard .category-porady .post-meta .post-comment:hover {
  color: #1abc9c;
  border-color: #1abc9c;
}
.blog-standard .category-reportaze-z-podrozy .post-meta .post-view:hover,
.blog-standard .category-reportaze-z-podrozy .post-meta .post-like:hover,
.blog-standard .category-reportaze-z-podrozy .post-meta .post-comment:hover {
  color: #af3838;
  border-color: #af3838;
}
.blog-standard .category-inspiracje-podroznicze .post-meta .post-view:hover,
.blog-standard .category-inspiracje-podroznicze .post-meta .post-like:hover,
.blog-standard .category-inspiracje-podroznicze .post-meta .post-comment:hover {
  color: #0463BD;
  border-color: #0463BD;
}

blockquote,
.blockquote {
  border-color: #000;
}
.category-porady blockquote, .category-porady
.blockquote {
  border-color: #1abc9c;
}
blockquote .category-reportaze-z-podrozy,
.blockquote .category-reportaze-z-podrozy {
  border-color: #af3838;
}
blockquote .category-inspiracje-podroznicze,
.blockquote .category-inspiracje-podroznicze {
  border-color: #0463BD;
}

body .post .post-meta .post-like.is-liked .fa-heart-o {
  color: #000;
}
.category-porady .post .post-meta .post-like.is-liked .fa-heart-o {
  color: #1abc9c;
}
.category-reportaze-z-podrozy .post .post-meta .post-like.is-liked .fa-heart-o {
  color: #af3838;
}
.category-inspiracje-podroznicze .post .post-meta .post-like.is-liked .fa-heart-o {
  color: #0463BD;
}

.pi-single-nav > a h4 {
  font-family: "EB Garamond", Garamond, Arial, serif;
  font-size: 18px;
}
.pi-single-nav > a span {
  font-family: "Lato", sans-serif;
  font-size: 13px;
}
body .pi-single-nav > a:hover h4, body .pi-single-nav > a:hover span {
  color: #000;
}
.category-porady .pi-single-nav > a:hover h4, .category-porady .pi-single-nav > a:hover span {
  color: #1abc9c;
}
.category-reportaze-z-podrozy .pi-single-nav > a:hover h4, .category-reportaze-z-podrozy .pi-single-nav > a:hover span {
  color: #af3838;
}
.category-inspiracje-podroznicze .pi-single-nav > a:hover h4, .category-inspiracje-podroznicze .pi-single-nav > a:hover span {
  color: #0463BD;
}

body .related-post-item .post-body .post-title h2 a:hover {
  color: #000;
}
.category-porady .related-post-item .post-body .post-title h2 a:hover {
  color: #1abc9c;
}
.category-reportaze-z-podrozy .related-post-item .post-body .post-title h2 a:hover {
  color: #af3838;
}
.category-inspiracje-podroznicze .related-post-item .post-body .post-title h2 a:hover {
  color: #0463BD;
}
.related-post-item .post-body .post-date {
  font-family: "Lato", sans-serif;
  letter-spacing: 1.5px;
}

.fb_iframe_widget > span {
  max-width: 100%;
}

.comment-respond {
  display: none;
}

.popup-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.popup-container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 75%;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
}
.popup-container iframe {
  height: 75vh;
  width: 100%;
}
.popup-container img {
  display: block;
  margin: 0 auto;
  height: auto;
  width: auto;
}

.popup-close {
  position: absolute;
  cursor: pointer;
  background: url("../img/close-icon.svg") no-repeat center;
  right: 20px;
  width: 40px;
  -webkit-background-size: 100% 100%;
          background-size: 100%;
  height: 40px;
  top: 20px;
  margin: 10px;
}
@media screen and (min-width: 1024px) {
  .popup-close {
    top: 30px;
    right: 30px;
    margin: 0;
    width: 50px;
    height: 50px;
  }
}

.popup-container--active {
  visibility: visible;
}

.popup-container--active ~ .popup-overlay {
  opacity: 1;
  visibility: visible;
}

.cookies-box {
  display: none;
  position: fixed;
  z-index: 10;
  left: 25px;
  bottom: 25px;
  padding: 20px;
  width: 100px;
  background-color: #ff5a5f;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  -webkit-box-sizing: initial;
          box-sizing: initial;
}
.cookies-box .exclamation-mark {
  font-family: 'BebasBold';
  font-size: 48px;
  padding: 10px 20px;
  line-height: 48px;
}
.cookies-box .close-button {
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  margin: 0 auto;
  margin-top: 20px;
  padding: 10px 25px;
  border: 0;
  color: #ff5a5f;
  background: #fff;
  -webkit-appearance: none;
}
.cookies-box .close-button:hover {
  opacity: 0.7;
}
.cookies-box a {
  color: #fff;
  text-decoration: underline;
}

/*# sourceMappingURL=custom-main.css.map */