/*------------------------------------------------------------------------------
    CSS Document (http://www.w3.org/Style/CSS/)

    project:    Fermentations
    created:    2015-10-07
    author:     Christophe ANDRIEU (http://www.stpo.fr)

    summary:    VARIABLES
                    main_colorz
                    default_font-size_(px)
                    typography
                IMPORTS
                GLOBAL_LAYOUT
                    text_selection
                LINKS
                HEADER
                FOOTER
                CORE
                MEDIA_QUERIES
                    tablet
                    mobile
                    wide_screens
                PRINT
----------------------------------------------------------------------------- */
html, body, blockquote, ul, ol, form, input {
  margin: 0;
  padding: 0; }

p {
  margin: 0 0 1em; }

ul {
  list-style: none; }

img {
  display: block;
  border: none; }

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0; }

p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child, pre:last-child, table:last-child {
  margin-bottom: 0; }

li p, li ul {
  margin-top: 0;
  margin-bottom: 0; }

code, pre, samp {
  white-space: pre-wrap; }

code {
  line-height: 1em; }

table {
  margin-bottom: 1.5em; }

q:before, q:after {
  display: none; }

abbr {
  cursor: help;
  border-bottom: none;
  text-decoration: none; }

button {
  width: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  font: inherit; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  button span {
    margin-top: -1px; } }

.msie6 button {
  width: 1%;
  overflow: visible; }

.msie7 button {
  overflow: visible; }

article, aside, audio, canvas, datagrid, datalist, details, dialog, figure, footer, header, menu, nav, section, video {
  display: block; }

abbr, eventsource, mark, meter, time, progress, output, bb {
  display: inline; }

html {
  -webkit-font-smoothing: antialiased; }

input, textarea, select, button {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

input[type="search"] {
  -webkit-appearance: textfield !important; }

input[type="search"]::-webkit-search-cancel-button {
  display: none; }

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

.fl {
  float: left !important; }

.fr {
  float: right !important; }

.txtR {
  text-align: right !important; }

.txtC {
  text-align: center !important; }

.invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0); }

.clearfix {
  display: block;
  zoom: 1; }
  .clearfix:after, .clearfix:before {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

@font-face {
  font-family: 'calibri';
  src: url("../fonts/calibri-webfont.eot");
  src: url("../fonts/calibri-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/calibri-webfont.woff") format("woff"), url("../fonts/calibri-webfont.ttf") format("truetype"), url("../fonts/calibri-webfont.svg#CalibriRegular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: "icons";
  src: url("../../static/fonts/icon-font.eot?5e3afad2de89b35057b0fee97bbfcb65");
  src: url("../../static/fonts/icon-font.eot?#iefix") format("embedded-opentype"), url("../../static/fonts/icon-font.woff?5e3afad2de89b35057b0fee97bbfcb65") format("woff"), url("../../static/fonts/icon-font.ttf?5e3afad2de89b35057b0fee97bbfcb65") format("truetype");
  font-weight: normal;
  font-style: normal; }

.icon {
  font-family: "icons";
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
  speak: none;
  text-decoration: inherit;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.icon_icon-1:before {
  content: "\f101"; }

.icon_icon-2:before {
  content: "\f102"; }

.icon_icon-3:before {
  content: "\f103"; }

.icon_icon-4:before {
  content: "\f104"; }

body {
  position: relative;
  margin: 0;
  height: 100%;
  background: #fff;
  text-align: left;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  line-height: 1.35; }

::-moz-selection {
  color: #000;
  background-color: #d5e8f7; }

::-webkit-selection {
  color: #000;
  background-color: #d5e8f7; }

::selection {
  color: #000;
  background-color: #d5e8f7; }

a {
  display: block;
  cursor: pointer;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #d5e8f7;
  -webkit-transition: border-color 400ms ease-out;
          transition: border-color 400ms ease-out; }
  a:hover, a:focus {
    border-color: black;
    -webkit-transition: border-color 100ms ease-out;
            transition: border-color 100ms ease-out; }
  a.alt {
    text-decoration: underline; }
    a.alt:hover, a.alt:focus {
      text-decoration: none; }
  a.ninja {
    color: #000; }

#header {
  position: relative; }
  #header .h1 {
    font-size: 1em;
    margin: 2.5em 0 0;
    text-align: center; }
    #header .h1 a {
      display: inline-block;
      border: none;
      padding: 0 1.25em;
      opacity: 1;
      -webkit-transition: opacity 400ms ease-out;
              transition: opacity 400ms ease-out; }
      #header .h1 a img {
        margin: 0 auto;
        width: 100%;
        max-width: 23.75em; }
      #header .h1 a:hover, #header .h1 a:focus {
        opacity: .65;
        -webkit-transition: opacity 100ms ease-out;
                transition: opacity 100ms ease-out; }

#footer {
  position: relative;
  margin: 5.7142857143em 0 1.4285714286em;
  font-size: 0.875em; }
  #footer ul {
    text-align: center; }
    #footer ul li {
      display: inline; }
      #footer ul li:before {
        content: '|';
        margin: 0 0.5em; }
      #footer ul li:first-child:before {
        display: none; }
      #footer ul li a {
        display: inline; }

#core {
  position: relative;
  padding: 0 6.25em;
  margin: 2.5em 0; }
  #core #strip {
    width: 100%;
    max-width: 87.5em;
    margin: 0 auto;
    list-style: none; }
    #core #strip li {
      display: inline-block;
      width: 25%; }
      #core #strip li img {
        width: 100%; }
  #core #arrows li {
    position: absolute;
    top: 50%;
    margin-top: -3.125em; }
    #core #arrows li#arrow-prev {
      left: 0; }
    #core #arrows li#arrow-next {
      right: 0; }
    #core #arrows li a {
      border: none; }
      #core #arrows li a img {
        width: 3.125em;
        margin: 1.25em; }
  .noTouch #core #arrows li a {
    opacity: 0;
    -webkit-transition: opacity 400ms ease-out;
            transition: opacity 400ms ease-out; }
    .noTouch #core #arrows li a:focus {
      opacity: 1;
      -webkit-transition: opacity 100ms ease-out;
              transition: opacity 100ms ease-out; }
  .noTouch #core:hover #arrows li a {
    opacity: 1;
    -webkit-transition: opacity 100ms ease-out;
            transition: opacity 100ms ease-out; }
    .noTouch #core:hover #arrows li a:hover {
      opacity: .65; }
  #core #editorial {
    max-width: 37.5em;
    margin: 0 auto;
    padding: 2.5em 0 2.5em;
    border-bottom: 1px solid #000; }
    #core #editorial a {
      display: inline; }
    #core #editorial .img-404 {
      margin: 0 auto;
      max-width: 21.875em; }

.tablet-only, .mobile-only, .wide-only {
  display: none; }

@media screen and (max-width: 87.5em) {
  #core #strip {
    max-width: 37.5em; }
    #core #strip li {
      width: 50%; } }

@media screen and (max-width: 45.625em) {
  #footer ul li:first-child {
    display: block; }
  #footer ul li:nth-child(2):before {
    display: none; }
  #core {
    padding: 0 2.5em; }
    #core #arrows li {
      position: fixed;
      margin-top: -0.9375em; }
      #core #arrows li a img {
        width: 1.875em;
        margin: 0.625em; }
    #core #strip {
      max-width: 21.875em; }
      #core #strip li {
        width: 100%; } }

@media screen and (min-width: 100em) {
  .no-wide {
    display: none; }
  .wide-only {
    display: block; }
    .wide-only.inline {
      display: inline; }
    .wide-only.inline-block {
      display: inline-block; } }

.print-only {
  display: none; }

@media print {
  body, html {
    width: auto;
    height: auto;
    min-height: auto;
    margin: 0;
    background-color: #fff;
    color: #000;
    background-image: none;
    padding: 0;
    float: none;
    position: static; }
  a {
    text-decoration: underline; }
  a[href]:after {
    content: " (" attr(href) ")"; }
  a[href="#"], a[href="javascript:"] {
    content: ""; }
  body {
    padding: .5em; }
  .no-print {
    display: none; }
  .print-only {
    display: block; } }