/**
 * Profound Grid
 *
 * Built in Sass (SCSS) this responsive/adaptive grid supports both fixed and fluid layouts,
 * relative and fixed gutters, as well as your choice of semantic markup or generic '.grid-x' classes.
 *
 * The biggest difference to other grid systems is the use of negative margins for column
 * placements, avoiding the subpixel rounding issues that usually break/uglify fluid layouts
 * in some browsers.
 *
 * Nested columns are supported too, without having to reset the grid on each level.
 *
 * Credits/Inspiration:
 * -------------------
 * Semantic Grid: http://www.semantic.gs
 * Susy: http://susy.oddbird.net
 * Negative Grid: http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/
 *
 * @author Profound Creative Studio
 * @url http://www.profoundgrid.com
 * @url http://www.weareprofound.com
 */
/**
 * Clearfix
 */
/**
 * Legacy Clearfix
 */
/**
 * Establish the grid-containing element.
 */
/**
 * Align an element to the grid.
 */
/**
 * Apply to any column to make it the last one of the current row.
 */
* {
  box-sizing: border-box; }

html {
  font-family: 'Merriweather', serif;
  color: #282828;
  line-height: 1.95; }
  @media (max-width: 900px) {
    html {
      font-size: 14px; } }
  @media (max-width: 550px) {
    html {
      font-size: 13px; } }

body {
  margin: 0;
  padding: 0; }

#contentarea {
  width: 98%;
  margin: 0 1%; }

.wrapper {
  width: 98%;
  margin: 0 1%;
  background-color: #fff;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 100%; }

.wrapper--home {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  bottom: 20px;
  left: 0;
  right: 0; }

.page-title {
  margin-top: 0; }

.footer-main,
.header-main {
  width: 98%;
  margin: 0 1%; }

.header-main {
  background: url("../../img/header.jpg") no-repeat left bottom;
  background-size: contain;
  height: 0;
  padding-bottom: 19.26%;
  margin-top: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #ccc; }

.header-main--home {
  background: url("../../img/start.jpg") no-repeat center center;
  background-size: cover;
  width: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  margin: 0;
  height: 100%; }
  @media (max-width: 550px) {
    .header-main--home {
      position: relative;
      top: auto;
      bottom: auto;
      left: auto;
      right: auto;
      float: none;
      width: 100%;
      height: 45vh;
      background-position: center 35%; } }

.content--home {
  width: 50%;
  padding-top: 1em;
  padding-left: 52%;
  float: left;
  display: table; }
  .content--home .logo--home {
    margin-bottom: .5em; }
  @media (max-width: 550px) {
    .content--home {
      float: none;
      width: 100%;
      height: auto;
      padding-left: 20px; } }

.content-main {
  float: left;
  margin-right: -100%;
  width: 74.75%;
  padding: 0 0 25px 2.5%; }
  [dir="rtl"] .content-main {
    float: right;
    margin-left: -100%;
    margin-right: 0; }
  [dir="ltr"] .content-main {
    margin-left: 25.25%; }
  [dir="rtl"] .content-main {
    margin-right: 25.25%; }
  .content-main .content__content--home {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%); }
    .content-main .content__content--home .current {
      display: none; }
  .content-main h1 {
    margin: 0; }
  @media (max-width: 550px) {
    .content-main {
      float: left;
      margin-right: -100%;
      width: 100%;
      float: none;
      padding: 0; }
      [dir="rtl"] .content-main {
        float: right;
        margin-left: -100%;
        margin-right: 0; }
      [dir="ltr"] .content-main {
        margin-left: 0%; }
      [dir="rtl"] .content-main {
        margin-right: 0%; }
      .content-main .content__content--home {
        position: relative;
        top: auto;
        transform: translate(0, 0); } }

.content-main--home {
  float: left;
  margin-right: -100%;
  width: 100%;
  width: 100%;
  padding: 0;
  margin: 0; }
  [dir="rtl"] .content-main--home {
    float: right;
    margin-left: -100%;
    margin-right: 0; }
  [dir="ltr"] .content-main--home {
    margin-left: 0%; }
  [dir="rtl"] .content-main--home {
    margin-right: 0%; }

a {
  color: inherit; }

.nav-main {
  float: left;
  margin-right: -100%;
  width: 24.25%;
  line-height: 2.1;
  padding-bottom: 15px; }
  [dir="rtl"] .nav-main {
    float: right;
    margin-left: -100%;
    margin-right: 0; }
  [dir="ltr"] .nav-main {
    margin-left: 0%; }
  [dir="rtl"] .nav-main {
    margin-right: 0%; }
  .nav-main .current {
    font-weight: 900; }
    .nav-main .current a {
      color: #282828;
      box-shadow: inset 0 -3px 1px 0 #e0d8c9; }
  @media (max-width: 550px) {
    .nav-main {
      float: left;
      margin-right: -100%;
      width: 100%;
      float: none; }
      [dir="rtl"] .nav-main {
        float: right;
        margin-left: -100%;
        margin-right: 0; }
      [dir="ltr"] .nav-main {
        margin-left: 0%; }
      [dir="rtl"] .nav-main {
        margin-right: 0%; } }

.nav-main__list {
  margin: 0;
  padding: 0;
  list-style: none; }
  .nav-main__list a {
    color: #78746C;
    text-decoration: none; }

.flag-english,
.flag-french {
  padding-left: 25px; }

.flag-english {
  background: url(../../img/ico_english.jpg) no-repeat left center; }

.flag-french {
  background: url(../../img/ico_french.jpg) no-repeat left center; }

.gallery__link {
  display: inline-block;
  margin-right: 5px; }
  @media (max-width: 550px) {
    .gallery__link {
      max-width: calc(50% - 10px); }
      .gallery__link img {
        width: 100%; } }

.book-list__img {
  float: left;
  margin-right: 2.5%;
  margin-bottom: 1.5em; }
  @media (max-width: 550px) {
    .book-list__img {
      margin-right: 12px;
      max-width: 100px; } }

.book-list__item {
  clear: left; }

.book-list__title {
  margin-top: 0; }

.footer-main {
  border-top: 1px solid #ccc;
  clear: both;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
  text-align: left;
  font-size: 75%; }

.current-list__content {
  margin-bottom: 3em; }

img.align_right {
  float: right; }

img.align_left {
  float: left;
  margin-right: 1em; }

.visually-hidden {
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px; }