/*! HTML5 Boilerplate v7.1.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
/*
 * A better looking default horizontal rule
 */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}
/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* COULEURS */
/* FONTS */
/* @font-face kit by Fonts2u (https://fonts2u.com) */
@font-face {
  font-family: "Army Condensed";
  src: url("Army_Condensed.eot?") format("eot"), url("Army_Condensed.woff") format("woff"), url("Army_Condensed.ttf") format("truetype"), url("Army_Condensed.svg#ArmyCondensed") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* @font-face kit by Fonts2u (https://fonts2u.com) */
@font-face {
  font-family: "BetterHeatherRegular";
  src: url("BetterHeather.eot?") format("eot"), url("BetterHeather.woff") format("woff"), url("BetterHeather.ttf") format("truetype"), url("BetterHeather.svg#BetterHeather") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: 'Crimson Text', serif;
}
.container {
  max-width: 60em;
  margin: 0 auto;
}
.filters {
  padding-top: 2em;
  padding-bottom: 1em;
}
.align-center {
  text-align: center;
}
.top-navbar ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
}
.top-navbar ul li {
  list-style: none;
  height: 4em;
  line-height: 4em;
}
.top-navbar ul li a {
  text-transform: lowercase;
  color: black;
  font-size: 1.5em;
  padding: 0 0.41666667em;
  position: relative;
  text-decoration: none;
}
.top-navbar ul li.active > a,
.top-navbar ul a:hover {
  color: #a24325;
}
.top-navbar ul li.active a::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-bottom: -7px;
  margin-left: -12px;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 7px 12px;
  border-color: transparent transparent #a24325 transparent;
}
.titlecontainer {
  background: url(/shared/titlecontainer-bg.jpg) top center no-repeat;
  background-size: cover;
}
.titlecontainer h1 {
  margin: 0;
  color: #fff;
  text-align: center;
  font-family: 'BetterHeatherRegular';
  font-size: 2.5em;
  line-height: 1.2em;
  font-weight: 300;
  letter-spacing: 0.0625em;
}
.titlecontainer h1 strong {
  letter-spacing: 0;
  font-family: 'Army Condensed';
  font-size: 1.3em;
  font-weight: 300;
}
.titlecontainer h2 {
  text-align: center;
  font-family: 'Army Condensed';
  color: #a8978a;
  font-size: 1.875em;
  line-height: 1.2em;
  font-weight: 300;
}
.titlecontainer h2 strong {
  display: block;
  color: #724026;
  font-family: 'Crimson Text';
  font-size: 0.8em;
  font-weight: 300;
  line-height: 1.5em;
}
.titlecontainer h2 em {
  display: block;
  font-family: 'BetterHeatherRegular';
  color: #724026;
  font-size: 0.8em;
  line-height: 0.91666667em;
  letter-spacing: 0.0625em;
}
.titlecontainer .cont {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-pack: center;
          justify-content: center;
}
.titlecontainer .cont.one {
  height: 10em;
}
.titlecontainer .cont.two {
  height: 9em;
  background-color: rgba(255, 255, 255, 0.85);
}
.titlecontainer .cont.three {
  min-height: 9em;
  max-width: 28.75em;
  margin: 0 auto;
}
.titlecontainer .cont.three .twocols {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
.titlecontainer .cont.three p {
  letter-spacing: 0.05em;
  text-align: justify;
  color: #fff;
  margin-right: 1.25em;
}
.arrowbutton {
  text-decoration: none;
  display: -webkit-inline-box;
  display: inline-flex;
  flex-shrink: 0;
  height: 1.625em;
  line-height: 1.625em;
  color: #fff;
  background: #724026;
  padding: 0 0.5em;
  position: relative;
  margin: 0 0.5em;
}
.arrowbutton:hover {
  color: #fff;
}
.arrowbutton:after {
  content: "";
  position: absolute;
  top: 0;
  left: -0.4375em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.4375em 0.8125em 0;
  border-color: transparent #724026 transparent transparent;
}
.arrowbutton:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -0.4375em;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0.8125em 0.4375em;
  border-color: transparent transparent #724026 transparent;
}
.arrowbutton .pointer {
  position: absolute;
  top: 0;
  right: -0.5em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.8125em 0 0.8125em 0.5em;
  border-color: transparent transparent transparent #724026;
}
.arrowbutton:hover,
.arrowbutton:active {
  background-color: #894d2e;
}
.arrowbutton:hover:after,
.arrowbutton:active:after {
  border-color: transparent #894d2e transparent transparent;
}
.arrowbutton:hover:before,
.arrowbutton:active:before {
  border-color: transparent transparent #894d2e transparent;
}
.arrowbutton:hover .pointer,
.arrowbutton:active .pointer {
  border-color: transparent transparent transparent #894d2e;
}
main header h1 {
  font-family: 'Army Condensed';
  color: #a8978a;
  font-weight: 300;
  margin: 0;
  /* 			line-height: (26em/32em); */
  font-size: 1.875em;
}
.tags ul {
  display: -webkit-box;
  display: flex;
  list-style: none;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  padding: 0;
}
.tags li {
  margin: 0 0.3125em;
}
.tags a,
.tags a:link {
  text-decoration: none;
  /* 		font-family: @stencil; */
  /* 		font-size: (16em/16em); */
  letter-spacing: 0.0625em;
  display: block;
  background: #a8978a;
  color: #fff;
  padding: 0 0.5625em;
  line-height: 1.5em;
  height: 1.5em;
  border-radius: 0.5em 0px;
  /* 		border-radius: (12em/16em); */
}
.tags a:hover,
.tags a:active {
  background-color: #c1b99f;
  text-decoration: none;
}
.tags a.checked {
  background-color: #724026;
}
.creationsList {
  margin-top: -0.625em;
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
}
.creationsList li {
  position: relative;
  margin: 0.625em;
}
.creationsList div.caption {
  font-family: 'Army Condensed';
  position: absolute;
  font-size: 1.125em;
  line-height: 2.05555556em;
  color: #724026;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  text-align: center;
  right: 0;
  left: 0;
}
.creationsList a,
.creationsList a:link {
  color: inherit;
}
.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: flex;
  align-content: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.pagination li {
  margin: 0 0.5em;
}
.pagination li a,
.pagination li a:link {
  text-align: center;
  display: block;
  background: #a8978a;
  color: #fff;
  width: 1.5em;
  height: 1.75em;
  line-height: 1.75em;
  text-decoration: none;
}
.pagination li a:hover,
.pagination li a:link:hover {
  background: #c1b99f;
}
.pagination li.current a,
.pagination li.current a:link {
  background: #724026;
}
article header {
  text-align: center;
  font-size: 1.5625em;
  flex-shrink: 0;
  width: 100%;
}
article main {
  -webkit-box-flex: 1;
          flex-grow: 1;
}
article main figure.gallery {
  margin: 0;
  background: #fff2dd;
  height: 37.5em;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
article main nav {
  margin-top: 1em;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
          justify-content: center;
}
article main nav a {
  display: block;
  cursor: pointer;
  border-radius: 0.25em;
  border: transparent 4px solid;
  margin-bottom: 0.26666667em;
}
article main nav a img {
  border: 1px solid #fff;
}
article main nav a.current {
  border-color: #724026;
}
/* Siblings prev next */
nav.siblings {
  margin-top: 2em;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
nav.siblings a {
  box-sizing: border-box;
  border: 0.2em solid #fff;
  padding: 0.2em 0.8em;
  background: #fff2dd;
  display: block;
  font-family: 'Army Condensed';
  text-decoration: none;
  font-size: 1.5625em;
  border-radius: 1.4em;
}
nav.siblings a,
nav.siblings a:link {
  color: #a8978a;
}
nav.siblings a:hover,
nav.siblings a:link:hover {
  color: #c1b99f;
  background-color: #fff6e1;
}
nav.siblings a:hover [class*="icono"],
nav.siblings a:link:hover [class*="icono"] {
  color: #c1b99f;
}
nav.siblings a.prev {
  text-align: right;
}
nav.siblings a img {
  border-radius: 1.5625em;
}
nav.siblings span.caption {
  padding: 0 0.4em;
}
/* ARROWS */
[class*="icono"] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #a8978a;
  box-sizing: border-box;
}
[class*="icono"]:after,
[class*="icono"]:before {
  content: "";
  box-sizing: border-box;
}
[class*="icono-arrow1"] {
  width: 20px;
  height: 20px;
  border-width: 4px 4px 0 0;
  border-style: solid;
  margin: 10px;
}
[class*="icono-arrow1"]:before {
  right: 0;
  top: -3px;
  position: absolute;
  height: 4px;
  box-shadow: inset 0 0 0 32px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 23px;
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
[class*="icono-arrow1"][class*="-left"] {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
[class*="icono-arrow1"][class*="-left"][class*="-up"] {
  -webkit-transform: none;
          transform: none;
}
[class*="icono-arrow1"][class*="-left"][class*="-down"] {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
[class*="icono-arrow1"][class*="-right"] {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
[class*="icono-arrow1"][class*="-right"][class*="-up"] {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
[class*="icono-arrow1"][class*="-right"][class*="-down"] {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
[class*="icono-arrow1"][class*="-up"] {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
[class*="icono-arrow1"][class*="-down"] {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
/* About */
.container.about {
  text-align: center;
  padding-top: 4em;
  max-width: 37.5em;
}
.about-cont {
  text-align: left;
}
/* contact */
.contactform {
  border: 1px solid #c1b99f;
  border-radius: 1em;
  box-sizing: border-box;
  overflow: hidden;
}
.contactform input,
.contactform textarea {
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid #c1b99f;
  width: 100%;
  padding: 1em;
}
.contactform button[type=submit] {
  cursor: pointer;
  border: none;
}
.contactform .submitbutton {
  padding: 0.5em 1em;
}
input[name="human"] {
  display: none !important;
}
.return {
  background: #c1b99f;
  padding: 0.5em 1em;
  border-radius: 2em;
  margin-bottom: 2em;
  color: #fff;
}
.return p {
  margin: 0;
}
.return.success {
  background: #4abf00;
}
.return.error {
  background: #f02d2d;
}
/* Footer */
.mainfooter {
  padding-top: 2em;
  padding-bottom: 6.125em;
  margin-top: 4em;
  background-color: #724026;
}
.mainfooter .container {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  padding: 0 1em;
}
.mainfooter .container ul {
  margin: 0;
  list-style: none;
  padding: 0;
  display: -webkit-box;
  display: flex;
}
.mainfooter .container ul li {
  margin-right: 1em;
  text-transform: lowercase;
}
.mainfooter .container p {
  margin: 0;
}
.mainfooter a,
.mainfooter a:link {
  color: #c1b99f;
  text-decoration: none;
}
.mainfooter a:hover,
.mainfooter a:active {
  color: #fff;
  text-decoration: underline;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers
 */
.hidden {
  display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  /* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
  visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.clearfix:after {
  clear: both;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/*# sourceMappingURL=nonconsigne.min.css.map */