@charset "UTF-8";
/*------------------------------------*\
    #SETUP
\*------------------------------------*/
/**
 * Settings, variables and tools.
 */
/* ------------------------------------*\
#MIXINS
\*------------------------------------ */
/* *
* Some nice mixins we can use to make our lives easier. Feel free to add as
* many as you like! */
/*
KEYFRAME
Use:
    @include keyframe(fadeout) {
        0% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
*/
/*
    ANIMATION
    use:
        .foo{
        @include animation(8s, 4s, fadeout)
        }
 */
/*------------------------------------*\
    #COLOR PALETTE
\*------------------------------------*/
/*------------------------------------*\
    #FUNCTIONAL COLOR
\*------------------------------------*/
/*------------------------------------*\
    #TYPE
\*------------------------------------*/
/*------------------------------------*\
    $FONT-SIZES
\*------------------------------------*/
/**
 * Font-sizes (in pixels). Refer to relevant sections for their implementations.
 */
/*------------------------------------*\
    $FONT-WEIGHTS
\*------------------------------------*/
/*------------------------------------*\
    $LINE HEIGHTS
\*------------------------------------*/
/*------------------------------------*\
    #VARS
\*------------------------------------*/
/*------------------------------------*\
    #GENERIC
\*------------------------------------*/
/**
 * These are far reaching styles that affect and underpin every element on the
 * page, e.g. `* {}`.
 */
/*------------------------------------*\
    $RESET
\*------------------------------------*/
/**
 * A more considered reset; more of a restart...
 * As per: csswizardry.com/2011/10/reset-restarted
 */
/**
 * Let’s make the box model all nice, shall we…?
 */
*, *:before, *:after {
  -moz-box-sizing: border-box;
       box-sizing: border-box; }

/**
 * The usual...
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
form, fieldset, legend,
table, th, td, caption,
hr,
figure {
  margin: 0;
  padding: 0; }

/**
 * Give a help cursor to elements that give extra info on `:hover`.
 */
abbr[title], dfn[title] {
  cursor: help; }

/**
 * Remove underlines from potentially troublesome elements.
 */
a, u, ins {
  text-decoration: none; }

/**
 * Apply faux underline via `border-bottom`.
 */
ins {
  border-bottom: 1px solid; }

/**
 * So that `alt` text is visually offset if images don’t load.
 */
img {
  font-style: italic; }

/**
 * So that we don't have to reset this all the time. We would rather add list-style when wanted than hide it every time.
 */
li {
  list-style: none; }

img {
  max-width: 100%; }

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary,
main {
  display: block; }

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */
[hidden] {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

/*
 * Removes default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: 2px dotted;
  outline-offset: 3px; }

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */
h1 {
  font-size: 2em; }

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic; }

/*
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

/*
 * Sets consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/*
 * Addresses inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Removes border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/*
 * Corrects overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal; }

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default; }

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/*
 * Removes inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/*------------------------------------*\
    #CLEARFIX
\*------------------------------------*/
/**
 * Micro clearfix, as per: nicolasgallagher.com/micro-clearfix-hack
 * Extend the clearfix class with Sass to avoid the `.clearfix` class appearing over
 * and over in your markup.
 */
.clearfix, .grid, .header, .book-item, .banner__teaser, .product {
  zoom: 1; }
  .clearfix:before, .grid:before, .header:before, .book-item:before, .banner__teaser:before, .product:before, .clearfix:after, .grid:after, .header:after, .book-item:after, .banner__teaser:after, .product:after {
    content: " ";
    display: table; }
  .clearfix:after, .grid:after, .header:after, .book-item:after, .banner__teaser:after, .product:after {
    clear: both; }

/*------------------------------------*\
    #BASE
\*------------------------------------*/
/**
 * These are base HTML elements, things with no classes on them, e.g. `h1 {}`,
 * `blockquote {}`.
 */
/*------------------------------------*\
    #LAYOUT
\*------------------------------------*/
/**
 * Our layout system (note, not grid system) can be used to lay out all manner
 * of things, from full page layouts to individual components.
 */
.col-1 {
  float: left;
  position: relative;
  width: 8.33333%;
  padding-left: 10px;
  padding-right: 10px; }

.col-2 {
  float: left;
  position: relative;
  width: 16.66667%;
  padding-left: 10px;
  padding-right: 10px; }

.col-3 {
  float: left;
  position: relative;
  width: 25%;
  padding-left: 10px;
  padding-right: 10px; }

.col-4, .col-12 .col-third, .col-12--md .col-third, .col-12--lg .col-third, .col-12--xl .col-third,
.col-9 .col-third, .col-9--md .col-third, .col-9--lg .col-third, .col-9--xl .col-third,
.col-6 .col-third,
.col-10 .col-half .col-third,
.col-10--md .col-half .col-third,
.col-10--lg .col-half .col-third,
.col-10--xl .col-half .col-third,
.col-8 .col-half .col-third,
.col-8--md .col-half .col-third,
.col-8--lg .col-half .col-third,
.col-8--xl .col-half .col-third,
.col-4 .col-half .col-third,
.col-4--md .col-half .col-third,
.col-4--lg .col-half .col-third,
.col-4--xl .col-half .col-third, .col-6--md .col-third, .col-6--lg .col-third, .col-6--xl .col-third,
.col-3 .col-third, .col-3--md .col-third, .col-3--lg .col-third, .col-3--xl .col-third {
  float: left;
  position: relative;
  width: 33.33333%;
  padding-left: 10px;
  padding-right: 10px; }

.col-5 {
  float: left;
  position: relative;
  width: 41.66667%;
  padding-left: 10px;
  padding-right: 10px; }

.col-6, .col-12 .col-half, .col-12--md .col-half, .col-12--lg .col-half, .col-12--xl .col-half,
.col-10 .col-half, .col-10--md .col-half, .col-10--lg .col-half, .col-10--xl .col-half,
.col-8 .col-half, .col-8--md .col-half, .col-8--lg .col-half, .col-8--xl .col-half,
.col-6 .col-half, .col-6--md .col-half, .col-6--lg .col-half, .col-6--xl .col-half,
.col-4 .col-half,
.col-9 .col-third .col-half,
.col-9--md .col-third .col-half,
.col-9--lg .col-third .col-half,
.col-9--xl .col-third .col-half,
.col-3 .col-third .col-half,
.col-3--md .col-third .col-half,
.col-3--lg .col-third .col-half,
.col-3--xl .col-third .col-half, .col-4--md .col-half, .col-4--lg .col-half, .col-4--xl .col-half {
  float: left;
  position: relative;
  width: 50%;
  padding-left: 10px;
  padding-right: 10px; }

.col-7 {
  float: left;
  position: relative;
  width: 58.33333%;
  padding-left: 10px;
  padding-right: 10px; }

.col-8 {
  float: left;
  position: relative;
  width: 66.66667%;
  padding-left: 10px;
  padding-right: 10px; }

.col-9 {
  float: left;
  position: relative;
  width: 75%;
  padding-left: 10px;
  padding-right: 10px; }

.col-10 {
  float: left;
  position: relative;
  width: 83.33333%;
  padding-left: 10px;
  padding-right: 10px; }

.col-11 {
  float: left;
  position: relative;
  width: 91.66667%;
  padding-left: 10px;
  padding-right: 10px; }

.col-12 {
  float: left;
  position: relative;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px; }

@media screen and (min-width: 360px) {
  .col-1--sm {
    float: left;
    position: relative;
    width: 8.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-2--sm {
    float: left;
    position: relative;
    width: 16.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-3--sm {
    float: left;
    position: relative;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-4--sm {
    float: left;
    position: relative;
    width: 33.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-5--sm {
    float: left;
    position: relative;
    width: 41.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-6--sm {
    float: left;
    position: relative;
    width: 50%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-7--sm {
    float: left;
    position: relative;
    width: 58.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-8--sm {
    float: left;
    position: relative;
    width: 66.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-9--sm {
    float: left;
    position: relative;
    width: 75%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-10--sm {
    float: left;
    position: relative;
    width: 83.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-11--sm {
    float: left;
    position: relative;
    width: 91.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-12--sm {
    float: left;
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px; } }
@media screen and (min-width: 640px) {
  .col-1--md {
    float: left;
    position: relative;
    width: 8.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-2--md {
    float: left;
    position: relative;
    width: 16.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-3--md {
    float: left;
    position: relative;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-4--md {
    float: left;
    position: relative;
    width: 33.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-5--md {
    float: left;
    position: relative;
    width: 41.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-6--md {
    float: left;
    position: relative;
    width: 50%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-7--md {
    float: left;
    position: relative;
    width: 58.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-8--md {
    float: left;
    position: relative;
    width: 66.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-9--md {
    float: left;
    position: relative;
    width: 75%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-10--md {
    float: left;
    position: relative;
    width: 83.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-11--md {
    float: left;
    position: relative;
    width: 91.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-12--md {
    float: left;
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px; } }
@media screen and (min-width: 960px) {
  .col-1--lg {
    float: left;
    position: relative;
    width: 8.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-2--lg {
    float: left;
    position: relative;
    width: 16.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-3--lg {
    float: left;
    position: relative;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-4--lg {
    float: left;
    position: relative;
    width: 33.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-5--lg {
    float: left;
    position: relative;
    width: 41.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-6--lg {
    float: left;
    position: relative;
    width: 50%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-7--lg {
    float: left;
    position: relative;
    width: 58.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-8--lg {
    float: left;
    position: relative;
    width: 66.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-9--lg {
    float: left;
    position: relative;
    width: 75%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-10--lg {
    float: left;
    position: relative;
    width: 83.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-11--lg {
    float: left;
    position: relative;
    width: 91.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-12--lg {
    float: left;
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px; } }
@media screen and (min-width: 1280px) {
  .col-1--xl {
    float: left;
    position: relative;
    width: 8.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-2--xl {
    float: left;
    position: relative;
    width: 16.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-3--xl {
    float: left;
    position: relative;
    width: 25%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-4--xl {
    float: left;
    position: relative;
    width: 33.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-5--xl {
    float: left;
    position: relative;
    width: 41.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-6--xl {
    float: left;
    position: relative;
    width: 50%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-7--xl {
    float: left;
    position: relative;
    width: 58.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-8--xl {
    float: left;
    position: relative;
    width: 66.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-9--xl {
    float: left;
    position: relative;
    width: 75%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-10--xl {
    float: left;
    position: relative;
    width: 83.33333%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-11--xl {
    float: left;
    position: relative;
    width: 91.66667%;
    padding-left: 10px;
    padding-right: 10px; }

  .col-12--xl {
    float: left;
    position: relative;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px; } }
/*------------------------------------*\
   Subdivisions
\*------------------------------------*/
/**/
/*------------------------------------*\
    OFFSET
\*------------------------------------*/
/**
 * Usage: col-offset-{1-11}
 */
.col-offset-1 {
  margin-left: 8.33333%; }

.col-offset-2 {
  margin-left: 16.66667%; }

.col-offset-3 {
  margin-left: 25%; }

.col-offset-4 {
  margin-left: 33.33333%; }

.col-offset-5 {
  margin-left: 41.66667%; }

.col-offset-6 {
  margin-left: 50%; }

.col-offset-7 {
  margin-left: 58.33333%; }

.col-offset-8 {
  margin-left: 66.66667%; }

.col-offset-9 {
  margin-left: 75%; }

.col-offset-10 {
  margin-left: 83.33333%; }

.col-offset-11 {
  margin-left: 91.66667%; }

@media screen and (min-width: 640px) {
  .col-offset-0--md {
    margin-left: 0; }

  .col-offset-1--md {
    margin-left: 8.33333%; }

  .col-offset-2--md {
    margin-left: 16.66667%; }

  .col-offset-3--md {
    margin-left: 25%; }

  .col-offset-4--md {
    margin-left: 33.33333%; }

  .col-offset-5--md {
    margin-left: 41.66667%; }

  .col-offset-6--md {
    margin-left: 50%; }

  .col-offset-7--md {
    margin-left: 58.33333%; }

  .col-offset-8--md {
    margin-left: 66.66667%; }

  .col-offset-9--md {
    margin-left: 75%; }

  .col-offset-10--md {
    margin-left: 83.33333%; }

  .col-offset-11--md {
    margin-left: 91.66667%; } }
@media screen and (min-width: 960px) {
  .col-offset-0--lg {
    margin-left: 0; }

  .col-offset-1--lg {
    margin-left: 8.33333%; }

  .col-offset-2--lg {
    margin-left: 16.66667%; }

  .col-offset-3--lg {
    margin-left: 25%; }

  .col-offset-4--lg {
    margin-left: 33.33333%; }

  .col-offset-5--lg {
    margin-left: 41.66667%; }

  .col-offset-6--lg {
    margin-left: 50%; }

  .col-offset-7--lg {
    margin-left: 58.33333%; }

  .col-offset-8--lg {
    margin-left: 66.66667%; }

  .col-offset-9--lg {
    margin-left: 75%; }

  .col-offset-10--lg {
    margin-left: 83.33333%; }

  .col-offset-11--lg {
    margin-left: 91.66667%; }

  .col-offset-12--lg {
    margin-left: 100%; } }
@media screen and (min-width: 1280px) {
  .col-offset-1--xl {
    margin-left: 8.33333%; }

  .col-offset-2--xl {
    margin-left: 16.66667%; }

  .col-offset-3--xl {
    margin-left: 25%; }

  .col-offset-4--xl {
    margin-left: 33.33333%; }

  .col-offset-5--xl {
    margin-left: 41.66667%; }

  .col-offset-6--xl {
    margin-left: 50%; }

  .col-offset-7--xl {
    margin-left: 58.33333%; }

  .col-offset-8--xl {
    margin-left: 66.66667%; }

  .col-offset-9--xl {
    margin-left: 75%; }

  .col-offset-10--xl {
    margin-left: 83.33333%; }

  .col-offset-11--xl {
    margin-left: 91.66667%; } }
.grid {
  max-width: 800px;
  margin: 0 auto;
  margin-left: -10px;
  margin-right: -10px; }
  .grid--fluid {
    max-width: 100%;
    margin: 0 auto; }

.wrapper, .banner__wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px; }
  .wrapper--with-padding {
    padding: 40px 20px 0 20px; }

html {
  height: 100%; }

html, body {
  font-family: "Georgia", serif;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  background: #ffffff; }

h1, .h1 {
  color: #95531B;
  font-weight: 400;
  margin-bottom: 20px;
  margin-top: 40px;
  letter-spacing: -1px;
  font-size: 24px;
  line-height: 30px;
  font-family: "Oxygen", "Helvetica", "Arial", sans-serif; }
  @media screen and (min-width: 360px) {
    h1, .h1 {
      font-size: 32px;
      line-height: 40px; } }
  @media screen and (min-width: 640px) {
    h1, .h1 {
      font-size: 48px;
      margin-bottom: 40px;
      line-height: 60px; } }

h2, .h2, .price, .header__title, .banner__title {
  color: #000000;
  font-size: 24px;
  font-weight: 400;
  font-family: "Oxygen", "Helvetica", "Arial", sans-serif;
  margin-bottom: 5px;
  letter-spacing: -0.8px;
  text-transform: none; }

h3, .h3 {
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  font-family: "Georgia", serif;
  margin-bottom: 5px;
  letter-spacing: 0;
  text-transform: uppercase; }

h4, .h4 {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
  font-family: "Oxygen", "Helvetica", "Arial", sans-serif;
  margin-bottom: 10px;
  letter-spacing: 0;
  text-transform: none; }

h5, .h5 {
  color: #000000;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: 0; }

.small {
  color: #000000;
  line-height: 1em;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase; }

.regular, table thead th, .table thead th, .book-item__title {
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 1em;
  line-height: 1.5em;
  text-transform: none;
  line-height: 1.5em;
  margin: 0; }

p {
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 1em;
  line-height: 1.5em; }

a, .a {
  color: #003865;
  border-bottom: 1px solid #003865; }
  a:hover, a--hover, .a:hover, .a--hover {
    color: #000000;
    border-color: #000000; }
  a:focus, a--focus, .a:focus, .a--focus {
    outline: 2px dotted;
    outline-offset: 3px; }

h1 a, h2 a, h3 a, h4 a, h5 a {
  color: #000000;
  border: none; }
  h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
    color: #003865; }

h1 small, .h1 small, h2 small, .h2 small, .price small, .header__title small, .banner__title small, h3 small, .h3 small, h4 small, .h4 small {
  font-size: 0.7em;
  line-height: 1.5em;
  display: block; }

table, .table {
  text-align: left;
  margin-bottom: 20px;
  width: auto; }
  table--fluid, .table--fluid {
    width: 100%; }
  table__wrapper, .table__wrapper {
    width: 100%;
    _overflow: auto;
    overflow-y: auto; }
  table thead, .table thead {
    border-bottom: 1px solid #fbfbf7; }
  table th, .table th {
    padding: 10px 10px;
    padding-left: 0; }
  table td, .table td {
    padding: 10px 10px;
    padding-left: 0;
    vertical-align: top; }
  @media screen and (max-width: 640px) {
    table--collapse-on-mobile, .table--collapse-on-mobile {
      display: block;
      width: 100%; } }
  @media screen and (max-width: 640px) {
    table__row--collapse-on-mobile, .table__row--collapse-on-mobile {
      display: block;
      width: 100%; } }
  @media screen and (max-width: 640px) {
    table__cell--collapse-on-mobile, .table__cell--collapse-on-mobile {
      display: block;
      width: 100%;
      position: relative; } }

.list, .list--sub {
  padding-left: 20px;
  margin-bottom: 20px; }
  .list, .list--sub,
  .list li,
  .list--sub li {
    list-style: disc; }
  .list li, .list--sub li {
    margin-bottom: 10px; }
  .list--numbered li {
    list-style: decimal; }
  .list--no-bullets {
    padding-left: 0; }
    .list--no-bullets li {
      list-style: none; }
  .list--sub {
    padding-left: 40px;
    padding-top: 20px; }
    .list--sub li {
      list-style: circle; }
  .list--inline li {
    display: inline-block; }
    .list--inline li:after {
      content: ", "; }
    .list--inline li:last-child:after {
      content: ""; }

.button, .product__cta {
  padding: 10px 40px;
  background: #95531B;
  background: -webkit-linear-gradient(top left, #c06b23, #95531B);
  background: linear-gradient(to bottom right, #c06b23, #95531B);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 4px solid #6a3b13;
  border-radius: 5px;
  width: 100%;
  text-align: center;
  display: block;
  margin-bottom: 0;
  letter-spacing: 1px; }
  @media screen and (min-width: 360px) {
    .button, .product__cta {
      width: auto;
      display: inline-block; } }
  .button:hover, .product__cta:hover, .button:focus, .product__cta:focus, .button:active, .product__cta:active {
    color: #ffffff;
    -webkit-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
            transform: translateY(-2px);
    border-bottom: 6px solid #6a3b13;
    margin-bottom: -2px; }
  .button--secondary {
    background: #F2EAD7;
    color: #000000;
    border: 2px solid #c9a475;
    border-bottom: 4px solid #c9a475; }
    .button--secondary:hover, .button--secondary:focus, .button--secondary:active {
      background: #F2EAD7;
      color: #000000;
      border: 2px solid #c9a475;
      border-bottom: 6px solid #c9a475; }

/*
#skiptocontent a {
    padding: 6px;
    position: absolute;
    top: -80px;
    left:50%;
	transform: translateX(-50%);
    color: $color-text;
    background: transparent;
    -webkit-transition: top 0.2s ease-out, background 0.2s linear;
    transition: top 0.2s ease-out, background 0.2s linear;
    z-index: 100;
    text-align: center;
}

#skiptocontent a:focus {
    position: absolute;
    top: 0px;
    background: $color-secondary;
    outline-color: white;
}

#maincontent:focus {
	outline:none;
}
*/
.animation__emerge, .animation__toggle--closed, .product__cta-subsection--closed {
  opacity: 0;
  -webkit-transition: all 0.20s ease;
          transition: all 0.20s ease; }
  .animation__emerge--show, .animation__toggle--open, .product__cta-subsection--open {
    opacity: 1; }
.animation__toggle--closed, .product__cta-subsection--closed {
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top; }
.animation__toggle--open, .product__cta-subsection--open {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px); }
  .animation__toggle--open:focus, .product__cta-subsection--open:focus {
    outline: none; }
.animation__flash--in {
  -webkit-animation: keyframe-flash-in 1s cubic-bezier(0, 0.43, 0.69, 1);
  -webkit-animation-iteration-count: 1; }
.animation__insertion--closed, .animation__insertion-right--closed {
  opacity: 0;
  -webkit-transition: all 0.20s ease;
          transition: all 0.20s ease;
  -webkit-transform: translateX(-20px);
      -ms-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transform-origin: top;
      -ms-transform-origin: top;
          transform-origin: top;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 1px; }
.animation__insertion--open, .animation__insertion-right--open {
  opacity: 1;
  -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
          transform: translateX(0px); }
  .animation__insertion--open:focus, .animation__insertion-right--open:focus {
    outline: none; }

@-webkit-keyframes keyframe-flash-in {
  0% {
    background-color: none; }
  10% {
    background-color: #d7bc9a;
    color: black; }
  100% {
    background-color: none; } }
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  78% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  88% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  90% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  92% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  94% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  96% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  98% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  78% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  88% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px); }
  90% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }
  92% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  94% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }
  96% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  98% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }
/*------------------------------------*\
    #OBJECTS
\*------------------------------------*/
/**
 * These are design-free objects, abstractions and design patterns. These create
 * constructs that you lay your designs over.
 */
.page {
  padding-top: 20px;
  padding-bottom: 40px; }
  .page__intro {
    font-size: 16px;
    font-weight: 400;
    font-family: "Georgia", serif;
    margin-bottom: 40px; }
    @media screen and (min-width: 640px) {
      .page__intro {
        font-size: 20px;
        width: 75%;
        max-width: 500px; } }

.header {
  background: #ffffff; }
  @media screen and (min-width: 640px) {
    .header {
      padding-top: 0; } }
  .header__title {
    margin: 0;
    font-family: "Georgia", serif;
    line-height: 55px;
    text-align: center; }
    @media screen and (min-width: 640px) {
      .header__title {
        text-align: left;
        float: left; } }
    .header__title a {
      border: none;
      color: #003865; }
  .header__nav {
    text-align: center; }
    @media screen and (min-width: 640px) {
      .header__nav {
        text-align: left;
        float: right; } }
    .header__nav li {
      display: inline-block;
      margin: 0 10px; }
      .header__nav li a {
        line-height: 55px; }

.default-cover {
  position: relative; }
  .default-cover__front {
    padding-top: 143%;
    background: #003865;
    background: -webkit-linear-gradient(bottom left, #001c32, #003865);
    background: linear-gradient(to top right, #001c32, #003865);
    overflow: hidden;
    position: relative; }
  .default-cover__title {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 15%;
    background: #64A6DA;
    padding: 5px;
    font-size: 0.6em;
    opacity: 0.9; }
  @media screen and (min-width: 640px) {
    .default-cover--large .default-cover__title {
      font-size: 1.2em;
      padding: 10px; } }
  @media screen and (min-width: 960px) {
    .default-cover--large .default-cover__title {
      font-size: 1.3em;
      padding: 15px; } }

.book-item {
  border: 0;
  display: block; }
  .book-item__title {
    color: #000000;
    font-family: "Oxygen", "Helvetica", "Arial", sans-serif;
    display: block; }
    .book-item__title small {
      display: block; }
      .book-item__title small:before {
        content: '\A'; }
  .book-item__cover {
    width: 33.33%;
    max-width: 100px;
    margin-bottom: 10px;
    margin-right: 20px;
    border-bottom: 10px solid rgba(0, 0, 0, 0.1);
    padding-top: 5px;
    float: left;
    -webkit-transition: all 0.1s ease-in;
            transition: all 0.1s ease-in; }
    @media screen and (min-width: 640px) {
      .book-item__cover {
        width: 100%;
        float: none; } }
  .book-item:hover .book-item__cover, .book-item:focus .book-item__cover, .book-item:active .book-item__cover {
    padding-top: 0px;
    border-bottom: 15px solid rgba(0, 0, 0, 0.1); }

.banner {
  display: block;
  background: #F2EAD7;
  background-size: 400px;
  -webkit-transition: background-size 0.2s;
          transition: background-size 0.2s;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 200px;
  position: relative;
  border: none;
  padding-top: 20px;
  border-bottom: 10px solid rgba(0, 0, 0, 0.1); }
  @media screen and (min-width: 360px) {
    .banner {
      background-size: 100%; } }
  @media screen and (min-width: 640px) {
    .banner {
      background-position: center center;
      padding: 20px 0;
      min-height: 300px;
      border-bottom: 10px solid rgba(255, 255, 255, 0.5); } }
  .banner__section {
    margin: 0 -20px; }
    @media screen and (min-width: 640px) {
      .banner__section {
        width: 75%;
        position: absolute;
        border-bottom: 10px solid rgba(255, 255, 255, 0.5);
        width: 75%;
        max-width: 500px;
        top: 50%;
        -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        border-radius: 5px;
        overflow: hidden; } }
    @media screen and (min-width: 960px) {
      .banner__section {
        width: 50%; } }
  .banner__teaser {
    display: block;
    -webkit-transition: -webkit-transform 0.9s;
            transition: transform 0.9s;
    background: #fbfbf7;
    padding: 20px 20px; }
  .banner__title {
    color: #95531B;
    margin-bottom: 10px; }
  .banner__intro {
    overflow: hidden; }
  .banner__cover {
    width: 100px;
    margin: 20px;
    border-bottom: 10px solid rgba(0, 0, 0, 0.1);
    margin-bottom: -10px;
    position: relative; }
    .banner__cover img {
      display: block; }
    @media screen and (min-width: 640px) {
      .banner__cover {
        float: left;
        width: 100px; } }
  .banner:hover, .banner:focus {
    border-bottom: 10px solid rgba(0, 0, 0, 0.1); }
    @media screen and (min-width: 360px) {
      .banner:hover, .banner:focus {
        background-size: 103%; } }
    @media screen and (min-width: 640px) {
      .banner:hover, .banner:focus {
        border-bottom: 10px solid rgba(255, 255, 255, 0.5); } }
  .banner--image-no-cover {
    padding-top: 175px; }
  .banner--no-image {
    min-height: 0;
    background: -webkit-linear-gradient(bottom left, #c9a475, #d7bc9a);
    background: linear-gradient(to top right, #c9a475, #d7bc9a); }
    li:nth-child(odd) .banner--no-image {
      background: -webkit-linear-gradient(top right, #3b8ed0, #64A6DA);
      background: linear-gradient(to bottom left, #3b8ed0, #64A6DA); }
    .banner--no-image .banner__section {
      position: relative;
      top: auto;
      -webkit-transform: none;
          -ms-transform: none;
              transform: none;
      width: 100%;
      border-bottom: 10px solid rgba(0, 0, 0, 0.1); }

.page-banner {
  display: block;
  background: transparent;
  background-size: 400px;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 200px;
  padding: 20px 0;
  position: relative;
  margin-bottom: 20px; }
  @media screen and (min-width: 360px) {
    .page-banner {
      background-size: 100%;
      background-color: white;
      background-position: center center;
      border-bottom: 10px solid rgba(255, 255, 255, 0.5); } }
  @media screen and (min-width: 640px) {
    .page-banner {
      min-height: 300px; } }
  @media screen and (min-width: 960px) {
    .page-banner {
      min-height: 450px;
      background-size: 1400px; } }
  .page-banner__section {
    width: 75%;
    position: absolute;
    bottom: 0; }
    @media screen and (min-width: 640px) {
      .page-banner__section {
        width: 50%;
        max-width: 500px; } }
  .page-banner__title {
    clear: both;
    padding: 5px 10px;
    background: #F2EAD7;
    color: #000000;
    margin-top: 10px;
    margin-bottom: 0;
    display: inline-block;
    border-bottom: 10px solid rgba(255, 255, 255, 0.5);
    margin-bottom: -20px; }
    @media screen and (min-width: 640px) {
      .page-banner__title {
        margin-left: -20px;
        padding: 15px 20px; } }
    .page-banner__title small {
      font-size: 0.6em; }
  .page-banner--no-image {
    background: #F2EAD7;
    min-height: 100px; }
    .page-banner--no-image .page-banner__section {
      position: static; }
    .page-banner--no-image .page-banner__title {
      background: none;
      box-shadow: none;
      margin-bottom: 0; }

.product {
  margin-bottom: 40px; }
  .product__cover {
    width: 50%;
    margin-bottom: 20px;
    border-bottom: 10px solid rgba(0, 0, 0, 0.1); }
    @media screen and (min-width: 360px) {
      .product__cover {
        float: left;
        width: 33.33%; } }
    @media screen and (min-width: 960px) {
      .product__cover {
        margin-left: -60px;
        width: 30%; } }
  .product__meta-wrapper {
    margin-bottom: 20px; }
    @media screen and (min-width: 360px) {
      .product__meta-wrapper {
        width: 66.66%;
        float: left;
        padding-left: 20px; } }
  .product__cta-wrapper {
    display: block;
    width: 100%; }
    .product__cta-wrapper:before {
      content: " ";
      display: table;
      clear: both; }
    @media screen and (min-width: 360px) {
      .product__cta-wrapper {
        width: 66.66%;
        float: left;
        padding-left: 20px; } }
    @media screen and (min-width: 960px) {
      .product__cta-wrapper {
        width: 70%; } }
  .product__cta:after {
    content: '▼';
    display: inline-block;
    margin-left: 10px;
    margin-right: -10px;
    color: #6a3b13; }
  .product__cta--open:after {
    content: '▲'; }
  .product__cta-subsection {
    background: #F2EAD7;
    padding: 20px;
    margin-bottom: 20px; }
  .product__cta-option {
    background: #fbfbf7;
    padding: 10px 20px;
    margin-bottom: 5px;
    display: inline-block; }
    .product__cta-option:hover, .product__cta-option:focus, .product__cta-option:active {
      background: white; }

.meta {
  margin-bottom: 20px; }
  .meta__terms, .meta__description {
    font-family: "Oxygen", "Helvetica", "Arial", sans-serif;
    color: #777777;
    margin-bottom: 5px; }
  .meta__terms {
    display: inline;
    white-space: pre;
    font-size: 14px; }
    .meta__terms:before {
      content: '\A'; }
  .meta__description {
    display: inline-block;
    margin-bottom: 5px;
    color: #777777;
    padding-left: 5px;
    font-family: "Georgia", serif; }
    .meta__description a, .meta__description a:visited {
      color: #777777;
      border-color: #777777; }
      .meta__description a:hover, .meta__description a:focus, .meta__description a:active, .meta__description a:visited:hover, .meta__description a:visited:focus, .meta__description a:visited:active {
        color: #000000; }

.related {
  background: #F2EAD7;
  padding: 20px 0 40px 0; }
  .related__title {
    margin-bottom: 20px; }
  .related__list-item {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    padding-right: 20px;
    padding-bottom: 20px; }
    @media screen and (min-width: 640px) {
      .related__list-item {
        width: 33.33%; } }
    @media screen and (min-width: 960px) {
      .related__list-item {
        width: 25%; } }
  .related--alternative {
    background: #fbfbf7; }

.social {
  background: #fbfbf7;
  padding: 20px 0 40px 0; }
  .social__share {
    display: block;
    margin-bottom: 20px; }
    .social__share .fb_iframe_widget {
      vertical-align: top;
      margin-right: 20px; }

.blockquote, blockquote {
  margin-bottom: 40px; }
  .blockquote p, blockquote p {
    font-size: 16px;
    margin-bottom: 20px;
    display: inline;
    padding: 3px 0px;
    line-height: 27px;
    background: #F2EAD7;
    box-shadow: 6px 0 0 #F2EAD7, -6px 0 0 #F2EAD7; }
    @media screen and (min-width: 640px) {
      .blockquote p, blockquote p {
        font-size: 16px;
        line-height: 32px; } }
  @media screen and (min-width: 640px) {
    .blockquote, blockquote {
      width: 75%; } }
  @media screen and (min-width: 960px) {
    li:nth-child(odd) .blockquote, li:nth-child(odd) blockquote {
      margin-left: -60px; } }

/*------------------------------------*\
    #GUI
\*------------------------------------*/
/**
 * These are your components and modules; things like buttons, accordions,
 * carousels, etc.
 */
.t-only-screenreaders {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px; }

.t-center-text {
  text-align: center; }

.t-block {
  display: block;
  width: 100%; }

.t-inline-block {
  display: inline-block; }

.t-no-margin {
  margin: 0; }

.t-padding-bottom {
  padding-bottom: 20px; }

/*------------------------------------*\
    #PRINT
\*------------------------------------*/
/**
 * All print styles should be included in a @media print. Omit the media type for the condensed style sheet. More details at: http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
 */
@media print {
  /* 
  Generic
  */
  body {
    background: white;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 9pt; }

  img {
    max-width: 500px; }

  @page {
    margin: 0.5cm; }
  h1 {
    font-size: 21pt;
    margin-bottom: 10px; }

  h2 {
    font-size: 14pt;
    margin-top: 25px; }

  p {
    font-size: 9pt;
    margin-bottom: 13px; }

  aside h2 {
    font-size: 18pt; }

  blockquote, ul {
    margin: 0; }

  ul {
    list-style: none; }

  p a {
    word-wrap: break-word; }

  p a:after {
    content: " (" attr(href) ")";
    font-size: 80%; }

  aside {
    border-top: 1px solid #bbb;
    margin-top: 30px;
    display: block;
    page-break-before: always; } }