@charset "UTF-8";
/* !One to rule them all */
@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Oswald:200,300,400,500,600,700|Playfair+Display:400,400i,700,700i,900,900i");
/*----------------------------------------*/
/* !GENERAL */
/*----------------------------------------*/
/* quand inté terminé mettre '/' à la place de '/html/'*/
/* Font Family */
/* Background gen color */
/**/
/*foncèe*/
/*clair*/
/**/
/* Container's max width */
/* boutons creation compte, mdp */
/*----------------------------------------*/
/* !Navigation link color */
/*----------------------------------------*/
/* bouton spécial resa, contact etc.*/
/* bouton mobile */
/*----------------------------------------*/
/* !cycleslider var */
/*----------------------------------------*/
/*----------------------------------------*/
/* !VUES LiSTING */
/*----------------------------------------*/
/*----------------------------------------*/
/* !FORMULAIRE */
/*----------------------------------------*/
/* label */
/* input */
/* input hover */
/* input focus */
/* textarea */
/* textarea hover */
/* select */
/* select hover */
/**/
/* submit */
/**/
/* radio & checkbox */
/* file */
/* base functions & mixins */
/*/// @example scss - Usage ///   .element { ///     @include ellipsis; ///   } .element { ///     @include ellipsis(50%); ///   } */
/* Scss Document */
/* Base Reset & dependencies */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; }

*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }

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

/* HTML5 display definitions ========================================================================== */
/** Correct `block` display not defined for any HTML5 element in IE 8/9. Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. Correct `block` display not defined for `main` in IE 11. */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

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

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

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

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

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

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

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

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

/** Prevent `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 ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; display: block; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve 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], html input[disabled] { cursor: default; }

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

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

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width. 1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

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

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

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

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

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

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

td, th { padding: 0; }

/*========================================================================== */
/*--- PRINT ---*/
@media print { * { background: transparent !important; color: black !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }

/*---------------*/
/* ALERT */
/*---------------*/
.info { background-color: #5bc0de !important; }

.success { background-color: #5cb85c !important; }

.warning { background-color: #f0ad4e !important; }

.alert { background-color: #d9534f !important; }

/**/
.info a { color: #5bc0de !important; }

.success a { color: #5cb85c !important; }

.warning a { color: #f0ad4e !important; }

.alert a { color: #d9534f !important; }

/*---------------*/
/* VIDEO */
/*---------------*/
.video { height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden; }

.video.widescreen { padding-bottom: 56.34%; }

.video.vimeo { padding-top: 0; }

.video iframe, .video object, .video embed, .video video { top: 0; left: 0; width: 100%; height: 100%; position: absolute; }

/*---------------*/
/* CNIL COOKIE */
/*---------------*/
#cnil * { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

#cnil { background: rgba(38, 36, 32, 0.95); -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4); left: 0; overflow: hidden; padding: 20px 5%; position: fixed; bottom: 0; width: 100%; z-index: 999999; -webkit-transform: translate(0, 120%); -ms-transform: translate(0, 120%); transform: translate(0, 120%); -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

#cnil p { font-size: 1.4rem; color: #FFF; }

#cnil a { display: block; background: #333; color: #FFF; font-size: 1.2rem; text-transform: uppercase; margin: 10px; padding: 5px 10px; float: right; text-decoration: none; }

#cnil a:hover { color: #A7965D; }

#cnil a i { margin: 0 10px 0 0; }

#cnil a:hover i { margin: 0 20px 0 0; }

#cnil.show { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

/*---------------*/
/*BTN TOP*/
/*---------------*/
.ontop { background: rgba(0, 0, 0, 0.3); border-radius: 5px; line-height: 30px; height: 30px; width: 30px; display: none; position: fixed; bottom: 20px; right: 20px; text-align: center; color: #FFF; z-index: 10000; }

.ontop i { font-size: 1.6rem; }

.ontop:hover { color: #21cdec; background: rgba(0, 0, 0, 0.6); }

.ontop_showed { display: block; }

/* Core CSS */
/*---------------*/
/* !MENU GENERAL */
/*---------------*/
header { width: 100vw; height: auto; position: relative; z-index: 9000; text-align: center; margin: 36px auto 0 auto; padding: 24px 0 40px 0; }

#logo { position: relative; display: block; margin: auto; }

.home #logo, #logo a { background: url("/images/logo_light.svg") no-repeat 50% 50%/contain rgba(0, 0, 0, 0); text-indent: -999em; display: block; width: 163px; height: 78px; margin: 0 auto; opacity: 1; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.home #logo a { background: none; }

/**/
#menu * { -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

#menu > ul > li { list-style: none; display: block; vertical-align: top; text-align: left; }

#menu > ul > li > a { color: #212121; display: block; font-size: 2.2rem; text-align: left; letter-spacing: 0; font-family: "Playfair Display", serif; font-weight: 400; text-decoration: none; font-style: normal; text-align: left; }

/* 1st menu */
#menu ul.fst { position: fixed; top: 25vh; left: 0; padding: 29px 0 33px 0; z-index: 1; }

#menu ul.fst:after { content: ''; width: 7.5vw; height: 278px; background-color: #e2e1dB; position: absolute; top: 0; left: 0; z-index: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }

#menu ul.fst.anim:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); background-color: #F2F1EB; }

#menu ul.fst > li { padding: 0 0 0 5vw; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; -webkit-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; z-index: 10; position: relative; }

#menu ul.fst.anim li { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; }

#menu ul.fst > li > a { padding: 3px 0 3px 0; line-height: normal; position: relative; z-index: 1; }

#menu ul.fst > li > a:hover { letter-spacing: 1.5px; }

/* 2nd menu */
#menu ul.snd { position: fixed; top: 0; right: 0; height: auto; width: auto; z-index: 8000; height: auto; }

#menu ul.snd > li { list-style: none; display: inline-block; vertical-align: top; }

#menu ul.snd > li > a { background-color: #585030; color: #fff; display: block; font-size: 1.6rem; text-align: left; letter-spacing: 1px; font-family: "Oswald", sans-serif; font-weight: 400; line-height: 20px; padding: 0 16px 8px 5px; }

/*---------------*/
/* SUBMENU */
/*---------------*/
#menu > ul > li .submenu { height: 0; opacity: 0; overflow: hidden; position: relative; display: block; z-index: 1000; }

#menu > ul > li:hover .submenu { height: auto; min-height: 0; opacity: 1; overflow: visible; z-index: 0; }

#menu .submenu ul { display: block; padding: 5px; }

#menu .submenu li { list-style: none; display: block; }

#menu .submenu li a { color: #212121; display: inline-block; font-size: 1.8rem; text-align: left; letter-spacing: 0; font-family: "Playfair Display", serif; font-weight: 400; text-decoration: none; font-style: normal; text-align: left; }

#menu .submenu li a:hover { letter-spacing: .7px; }

#menu .submenu li a:before { content: ''; height: 1px; background-color: #212121; position: relative; display: inline-block; vertical-align: middle; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

#menu .submenu li a:hover:before { width: 10px; margin: 0 7px 0 0; }

/*---------------*/
/* !MENU MOBILE */
/*---------------*/
#toggle { color: #000; cursor: pointer; display: block; font-size: 3rem; height: 50px; width: 50px; z-index: 8000; position: fixed; padding: 15px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; opacity: 0; visibility: hidden; }

/**/
#toggle span { display: block; clear: both; height: 2px; background: #000; margin: 4px 0 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

#toggle span:nth-child(1) { width: 17px; }

#toggle span:nth-child(2) { width: 19px; }

#toggle span:nth-child(3) { width: 12px; }

#toggle:hover span:nth-child(1) { width: 32px; }

#toggle:hover span:nth-child(2) { width: 22px; }

#toggle:hover span:nth-child(3) { width: 16px; }

/* ouverture du menu deploy_h*/
.deploy_h #toggle { left: 60vw; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.deploy_h #toggle span:nth-child(1) { width: 20px !important; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }

.deploy_h #toggle span:nth-child(2) { width: 20px !important; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin: -3px 0 0; }

.deploy_h #toggle span:nth-child(3) { width: 0; }

/**/
[data-toggle="deploy_h"] #toggle { top: 14px; left: 2px; }

/* action du menu deploy_h*/
main, footer, #header_before { left: 0; position: relative; }

.deploy_h main, .deploy_h footer, .deploy_h header, .deploy_h #header_before, .deploy_h #toggle { left: 250px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

.deploy_h #menu { left: 0; }

.deploy_h main, .deploy_h #header_before, .deploy_h #logo a { -webkit-filter: blur(2px); filter: blur(2px); }

.deploy_h { overflow: hidden; position: fixed; }

#menu ul.fst > .withall > a:first-of-type { display: none; }

#menu > ul.fst > li .viewall { display: none; }

/*---------------*/
/* !MENU FIXED */
/*---------------*/
@media all and (min-width: 1025px) { .fixed #menu ul.fst { top: 100px; } }

/*----------------------*/
/* !MEDIA QUERIES MENU */
/*--------------------*/
@media all and (max-width: 1024px) { header { margin: 0 auto; }
  .home #logo, #logo a { width: 201px; height: 131px; max-width: 55%; }
  /* menu mobile classic */
  #toggle { visibility: visible; -webkit-animation: animToggle 1s forwards; animation: animToggle 1s forwards; background: none; }
  @-webkit-keyframes animToggle { 0% { opacity: 0;
      -webkit-transform: translate(-20px, -10px);
      transform: translate(-20px, -10px); }
    50% { opacity: 1; }
    100% { opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0); } }
  @keyframes animToggle { 0% { opacity: 0;
      -webkit-transform: translate(-20px, -10px);
      transform: translate(-20px, -10px); }
    50% { opacity: 1; }
    100% { opacity: 1;
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0); } }
  /**/
  #menu { background: #F2F1EB; -webkit-box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.1); box-shadow: 3px 0 5px -2px rgba(0, 0, 0, 0.1); left: -260px; margin: 0; position: fixed; top: 0; bottom: 0; width: 250px; overflow-y: auto; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 9000; }
  #menu > ul.fst { margin: 20px; width: 210px; bottom: auto; position: relative; top: 30px; -webkit-transform: none; -ms-transform: none; transform: none; }
  #menu ul.fst > li { padding: 0; }
  #menu > ul.fst > li > a { line-height: 40px; height: auto; }
  /**/
  #menu > ul > li .submenu { position: relative; }
  #menu li .submenu { position: relative; width: 200px; margin: 0; }
  #menu li:hover .submenu { padding: 0 0 10px 0; min-height: inherit; }
  #menu .submenu { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  #menu .submenu > li { padding: 0; margin: 0 0 0 10px; }
  #menu .submenu ul { margin: 0; }
  #menu .submenu ul li { border-left: none; }
  #menu .submenu li a { width: 180px; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
  #menu .submenu li a:hover { letter-spacing: normal; }
  #menu .submenu li a:hover:before { content: none; }
  /**/
  #menu ul.snd { top: 29px; }
  #menu > ul.fst > .withall > .fullurl { display: none; }
  #menu > ul.fst > .withall > a:first-of-type { display: inline-block; width: auto; }
  #menu > ul.fst > li:hover > a { display: inline-block; width: auto; }
  #menu > ul.fst > li:hover .viewall { display: inline-block; font-size: 1.3rem; float: right; } }

/*---------------*/
/* !FORMULAIRE */
/*---------------*/
fieldset { margin: 10px 0; border: none; }

legend { font-size: 1.6rem; padding: 0 10px; }

.rowElem { margin: 15px 0; position: relative; }

.radioElem, .checkboxElem, .selectElem { position: relative; }

input, textarea, select { display: inline-block; height: 42px; outline: none; font-size: 14px; vertical-align: top; width: 100%; padding: 0 0 0 36px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder { color: #666; opacity: 1; font-weight: 300; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder { color: #666; font-weight: 300; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder { color: #666; font-weight: 300; }

/* input */
input { background: #E7E4DA; border: 1px solid #E7E4DA; color: #212121; border-radius: 3px; }

input:hover { background: #E7E4DA; border: 1px solid #463F26; color: #463F26; border-radius: 5px; }

input:focus, textarea:focus { background: #E7E4DA; border: 1px solid #463F26; color: #212121; border-radius: 5px; }

input[disabled], textarea[disabled] { background: #CCC; border: 2px solid #CCC; color: #CCC; }

input[disabled]::-webkit-input-placeholder, textarea[disabled]::-webkit-input-placeholder { color: #CCC; }

input[disabled]::-moz-placeholder, textarea[disabled]::-moz-placeholder { color: #CCC; }

/* submit */
input[type="submit"] { background: #212121; border: 1px solid #212121; color: #FFF; border-radius: 5px; font-size: 1.4rem; text-shadow: 0 1px rgba(0, 0, 0, 0.08); padding: 0; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

input[type="submit"]:hover { background: #463F26; border: 1px solid #463F26; color: #FFF; border-radius: 3px; }

/* textarea */
textarea { background: #E7E4DA; border: 1px solid #E7E4DA; color: #212121; border-radius: 3px; height: 96px; line-height: 19px; padding: 10px 10px 10px 36px; resize: none; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

textarea:hover { background: #E7E4DA; border: 1px solid #463F26; color: #463F26; border-radius: 5px; }

textarea:focus { height: 120px; }

/* label */
label { font-size: 1.4rem; }

label i { font-size: 1.4rem !important; pointer-events: none; position: absolute; top: 14px; left: 14px; z-index: 4; color: #212121; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

label span { background: #463F26; color: #fff; border-radius: 3px; top: -8px; font-size: 1.1rem; font-weight: 500; left: 10px; max-height: 0; overflow: hidden; position: absolute; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

label.show-label span { max-height: 22px; padding: 0 10px; }

/* select */
select { background: #E7E4DA; color: #212121; border: 1px solid #E7E4DA; border-radius: 3px; display: block; margin: 0; outline: none; padding: 9px 10px; text-indent: 0.01px; -o-text-overflow: ""; text-overflow: ""; z-index: 10; }

.selectElem { position: relative; }

.selectElem:before { content: ""; pointer-events: none; position: absolute; z-index: 10; background: #E7E4DA; border-left: 1px solid #E7E4DA; bottom: 1px; right: 1px; top: 1px; width: 34px; }

.selectElem i { right: 10px; top: 10px; left: auto; font-size: 2rem !important; z-index: 12; }

.selectElem:hover i, .selectElem:focus i { color: #463F26; }

.selectElem:hover select { background: #E7E4DA; color: #463F26; border: 1px solid #463F26; border-radius: 5px; }

.selectElem option { padding: 0 5px; }

/* checkbox, radio */
input[type="radio"], input[type="checkbox"] { height: inherit; left: 0; opacity: 0; position: absolute; width: inherit; }

.radio, .checkbox { background: #FFF; border: 3px solid #E7E4DA; display: inline-block; height: 21px; margin: 0 2px 0 0; position: relative; top: 5px; width: 21px; max-height: inherit; left: 0; }

.checkbox:before, .radio:before { content: ""; display: none; }

input:checked + .checkbox:before, input:checked + .radio:before { display: block; }

.checkbox:before { border-color: #463F26; -webkit-border-image: none; -o-border-image: none; border-image: none; border-style: solid; border-width: 0 0 3px 3px; height: 6px; left: 4px; position: absolute; top: 3px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); width: 9px; }

input:checked + .checkbox, input:checked + .radio { border: 3px solid #463F26; }

.radio { border-radius: 20px; }

.radio:before { background: #463F26; border-radius: 10px; height: 7px; margin: 4px; width: 7px; }

input:hover + .checkbox, input:hover + .radio { border-color: #463F26; }

input:focus + .checkbox, input:focus + .radio { border-color: #463F26; }

input:focus + .radio:before { background: #FFF; }

input:focus + .checkbox:before { border-color: 1px solid #463F26; }

checkboxElem:hover label { color: #fff; }

/*file*/
.btnfile { height: 34px; line-height: 34px; padding: 0 16px; position: absolute; right: 4px; top: 4px; z-index: 10; background: #463F26; color: #FFF; border-radius: 3px; max-height: inherit; left: auto; }

input[type="file"] { bottom: 0; cursor: pointer; height: 100%; opacity: 0; padding: 8px 10px; position: absolute; right: 0; width: 100%; z-index: 11; }

.fileElem input[type="file"] + input[type="text"] { padding: 0 0 0 35px; }

.fileElem input[type="file"]:hover + input[type="text"] { border-color: #463F26; }

/*---------------*/
/* MODAL BOX*/
/*---------------*/
#modal_box * { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

#modal_box { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 10000; overflow: hidden; visibility: hidden; }

/**/
.modal_content { -webkit-backface-visibility: hidden; backface-visibility: hidden; height: auto; left: 50%; position: fixed; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); visibility: hidden; z-index: 2000; background: #00b3be; padding: 20px 40px; top: 50%; color: #FFF; text-align: center; }

.modal_content h3 { text-transform: uppercase; margin: 0 0 10px 0; color: #FFF; }

.modal_content a { display: block; padding: 5px 10px; background: #FFF; color: #00b3be; display: inline-block; margin: 5px 10px; font-size: 1.4rem; font-weight: 600; }

/**/
.modal_content a:hover { padding: 5px 20px; }

#modal_box.md_show { visibility: visible; }

.modal_content.md_cshow { visibility: visible; opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }

/*---------------*/
/* SEARCH SIMPLE */
/*---------------*/
.search_engine { position: fixed; top: 0; left: 0; min-height: 86px; width: 100%; background: #F7F6F2; padding: 0 5%; -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4); z-index: 10000; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%); }

.search_engine.search_showed { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

/**/
.search_engine input { border: none; background: none; padding: 0; font-size: 3rem; color: #463F26; border-bottom: 1px solid #57504B; font-weight: 300; height: 60px; border-radius: 0; }

.search_engine input::-moz-placeholder { color: #57504B; opacity: 1; font-weight: 300; }

.search_engine input:-ms-input-placeholder { color: #57504B; font-weight: 300; }

.search_engine input::-webkit-input-placeholder { color: #57504B; font-weight: 300; }

.search_engine input:focus, .search_engine input:hover { background: none; }

.search_engine > div { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; }

.search_engine > div > * { margin: 15px; }

.search_engine .rowElem { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; }

.multi .rowElem { -webkit-box-flex: 0; -ms-flex: 0 0 200px; flex: 0 0 200px; }

.multi .selectElem { margin: 12px 0 0; }

.multi .rowElem + .rowElem { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; }

.search_engine input[type="submit"] { -webkit-box-flex: 0; -ms-flex: 0 0 140px; flex: 0 0 140px; color: #57504B; }

.search_engine input[type="submit"]:hover { border: none; border-bottom: 1px solid #463F26; color: #463F26; }

/**/
.search_engine #search_engine_close { font-size: 2rem; width: 40px; display: block; line-height: 60px; }

.search_engine #search_engine_close i { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.search_engine #search_engine_close:hover i { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); color: #463F26; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; }

/**/
@media all and (max-width: 640px) { .search_engine > div { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .search_engine input { text-align: center; }
  .search_engine > div > * { margin: 15px 0; }
  .multi .rowElem { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; }
  .search_engine input[type="submit"] { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; line-height: 60px; } }

/*---------------*/
/* !ACCOUNT */
/*---------------*/
.form_authent { position: fixed; top: 0; left: 0; width: 100%; min-height: 86px; background: #F7F6F2; padding: 0 5%; -webkit-box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.4); z-index: 10000; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%); }

.form_showed { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

/**/
.form_authent > div { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; }

.form_authent > div > * { margin: 15px; }

.form_authent .rowElem { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; }

.form_authent input { border: none; background: none; padding: 0; font-size: 3rem; color: #463F26; border-bottom: 1px solid #57504B; font-weight: 300; height: 60px; border-radius: 0; }

.form_authent input::-moz-placeholder { color: #57504B; opacity: 1; font-weight: 300; }

.form_authent input:-ms-input-placeholder { color: #57504B; font-weight: 300; }

.form_authent input::-webkit-input-placeholder { color: #57504B; font-weight: 300; }

.form_authent input[type="submit"] { -webkit-box-flex: 0; -ms-flex: 0 0 140px; flex: 0 0 140px; color: #57504B; }

.form_authent input[type="submit"]:hover { border: none; border-bottom: 1px solid #463F26; color: #463F26; background: none; }

/**/
.form_authent #form_authent_close { font-size: 2rem; width: 40px; display: block; line-height: 60px; }

.form_authent #form_authent_close i { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.form_authent #form_authent_close:hover i { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); color: #463F26; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; }

/**/
.auth_btn { position: absolute; bottom: 0; right: 10%; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); margin: 0 !important; }

.form_authent #form_authent_create, .form_authent #form_authent_forgot { display: inline-block; font-size: 1.1rem; text-transform: uppercase; font-weight: 600; background: #B9A97B; color: #FFF; padding: 0 10px; line-height: 32px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-decoration: none; }

.form_authent #form_authent_create:hover, .form_authent #form_authent_forgot:hover { background: #262420; color: #FFF; }

/**/
.min_authent { background: #F7F6F2; height: 30px; line-height: 30px; position: fixed; top: 0; right: 160px; }

.min_authent a { white-space: nowrap; font-size: 1.1rem; height: 30px; line-height: 30px; padding: 0 10px; color: #FFF; text-transform: uppercase; font-weight: 500; display: block; float: left; }

.min_authent a:hover { background: #463F26; color: #FFF; }

#authent_btn.active > a { display: none; }

/**/
@media all and (max-width: 640px) { .form_authent > div { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .form_authent input { text-align: center; }
  .form_authent > div > * { margin: 15px 0; }
  .form_authent input[type="submit"] { -webkit-box-flex: 1; -ms-flex: 1 1 0px; flex: 1 1 0; line-height: 60px; } }

/*------------*/
/* !GESTION DE COMPTE */
/*------------*/
.gestion_compte { text-align: center; margin: 140px auto 200px; }

.gestion_compte * { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.gestion_compte h1 { font-size: 3.4rem; font-weight: 300; color: #FFFFFF; letter-spacing: 5px; text-transform: uppercase; text-align: center; position: relative; display: inline-block; }

.gestion_compte p { font-size: 1.6rem; padding: 5px 0; }

.gestion_compte aside, .gestion_compte section { display: inline-block; vertical-align: top; padding: 60px 10px; clear: none; }

.gestion_compte aside { padding: 120px 10px; }

.gestion_compte aside ul li { list-style: outside none none; margin: 5px 0; }

.gestion_compte aside ul li a, .gestion_compte .retour { background: #463F26; border-radius: 5px; color: #FFF; display: block; font-size: 1.4rem; font-weight: 500; padding: 0.5em 1em; text-decoration: none; }

.retour { clear: both; color: #000000; float: right; }

.gestion_compte aside ul li a:hover, .gestion_compte .retour:hover, .gestion_compte aside ul li.actif a { color: #000000; -webkit-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); background: #463F26; }

/**/
.gestion_compte * { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.gestion_compte section { width: 75%; max-width: 1000px; }

.gestion_compte section h4 { font-family: "Lato", sans-serif; margin: 10px 0; font-size: 16px; font-weight: 700; text-transform: uppercase; }

.gestion_compte section > div { min-height: 200px; margin: 10px; overflow: hidden; padding: 10px 20px; position: relative; }

.gestion_compte section > div a { background: #463F26; border: medium none; border-radius: 5px; -webkit-box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.6); box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.6); color: #000000; font-size: 1.2rem; font-weight: 600; padding: 5px 15px; text-transform: uppercase; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: inline-block; margin: 5px; clear: both; max-width: 100%; cursor: pointer; }

.gestion_compte section > div a:hover { background: #000000 none repeat scroll 0 0; -webkit-box-shadow: none; box-shadow: none; color: #463F26; }

.gestion_compte section > div > div { border: 1px solid rgba(82, 74, 68, 0.4); background: rgba(82, 74, 68, 0.4); border-radius: 5px; margin: 15px; padding: 10px; }

.gestion_compte section > div > div p:first-of-type { text-transform: uppercase; font-weight: 600; }

/**/
.gestion_compte form { text-align: left; }

.gestion_compte #tab_livraison { background: #f4f4f4 none repeat scroll 0 0; border: medium none; float: none; height: auto; margin: 20px; padding: 20px; width: auto; }

.gestion_compte #tab_livraison a { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; color: #000; }

.gestion_compte #tab_livraison a.mod_adr_liv:hover, .gestion_compte #tab_livraison a.del_adr_liv:hover { -webkit-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); }

.gestion_compte section.carte > div { float: none; height: auto; width: auto; }

.gestion_compte section.carte > div p { float: left; }

.gestion_compte section.carte > div p.solde { background: #f4f4f4 none repeat scroll 0 0; border-radius: 5px; clear: both; margin: 20px 0 0; padding: 10px 30px; }

.gestion_compte section.carte > div a { float: right; margin: 20px 0 0; padding: 10px; }

/**/
section.gc_adresses div > a { width: auto; margin: 10px 10px 10px 0; }

/**/
.table_res { border-collapse: separate; border-spacing: 1px; display: table; width: 100%; }

.table_res article { background: #f4f4f4 none repeat scroll 0 0; display: table-row; font-size: 1.6rem; text-align: left; }

.table_res article:nth-child(2n+1) { background: #eee none repeat scroll 0 0; }

.table_res article:hover { background: #ddd none repeat scroll 0 0; cursor: default; }

.table_res article > div { display: table-cell; padding: 5px 10px; vertical-align: middle; }

.table_res article a { color: #000; }

.table_res article a:hover { color: #00b3be; }

.table_res article img { padding: 0; vertical-align: middle; width: auto; }

.table_res article h3 { color: #000; display: inline; font-size: 16px; font-weight: 600; line-height: 16px; text-transform: uppercase; }

.table_res article.intitule > div { background: #000 none repeat scroll 0 0; color: #fff; font-size: 1.4rem; font-weight: 600; }

/*----------------------*/
/* MEDIA QUERIES ESHOP */
/*--------------------*/
@media all and (max-width: 480px) { .gestion_compte section { width: 95%; }
  .gestion_compte section > div { width: calc(100% - 20px); }
  .table_res article.intitule > div { display: none; }
  .table_res article > div { display: block; }
  #bloc_infosdebase li { list-style: outside none none; font-size: 1.6rem; }
  .actions { border: medium none !important; clear: both; text-align: left; }
  .gestion_compte section > div a { padding: 0 20px; }
  .gestion_compte section > div a { padding: 10px 15px; }
  .gestion_compte aside ul li a, .gestion_compte .retour { padding: 1em; }
  .gestion_compte aside, .gestion_compte section { padding: 20px 10px; } }

/*---------------*/
/* BREADCRUMBS */
/*---------------*/
.cd-breadcrumb, .cd-multi-steps { width: 90%; max-width: 768px; padding: 0.5em 1em; margin: 1em auto; background-color: #edeff0; border-radius: .25em; }

.cd-breadcrumb:after, .cd-multi-steps:after { content: ""; display: table; clear: both; }

.cd-breadcrumb li, .cd-multi-steps li { display: inline-block; float: left; margin: 0.5em 0; }

.cd-breadcrumb li::after, .cd-multi-steps li::after { /* this is the separator between items */ display: inline-block; content: '\00bb'; margin: 0 .6em; color: #959fa5; }

.cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after { /* hide separator after the last item */ display: none; }

.cd-breadcrumb li > *, .cd-multi-steps li > * { /* single step */ display: inline-block; font-size: 1.4rem; color: #2c3f4c; }

.cd-breadcrumb li.current > *, .cd-multi-steps li.current > * { /* selected step */ color: #463F26; }

.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover { /* steps already visited */ color: #463F26; }

.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after { /* replace the default arrow separator with a custom icon */ content: ''; height: 16px; width: 16px; background: url(/images/_sources/cd-custom-separator.svg) no-repeat center center; vertical-align: middle; }

.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before { /* add a custom icon before each item */ content: ''; display: inline-block; height: 20px; width: 20px; margin-right: .4em; margin-top: -2px; background: url(/images/_sources/cd-custom-icons-01.svg) no-repeat 0 0; vertical-align: middle; }

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before { /* change custom icon using image sprites */ background-position: -20px 0; }

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before { background-position: -40px 0; }

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before { background-position: -60px 0; }

.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before { /* change custom icon for the current item */ background-position: 0 -20px; }

.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before { background-position: -20px -20px; }

.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before { background-position: -40px -20px; }

.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before { background-position: -60px -20px; }

@media only screen and (min-width: 768px) { .cd-breadcrumb, .cd-multi-steps { padding: 0 1.2em; }
  .cd-breadcrumb li, .cd-multi-steps li { margin: 1.2em 0; }
  .cd-breadcrumb li::after, .cd-multi-steps li::after { margin: 0 1em; }
  .cd-breadcrumb li > *, .cd-multi-steps li > * { font-size: 1.4rem; } }

/* -------------------------------- 
Triangle breadcrumb
-------------------------------- */
@media only screen and (min-width: 768px) { .cd-breadcrumb.triangle { /* reset basic style */ background-color: transparent; padding: 0; }
  .cd-breadcrumb.triangle li { position: relative; padding: 0; margin: 4px 4px 4px 0; }
  .cd-breadcrumb.triangle li:last-of-type { margin-right: 0; }
  .cd-breadcrumb.triangle li > * { position: relative; padding: 1em .8em 1em 2.5em; color: #2c3f4c; background-color: #edeff0; /* the border color is used to style its ::after pseudo-element */ border-color: #edeff0; }
  .cd-breadcrumb.triangle li.current > * { /* selected step */ color: #ffffff; background-color: #463F26; border-color: #463F26; }
  .cd-breadcrumb.triangle li:first-of-type > * { padding-left: 1.6em; border-radius: .25em 0 0 .25em; }
  .cd-breadcrumb.triangle li:last-of-type > * { padding-right: 1.6em; border-radius: 0 .25em .25em 0; }
  .no-touch .cd-breadcrumb.triangle a:hover { /* steps already visited */ color: #ffffff; background-color: #2c3f4c; border-color: #2c3f4c; }
  .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after { /*  li > *::after is the colored triangle after each item li::after is the white separator between two items */ content: ''; position: absolute; top: 0; left: 100%; content: ''; height: 0; width: 0; /* 48px is the height of the <a> element */ border: 24px solid transparent; border-right-width: 0; border-left-width: 20px; }
  .cd-breadcrumb.triangle li::after { /* this is the white separator between two items */ z-index: 1; -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -ms-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); border-left-color: #ffffff; /* reset style */ margin: 0; }
  .cd-breadcrumb.triangle li > *::after { /* this is the colored triangle after each element */ z-index: 2; border-left-color: inherit; }
  .cd-breadcrumb.triangle li:last-of-type::after, .cd-breadcrumb.triangle li:last-of-type > *::after { /* hide the triangle after the last step */ display: none; }
  .cd-breadcrumb.triangle.custom-separator li::after { /* reset style */ background-image: none; }
  .cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after { /* 50px is the height of the <a> element */ border-top-width: 25px; border-bottom-width: 25px; }
  @-moz-document url-prefix() { .cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after { /* fix a bug on Firefix - tooth edge on css triangle */ border-left-style: dashed; } } }

/* -------------------------------- 
Custom icons hover effects - breadcrumb
-------------------------------- */
@media only screen and (min-width: 768px) { .no-touch .cd-breadcrumb.triangle.custom-icons li:first-of-type a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:first-of-type em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:first-of-type em::before { /* change custom icon using image sprites - hover effect or current item */ background-position: 0 -40px; }
  .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(2) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(2) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em::before { background-position: -20px -40px; }
  .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(3) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(3) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em::before { background-position: -40px -40px; }
  .no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(4) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(4) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em::before { background-position: -60px -40px; } }

/*---------------*/
/* PAGINATION */
/*---------------*/
.paging { text-align: center; }

.pagine { width: 90%; max-width: 768px; margin: 2em auto 4em; text-align: center; }

.pagine li { display: none; margin: 0 .2em; }

/* hide numbers on small devices */
.pagine li.button { display: inline-block; }

/* make sure prev next buttons are visible */
.pagine a, .pagine span { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .3em .6em; font-size: 1.6rem; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.pagine a { border: 1px solid #e6e6e6; border-radius: 0.25em; color: #000000; }

.pagine a:hover { background-color: #463F26; border: 1px solid #463F26; }

.pagine a:active { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }

/* click effect */
.pagine a.disabled { color: rgba(46, 64, 87, 0.4); pointer-events: none; }

/* button disabled */
.pagine a.disabled::before, .pagine a.disabled::after { opacity: .4; }

.pagine .button:first-of-type a::before { content: '\00ab  '; }

.pagine .button:last-of-type a::after { content: ' \00bb'; }

.pagine .active a { background-color: #463F26; border-color: #463F26; color: #000000; pointer-events: none; }

/* selected number */
@media only screen and (min-width: 768px) { .pagine li { display: inline-block; } }

@media only screen and (min-width: 1170px) { .pagine { margin: 4em auto 8em; } }

/* -------------------------------- 
No space - remove distance between list items
-------------------------------- */
.pagine.no-space { width: auto; max-width: none; display: inline-block; border-radius: 0.25em; border: 1px solid #e6e6e6; }

.pagine.no-space:after { content: ""; display: table; clear: both; }

.pagine.no-space li { margin: 0; float: left; border-right: 1px solid #e6e6e6; }

.pagine.no-space li:last-of-type { border-right: none; }

.pagine.no-space a, .pagine.no-space span { float: left; border-radius: 0; padding: .8em 1em; border: none; }

.pagine.no-space li:first-of-type a { border-radius: 0.25em 0 0 0.25em; }

.pagine.no-space li:last-of-type a { border-radius: 0 0.25em 0.25em 0; }

/* -------------------------------- 
move buttons - move prev and next buttons to the sides
-------------------------------- */
.pagine.move-buttons:after { content: ""; display: table; clear: both; }

.pagine.move-buttons .button:first-of-type { float: left; }

.pagine.move-buttons .button:last-of-type { float: right; }

.pagine.no-space.move-buttons { width: 90%; max-width: 768px; display: block; overflow: hidden; }

.pagine.no-space.move-buttons li { float: none; border: none; }

.pagine.no-space.move-buttons a, .pagine.no-space.move-buttons span { float: none; }

/* -------------------------------- 
custom icons - customize the small arrow inside the next and prev buttons 
-------------------------------- */
.pagine.custom-icons .button a { position: relative; }

.pagine.custom-icons .button:first-of-type a { padding-left: 2.4em; }

.pagine.custom-icons .button:last-of-type a { padding-right: 2.4em; }

.pagine.custom-icons .button:first-of-type a::before, .pagine.custom-icons .button:last-of-type a::after { content: ''; position: absolute; display: inline-block; /* set size for custom icons */ width: 16px; height: 16px; top: 50%; /* set margin-top = icon height/2 */ margin-top: -8px; background: transparent url("/images/_sources/cd-icon-arrow-1.svg") no-repeat center center; }

.pagine.custom-icons .button:first-of-type a::before { left: .8em; }

.pagine.custom-icons .button:last-of-type a::after { right: .8em; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

/* -------------------------------- 
custom buttons - replace prev and next buttons text with a custom icon 
-------------------------------- */
.pagine.custom-buttons a, .pagine.custom-buttons span { vertical-align: middle; }

.pagine.custom-buttons .button a { /* set custom width */ width: 40px; /* image replacement */ overflow: hidden; white-space: nowrap; text-indent: 100%; color: transparent; background-image: url("/images/_sources/cd-icon-arrow-2.svg"); background-repeat: no-repeat; background-position: center center; }

.pagine.custom-buttons .button:last-of-type a { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }

.no-touch .pagine.custom-buttons .button:last-of-type a:active { -webkit-transform: scale(0.9) rotate(180deg); -ms-transform: scale(0.9) rotate(180deg); transform: scale(0.9) rotate(180deg); }

.pagine.no-space.custom-buttons .button:last-of-type a { border-radius: 0.25em 0 0 0.25em; }

/* -------------------------------- 
animated buttons - animate the text inside prev and next buttons 
-------------------------------- */
.pagine.animated-buttons a, .pagine.animated-buttons span { padding: 0 1.4em; height: 50px; line-height: 50px; overflow: hidden; }

.pagine.animated-buttons .button a { position: relative; padding: 0 2em; }

.pagine.animated-buttons .button:first-of-type a::before, .pagine.animated-buttons .button:last-of-type a::after { left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); right: auto; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.pagine.animated-buttons .button:last-of-type a::after { -webkit-transform: translateX(-50%) rotate(180deg); -ms-transform: translateX(-50%) rotate(180deg); transform: translateX(-50%) rotate(180deg); }

.pagine.animated-buttons i { display: block; height: 100%; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; -o-transition: transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; }

.no-touch .pagine.animated-buttons .button a:hover i { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

.no-touch .pagine.animated-buttons .button:first-of-type a:hover::before { -webkit-transform: translateX(-50%) translateY(-50px); -ms-transform: translateX(-50%) translateY(-50px); transform: translateX(-50%) translateY(-50px); }

.no-touch .pagine.animated-buttons .button:last-of-type a:hover::after { -webkit-transform: translateX(-50%) rotate(180deg) translateY(50px); -ms-transform: translateX(-50%) rotate(180deg) translateY(50px); transform: translateX(-50%) rotate(180deg) translateY(50px); }

/*---------------*/
/* !TOOLBOX */
/*---------------*/
.toolbox { height: 34px; margin: 1%; }

/**/
.toolbox .nb_results { float: left; line-height: 34px; }

.toolbox .nb_results p { color: #535D6A; font-size: 1.4rem; font-weight: 600; margin: 0; }

/* !VUES LiSTING */
.viewBy { float: right; line-height: 34px; }

.viewBy p { float: left; color: #535D6A; font-weight: 600; margin: 0; }

.viewBy #viewby_maps { border: 2px solid #FFF; color: #FFF; line-height: 26px; padding: 0 10px; font-weight: 600; font-size: 1.4rem; }

.viewBy #viewby_maps i { margin: 0 5px 0 0; }

.viewBy #viewby_maps:hover { background: #FFF; color: #000000; }

.viewBy a { padding: 0 10px; font-size: 2.2rem; color: #A7965D; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; cursor: pointer; }

.viewBy a:hover { color: #535D6A; }

.viewBy a.on { color: #535D6A; }

/* !TRIER PAR */
.sortBy { border: 1px solid green; float: right; }

.sbHolder { display: inline-block; float: left; font-size: 12px; font-family: "Playfair Display", serif; font-weight: normal; height: 34px; line-height: 34px; position: relative; text-align: left; min-width: 158px; }

.sbHolder p { float: left; font-size: 11px; color: #999; padding: 0 0 0 7px; text-transform: capitalize; margin: 0; }

.sbSelector { float: right; display: block; overflow: hidden; width: 95px; color: #333; }

.sbToggle { background: url("//images/sbholder/sbtoggle.png") center center no-repeat; display: block; width: 27px; height: 34px; float: right; border-left: 1px solid #E7E7E7; margin: 0; }

.sbSelector:hover .sbToggle { background: url("//images/sbholder/sbtoggle_hover.png") center center no-repeat; }

.sbToggleOpen { background: url("//images/sbholder/sbtoggle_hover.png") center center no-repeat; }

.sbToggleOpen:hover { background: url("//images/sbholder/sbtoggle.png") center center no-repeat; }

.sbHolder:hover .sbOptions { display: block; }

.sbOptions { display: none; background-color: #FFF; border: 1px solid #E7E7E7; color: #6D6C67; left: -1px; list-style: none; margin: 0; overflow-y: auto; padding: 0; position: absolute; top: 100%; min-width: 158px; z-index: 15; -webkit-box-shadow: 0 0 4px 0 #e1e1e1; box-shadow: 0 0 4px 0 #e1e1e1; }

.sbOptions a { display: block; padding: 0 5px; color: #333; }

.sbOptions a:hover { background: #F9F9F9; }

/**/
.set { border: 1px solid #E7E7E7; height: 34px; display: block; width: 34px; float: right; margin: 0 0 0 5px; -webkit-box-shadow: 0 0 4px 0 #e1e1e1; box-shadow: 0 0 4px 0 #e1e1e1; }

.ascending { background: #FFF url("//images/sbholder/sb_ascending.png") center center no-repeat; }

.descending { background: #FFF url("//images/sbholder/sb_descending.png") center center no-repeat; }

/**/
@media all and (max-width: 800px) { .toolbox > div { width: 90%; } }

@media all and (max-width: 480px) { .toolbox { height: auto; }
  .toolbox > div { text-align: center; }
  .viewBy, .toolbox .nb_results { float: none; } }

/*---------------*/
/* TABULATIONS */
/*---------------*/
nav.gammes, nav.details_boat { width: 100%; background: #000000; position: relative; z-index: 2000; overflow: hidden; }

.tabs_nav { margin: 0 auto; text-align: center; }

.tabs_nav li:first-child { line-height: 62px; padding: 0 40px; margin: 0 3% 0 0; position: relative; font-size: 2.4rem; }

.tabs_nav li:first-child:after { content: ''; height: 100%; width: 1px; background: #FFF; position: absolute; top: 0; right: 0; -webkit-transform: skew(-20deg); -ms-transform: skew(-20deg); transform: skew(-20deg); }

.tabs_nav li { list-style: none; display: inline-block; font-size: 2rem; font-weight: 300; color: #FFF; }

.tabs_nav li a { display: block; line-height: 62px; padding: 0 20px; text-transform: uppercase; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; color: rgba(255, 255, 255, 0.5); position: relative; }

.tabs_nav li.selected a, .tabs_nav li:hover a { color: white; }

.tabs_nav li a:before, .tabs_nav li a:after { content: ''; position: absolute; left: 50%; height: 20px; width: 1px; background: #FFF; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.tabs_nav li a:before { top: 0; -webkit-transform: rotate(20deg) translate(10px, -150%); -ms-transform: rotate(20deg) translate(10px, -150%); transform: rotate(20deg) translate(10px, -150%); }

.tabs_nav li a:after { bottom: 0; -webkit-transform: rotate(20deg) translate(-4px, 150%); -ms-transform: rotate(20deg) translate(-4px, 150%); transform: rotate(20deg) translate(-4px, 150%); }

.tabs_nav li a:hover:before { background: #FFF; -webkit-transform: rotate(20deg) translate(10px, -10px); -ms-transform: rotate(20deg) translate(10px, -10px); transform: rotate(20deg) translate(10px, -10px); }

.tabs_nav li a:hover:after { background: #FFF; -webkit-transform: rotate(20deg) translate(-4px, 7px); -ms-transform: rotate(20deg) translate(-4px, 7px); transform: rotate(20deg) translate(-4px, 7px); }

/**/
nav.details_boat .tabs_nav a { text-transform: none; letter-spacing: 1px; }

/**/
/* Modules */
/*---------------*/
/* !SLIDER Home */
/*---------------*/
.slider { position: relative; margin: 10px 0 0 30vw; padding: 0; max-width: 690px; width: 80%; z-index: 10; opacity: 0; -webkit-transition: all 2s; -o-transition: all 2s; transition: all 2s; -webkit-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; }

.slider::after { clear: both; content: ""; display: table; }

.slider.anim { opacity: 1; }

.cycle-slideshow { position: relative; overflow: hidden; }

.slide { width: 100%; }

.slider .slide img { width: 100%; margin: 0; }

/**/
.projet_details .slider { -webkit-box-flex: 1; -ms-flex: 1 1 70%; flex: 1 1 70%; margin: 0 0 0 10px; max-width: 715px; max-height: 540px; }

/**/
@media all and (max-width: 1024px) { .slider { margin: 10px auto 0 auto; width: 90%; }
  .projet_details .slider { margin: 0; } }

@media all and (max-width: 800px) { .slider { width: calc(100% - 100px); }
  .projet_details .slider { width: 100%; max-width: 100%; } }

@media all and (max-width: 480px) { .slider { width: calc(100% - 50px); } }

.news { position: relative; margin: 10px 0 0 25vw; padding: 0; width: 73%; max-width: 100%; z-index: 10; display: block; }

.news_listing { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: calc(90% - 190px) !important; margin: 0 auto; }

.news_listing article { display: inline-block; width: calc(33% - 22px); max-width: 300px; min-width: 230px; border: 1px solid #E9E9E9; text-align: center; margin: 10px; vertical-align: top; }

.news_listing article img { width: 100%; margin: 0 0 20px 0; }

.news_listing article .category { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; padding: 0px 10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0; background: #000000; color: #FFF; display: inline-block; }

.news_listing article h2 { font-size: inherit; letter-spacing: 0; padding: 0 20px; margin: 10px 0 0; line-height: 2rem !important; }

.news_listing article h2 a { font-size: 1.8rem; font-weight: 700; text-transform: uppercase; color: #000000; }

.news_listing article h2 a:hover { color: #000000; }

.news article time { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: #666; padding: 5px; display: block; padding: 0 20px; }

.news_listing article > div { margin: 10px 0; padding: 0 25px; }

.news_listing article > div p { color: #666; font-size: 1.2rem; line-height: 1.2rem; font-weight: 500; }

.news_listing article .readmore { color: #000; text-align: center; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; display: inline-block; padding: 5px 21px; margin: 20px; }

.news article .readmore:hover { background: #000000; color: #FFF; }

/**/
.news aside { display: inline-block; vertical-align: top; width: 240px; margin: 10px; }

.news aside p.tit { font-size: 1.6rem; font-weight: 900; color: #000000; position: relative; margin: 30px 0; letter-spacing: normal; }

.news aside ul { margin: 0 auto; }

.news aside li { list-style: none; }

.news aside li a { font-size: 1.2rem; font-weight: 600; color: #000000; text-align: left; display: block; padding: 5px; letter-spacing: 1px; }

.news aside li a:hover { padding: 5px 5px 5px 10px; color: #000000; }

.news aside .follow { margin: 0 0 50px 0; }

.news aside .follow a { font-size: 2rem; color: #000000; padding: 2px 5px; border-radius: 5px; width: 30px; display: inline-block; }

.news aside .follow a:hover { color: #fff; background: #000000; }

/**/
.news .news_details h1 { font-size: 2.8rem; line-height: 3rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center; margin: 10px 0; width: 100%; }

.news .news_details .category { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; padding: 0px 10px; margin: 10px 0 0; background: #000000; color: #FFF; display: inline-block; }

.news .news_details .content { text-align: left; }

.news .rtn_sharing a { color: #000; }

.news .social_sharing { float: right; }

.illustration { width: 80%; margin: 0 auto 20px; max-width: 1180px; }

.illustration img { max-width: 100%; }

/*----------------------*/
/* MEDIA QUERIES PRODUITS */
/*--------------------*/
@media all and (max-width: 1024px) { .news { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .news .news_listing { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; width: 100% !important; }
  .news_listing article { width: calc(50% - 22px); max-width: 300px; min-width: 0; }
  .news aside { margin: 30px auto; width: 90%; text-align: center; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
  .news aside p.tit { margin: 15px 0; text-align: center; }
  .news aside li a { text-align: center; }
  .news aside ul, .news aside .follow { overflow: hidden; margin: auto; text-align: center; }
  .news aside .byCat, .news aside .follow { width: 49%; display: inline-block; vertical-align: top; }
  .news aside li, .news aside .follow a { line-height: 0; height: 0; overflow: hidden; padding: 0; }
  .news aside .byCat:hover li { line-height: 40px; height: 40px; }
  .news aside .follow:hover a { line-height: 40px; height: 40px; padding: 2px 5px; } }

@media all and (max-width: 640px) { .news_listing article { width: 90%; max-width: 300px; min-width: 0; margin: 10px 0; } }

/*---------------*/
/* ALBUMS PHOTOS */
/*---------------*/
#albumphoto_listing figure { cursor: pointer; float: left; height: auto; margin: 10px 1%; min-width: 320px; max-height: 360px; max-width: 480px; overflow: hidden; position: relative; text-align: center; width: 48%; }

#albumphoto_listing figure img { display: block; opacity: 0.8; position: relative; }

#albumphoto_listing figure figcaption { -webkit-backface-visibility: hidden; backface-visibility: hidden; color: #fff; font-size: 1.25em; text-transform: uppercase; padding: 2em; }

#albumphoto_listing figure figcaption::before, #albumphoto_listing figure figcaption::after { pointer-events: none; }

#albumphoto_listing figure figcaption, #albumphoto_listing figure figcaption > a { height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

#albumphoto_listing figure figcaption > a { font-size: 0; opacity: 0; text-indent: 200%; white-space: nowrap; z-index: 1000; }

#albumphoto_listing figure h3 { font-weight: 800; word-spacing: -0.15em; font-size: 1em; }

#albumphoto_listing figure h3 span { font-weight: 300; }

#albumphoto_listing figure h3, #albumphoto_listing figure p { margin: 0; }

#albumphoto_listing figure p { font-size: 68.5%; letter-spacing: 1px; color: #FFF; }

#albumphoto_listing ul li { list-style: none; }

#albumphoto_listing > * { border-sizing: border-box; }

/*---------------*/
/***** Lexi *****/
/*---------------*/
figure.effect-lexi { background: -webkit-linear-gradient(-45deg, #000 0%, #fff 100%); background: -webkit-linear-gradient(135deg, #000 0%, #fff 100%); background: -o-linear-gradient(135deg, #000 0%, #fff 100%); background: linear-gradient(-45deg, #000 0%, #fff 100%); }

figure.effect-lexi img { margin: -10px 0 0 -10px; max-width: none; width: -webkit-calc(100% + 10px); width: calc(100% + 10px); opacity: 0.9; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(10px, 10px, 0); transform: translate3d(10px, 10px, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

figure.effect-lexi figcaption::before, figure.effect-lexi p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-lexi figcaption::before { position: absolute; right: -100px; bottom: -100px; width: 300px; height: 300px; border: 2px solid #fff; border-radius: 50%; -webkit-box-shadow: 0 0 0 900px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 900px rgba(255, 255, 255, 0.2); content: ''; opacity: 0; -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }

figure.effect-lexi:hover img { opacity: 0.6; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-lexi h3 { text-align: left; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(5px, 5px, 0); transform: translate3d(5px, 5px, 0); }

figure.effect-lexi p { position: absolute; right: 0; bottom: 0; padding: 0 1.5em 1.5em 0; width: 140px; text-align: right; opacity: 0; -webkit-transform: translate3d(20px, 20px, 0); transform: translate3d(20px, 20px, 0); }

figure.effect-lexi:hover figcaption::before { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

figure.effect-lexi:hover h3, figure.effect-lexi:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Julia *****/
/*---------------*/
figure.effect-julia { background: #2f3238; }

figure.effect-julia img { max-width: none; height: 400px; -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; -o-transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

figure.effect-julia figcaption { text-align: left; }

figure.effect-julia h3 { position: relative; padding: 0.5em 0; }

figure.effect-julia p { display: inline-block; margin: 0 0 0.25em; padding: 0.4em 1em; background: rgba(255, 255, 255, 0.9); color: #2f3238; text-transform: none; font-weight: 500; font-size: 75%; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-360px, 0, 0); transform: translate3d(-360px, 0, 0); }

figure.effect-julia p:first-child { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; }

figure.effect-julia p:nth-of-type(2) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }

figure.effect-julia p:nth-of-type(3) { -webkit-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; }

figure.effect-julia:hover p:first-child { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; }

figure.effect-julia:hover p:nth-of-type(2) { -webkit-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; }

figure.effect-julia:hover p:nth-of-type(3) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }

figure.effect-julia:hover img { opacity: 0.4; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }

figure.effect-julia:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*-----------------*/
/***** Goliath *****/
/*-----------------*/
figure.effect-goliath { background: #df4e4e; }

figure.effect-goliath img, figure.effect-goliath h3 { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-goliath img { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

figure.effect-goliath h3, figure.effect-goliath p { position: absolute; bottom: 0; left: 0; padding: 30px; }

figure.effect-goliath p { text-transform: none; font-size: 90%; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }

figure.effect-goliath:hover img { -webkit-transform: translate3d(0, -80px, 0); transform: translate3d(0, -80px, 0); }

figure.effect-goliath:hover h3 { -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); }

figure.effect-goliath:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*-----------------*/
/***** Hera *****/
/*-----------------*/
figure.effect-hera { background: #303fa9; }

figure.effect-hera h3 { font-size: 158.75%; }

figure.effect-hera h3, figure.effect-hera p { position: absolute; top: 50%; left: 50%; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; }

figure.effect-hera figcaption::before { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; border: 2px solid #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(0, 0, 1); -webkit-transform-origin: 50%; -ms-transform-origin: 50%; transform-origin: 50%; }

figure.effect-hera p { width: 100px; text-transform: none; font-size: 121%; line-height: 2; }

figure.effect-hera p a { color: #fff; }

figure.effect-hera p a:hover, figure.effect-hera p a:focus { opacity: 0.6; }

figure.effect-hera p a i { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-hera p a:first-child i { -webkit-transform: translate3d(-60px, -60px, 0); transform: translate3d(-60px, -60px, 0); }

figure.effect-hera p a:nth-child(2) i { -webkit-transform: translate3d(60px, -60px, 0); transform: translate3d(60px, -60px, 0); }

figure.effect-hera p a:nth-child(3) i { -webkit-transform: translate3d(-60px, 60px, 0); transform: translate3d(-60px, 60px, 0); }

figure.effect-hera p a:nth-child(4) i { -webkit-transform: translate3d(60px, 60px, 0); transform: translate3d(60px, 60px, 0); }

figure.effect-hera:hover figcaption::before { opacity: 1; -webkit-transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, -45deg) scale3d(1, 1, 1); }

figure.effect-hera:hover h3 { opacity: 0; -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1); transform: translate3d(-50%, -50%, 0) scale3d(0.8, 0.8, 1); }

figure.effect-hera:hover p i:empty { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* just because it's stronger than nth-child */ opacity: 1; }

/*-----------------*/
/***** Winston *****/
/*-----------------*/
figure.effect-winston { background: #162633; text-align: left; }

figure.effect-winston img { -webkit-transition: opacity 0.45s; -o-transition: opacity 0.45s; transition: opacity 0.45s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

figure.effect-winston figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/triangle.svg) no-repeat center center; background-size: 100% 100%; content: ''; -webkit-transition: opacity 0.45s, -webkit-transform 0.45s; transition: opacity 0.45s, -webkit-transform 0.45s; -o-transition: opacity 0.45s, transform 0.45s; transition: opacity 0.45s, transform 0.45s; transition: opacity 0.45s, transform 0.45s, -webkit-transform 0.45s; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); -webkit-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; }

figure.effect-winston h3 { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }

figure.effect-winston p { position: absolute; right: 0; bottom: 0; padding: 0 1.5em 7% 0; }

figure.effect-winston a { margin: 0 10px; color: #5d504f; font-size: 170%; }

figure.effect-winston a:hover, figure.effect-winston a:focus { color: #cc6055; }

figure.effect-winston p a i { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }

figure.effect-winston:hover img { opacity: 0.6; }

figure.effect-winston:hover h3 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-winston:hover figcaption::before { opacity: 0.7; -webkit-transform: rotate3d(0, 0, 1, 20deg); transform: rotate3d(0, 0, 1, 20deg); }

figure.effect-winston:hover p i { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-winston:hover p a:nth-child(3) i { -webkit-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; }

figure.effect-winston:hover p a:nth-child(2) i { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }

figure.effect-winston:hover p a:first-child i { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; }

/*-----------------*/
/***** Selena *****/
/*-----------------*/
figure.effect-selena { background: #fff; }

figure.effect-selena img { opacity: 0.95; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }

figure.effect-selena:hover img { -webkit-transform: scale3d(0.95, 0.95, 1); transform: scale3d(0.95, 0.95, 1); }

figure.effect-selena h3 { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }

figure.effect-selena p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 90deg); transform: perspective(1000px) rotate3d(1, 0, 0, 90deg); -webkit-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; }

figure.effect-selena:hover h3 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-selena:hover p { opacity: 1; -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 0); transform: perspective(1000px) rotate3d(1, 0, 0, 0); }

/*-----------------*/
/***** Terry *****/
/*-----------------*/
figure.effect-terry { background: #34495e; }

figure.effect-terry figcaption { padding: 1em; }

figure.effect-terry figcaption::before, figure.effect-terry figcaption::after { position: absolute; width: 200%; height: 200%; border-style: solid; border-color: #101010; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-terry figcaption::before { right: 0; bottom: 0; border-width: 0 70px 60px 0; -webkit-transform: translate3d(70px, 60px, 0); transform: translate3d(70px, 60px, 0); }

figure.effect-terry figcaption::after { top: 0; left: 0; border-width: 15px 0 0 15px; -webkit-transform: translate3d(-15px, -15px, 0); transform: translate3d(-15px, -15px, 0); }

figure.effect-terry img, figure.effect-terry p a { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-terry img { opacity: 0.85; }

figure.effect-terry h3 { position: absolute; bottom: 0; left: 0; padding: 0.4em 10px; width: 50%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }

@media screen and (max-width: 920px) { figure.effect-terry h3 { padding: 0.75em 10px; font-size: 120%; } }

figure.effect-terry p { float: right; clear: both; text-align: left; text-transform: none; font-size: 111%; }

figure.effect-terry p a { display: block; margin-bottom: 1em; color: #fff; opacity: 0; -webkit-transform: translate3d(90px, 0, 0); transform: translate3d(90px, 0, 0); }

figure.effect-terry p a:hover, figure.effect-terry p a:focus { color: #f3cf3f; }

figure.effect-terry:hover figcaption::before, figure.effect-terry:hover figcaption::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-terry:hover img { opacity: 0.6; }

figure.effect-terry:hover h3, figure.effect-terry:hover p a { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-terry:hover p a { opacity: 1; }

figure.effect-terry:hover p a:first-child { -webkit-transition-delay: 0.025s; -o-transition-delay: 0.025s; transition-delay: 0.025s; }

figure.effect-terry:hover p a:nth-child(2) { -webkit-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; }

figure.effect-terry:hover p a:nth-child(3) { -webkit-transition-delay: 0.075s; -o-transition-delay: 0.075s; transition-delay: 0.075s; }

figure.effect-terry:hover p a:nth-child(4) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }

/*-----------------*/
/***** Phoebe *****/
/*-----------------*/
figure.effect-phoebe { background: #675983; }

figure.effect-phoebe img { opacity: 0.85; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-phoebe:hover img { opacity: 0.6; }

figure.effect-phoebe figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/triangle2.svg) no-repeat center center; background-size: 100% 100%; content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(5, 2.5, 1); transform: scale3d(5, 2.5, 1); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }

figure.effect-phoebe:hover figcaption::before { opacity: 0.6; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

figure.effect-phoebe h3 { margin-top: 1em; -webkit-transition: transform 0.35s; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }

figure.effect-phoebe:hover h3 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-phoebe p a { color: #fff; font-size: 140%; opacity: 0; position: relative; display: inline-block; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-phoebe p a:first-child { -webkit-transform: translate3d(-60px, -60px, 0); transform: translate3d(-60px, -60px, 0); }

figure.effect-phoebe p a:nth-child(2) { -webkit-transform: translate3d(0, 60px, 0); transform: translate3d(0, 60px, 0); }

figure.effect-phoebe p a:nth-child(3) { -webkit-transform: translate3d(60px, -60px, 0); transform: translate3d(60px, -60px, 0); }

figure.effect-phoebe:hover p a { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*-----------------*/
/***** Apollo *****/
/*-----------------*/
figure.effect-apollo { background: #3498db; }

figure.effect-apollo img { opacity: 0.95; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }

figure.effect-apollo figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: -webkit-transform 0.6s; -o-transition: transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); }

figure.effect-apollo p { position: absolute; right: 0; bottom: 0; margin: 3em; padding: 0 1em; max-width: 150px; border-right: 4px solid #fff; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-apollo h3 { text-align: left; }

figure.effect-apollo:hover img { opacity: 0.6; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

figure.effect-apollo:hover figcaption::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); }

figure.effect-apollo:hover p { opacity: 1; -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }

/*-----------------*/
/***** Kira *****/
/*-----------------*/
figure.effect-kira { background: #fff; text-align: left; }

figure.effect-kira img { -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-kira figcaption { z-index: 1; }

figure.effect-kira p { padding: 2.25em 0.5em; font-weight: 600; font-size: 100%; line-height: 1.5; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }

figure.effect-kira p a { margin: 0 0.5em; color: #101010; }

figure.effect-kira p a:hover, figure.effect-kira p a:focus { opacity: 0.6; }

figure.effect-kira figcaption::before { position: absolute; top: 0; right: 2em; left: 2em; z-index: -1; height: 3.5em; background: #fff; content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 4em, 0) scale3d(1, 0.023, 1); transform: translate3d(0, 4em, 0) scale3d(1, 0.023, 1); -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; }

figure.effect-kira:hover img { opacity: 0.5; }

figure.effect-kira:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-kira:hover figcaption::before { opacity: 0.7; -webkit-transform: translate3d(0, 5em, 0) scale3d(1, 1, 1); transform: translate3d(0, 5em, 0) scale3d(1, 1, 1); }

/*-----------------*/
/***** Steve *****/
/*-----------------*/
figure.effect-steve { z-index: auto; overflow: visible; background: #000; }

figure.effect-steve:before, figure.effect-steve h3:before { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #000; content: ''; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-steve:before { -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.8); box-shadow: 0 3px 30px rgba(0, 0, 0, 0.8); opacity: 0; }

figure.effect-steve figcaption { z-index: 1; }

figure.effect-steve img { opacity: 1; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: perspective(1000px) translate3d(0, 0, 0); transform: perspective(1000px) translate3d(0, 0, 0); }

figure.effect-steve h3, figure.effect-steve p { background: #fff; color: #2d434e; }

figure.effect-steve h3 { position: relative; margin-top: 2em; padding: 0.25em; }

figure.effect-steve h3:before { -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }

figure.effect-steve p { margin-top: 1em; padding: 0.5em; font-weight: 800; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1); }

figure.effect-steve:hover:before { opacity: 1; }

figure.effect-steve:hover img { -webkit-transform: perspective(1000px) translate3d(0, 0, 21px); transform: perspective(1000px) translate3d(0, 0, 21px); }

figure.effect-steve:hover h3:before { opacity: 0; }

figure.effect-steve:hover p { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/*-----------------*/
/***** Moses *****/
/*-----------------*/
figure.effect-moses { background: -webkit-linear-gradient(-45deg, #EC65B7 0%, #05E0D8 100%); background: -webkit-linear-gradient(135deg, #EC65B7 0%, #05E0D8 100%); background: -o-linear-gradient(135deg, #EC65B7 0%, #05E0D8 100%); background: linear-gradient(-45deg, #EC65B7 0%, #05E0D8 100%); }

figure.effect-moses img { opacity: 0.85; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-moses h3, figure.effect-moses p { padding: 20px; width: 50%; height: 50%; border: 2px solid #fff; }

figure.effect-moses h3 { padding: 20px; width: 50%; height: 50%; text-align: left; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(10px, 10px, 0); transform: translate3d(10px, 10px, 0); }

figure.effect-moses p { float: right; padding: 20px; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

figure.effect-moses:hover h3 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-moses:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-moses:hover img { opacity: 0.6; }

/*---------------*/
/***** Jazz *****/
/*---------------*/
figure.effect-jazz { background: -webkit-linear-gradient(-45deg, #f3cf3f 0%, #f33f58 100%); background: -webkit-linear-gradient(135deg, #f3cf3f 0%, #f33f58 100%); background: -o-linear-gradient(135deg, #f3cf3f 0%, #f33f58 100%); background: linear-gradient(-45deg, #f3cf3f 0%, #f33f58 100%); }

figure.effect-jazz img { opacity: 0.9; }

figure.effect-jazz figcaption::after, figure.effect-jazz img, figure.effect-jazz p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-jazz figcaption::after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top: 1px solid #fff; border-bottom: 1px solid #fff; content: ''; opacity: 0; -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1); -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; }

figure.effect-jazz h3, figure.effect-jazz p { opacity: 1; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); }

figure.effect-jazz h3 { padding-top: 26%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-jazz p { padding: 0.5em 2em; text-transform: none; font-size: 0.85em; opacity: 0; }

figure.effect-jazz:hover img { opacity: 0.7; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }

figure.effect-jazz:hover figcaption::after { opacity: 1; -webkit-transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); transform: rotate3d(0, 0, 1, 45deg) scale3d(1, 1, 1); }

figure.effect-jazz:hover h3, figure.effect-jazz:hover p { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/*---------------*/
/***** Ming *****/
/*---------------*/
figure.effect-ming { background: #030c17; }

figure.effect-ming img { opacity: 0.9; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-ming figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 2px solid #fff; -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.2); content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(1.4, 1.4, 1); transform: scale3d(1.4, 1.4, 1); }

figure.effect-ming h3 { margin: 20% 0 10px 0; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-ming p { padding: 1em; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }

figure.effect-ming:hover h3 { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); }

figure.effect-ming:hover figcaption::before, figure.effect-ming:hover p { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

figure.effect-ming:hover figcaption { background-color: rgba(58, 52, 42, 0); }

figure.effect-ming:hover img { opacity: 0.4; }

/*---------------*/
/***** Duke *****/
/*---------------*/
figure.effect-duke { background: -webkit-linear-gradient(-45deg, #34495e 0%, #cc6055 100%); background: -webkit-linear-gradient(135deg, #34495e 0%, #cc6055 100%); background: -o-linear-gradient(135deg, #34495e 0%, #cc6055 100%); background: linear-gradient(-45deg, #34495e 0%, #cc6055 100%); }

figure.effect-duke img, figure.effect-duke p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-duke:hover img { opacity: 0.1; -webkit-transform: scale3d(2, 2, 1); transform: scale3d(2, 2, 1); }

figure.effect-duke h3 { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; }

figure.effect-duke p { position: absolute; bottom: 0; left: 0; margin: 20px; padding: 30px; border: 2px solid #fff; text-transform: none; font-size: 90%; opacity: 0; -webkit-transform: scale3d(0.8, 0.8, 1); transform: scale3d(0.8, 0.8, 1); -webkit-transform-origin: 50% -100%; -ms-transform-origin: 50% -100%; transform-origin: 50% -100%; }

figure.effect-duke:hover h3, figure.effect-duke:hover p { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }

/*---------------*/
/***** Lily *****/
/*---------------*/
figure.effect-lily img { max-width: none; width: -webkit-calc(100% + 50px); width: calc(100% + 50px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); }

figure.effect-lily figcaption { text-align: left; }

figure.effect-lily figcaption > div { position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; height: 50%; }

figure.effect-lily h3, figure.effect-lily p { -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }

figure.effect-lily h3 { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-lily p { color: rgba(255, 255, 255, 0.8); opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, -webkit-transform 0.35s; -o-transition: opacity 0.2s, transform 0.35s; transition: opacity 0.2s, transform 0.35s; transition: opacity 0.2s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-lily:hover img, figure.effect-lily:hover p { opacity: 1; }

figure.effect-lily:hover img, figure.effect-lily:hover h3, figure.effect-lily:hover p { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-lily:hover p { -webkit-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; -o-transition-duration: 0.35s; transition-duration: 0.35s; }

/*---------------*/
/***** Sadie *****/
/*---------------*/
figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(72, 76, 97, 0)), color-stop(75%, rgba(72, 76, 97, 0.8))); background: -o-linear-gradient(top, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%); background: linear-gradient(to bottom, rgba(72, 76, 97, 0) 0%, rgba(72, 76, 97, 0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); }

figure.effect-sadie h3 { position: absolute; top: 50%; left: 0; width: 100%; color: #484c61; -webkit-transition: -webkit-transform 0.35s, color 0.35s; -webkit-transition: color 0.35s, -webkit-transform 0.35s; transition: color 0.35s, -webkit-transform 0.35s; -o-transition: transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); }

figure.effect-sadie figcaption::before, figure.effect-sadie p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-sadie p { position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }

figure.effect-sadie:hover h3 { color: #fff; -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0); transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0); }

figure.effect-sadie:hover figcaption::before, figure.effect-sadie:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Roxy *****/
/*---------------*/
figure.effect-roxy { background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%); background: -o-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%); background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%); }

figure.effect-roxy img { max-width: none; width: -webkit-calc(100% + 60px); width: calc(100% + 60px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-50px, 0, 0); transform: translate3d(-50px, 0, 0); }

figure.effect-roxy figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); }

figure.effect-roxy figcaption { padding: 3em; text-align: left; }

figure.effect-roxy h3 { padding: 30% 0 10px 0; }

figure.effect-roxy p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); }

figure.effect-roxy:hover img { opacity: 0.7; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-roxy:hover figcaption::before, figure.effect-roxy:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba { background: #000; }

figure.effect-bubba img { opacity: 1; -webkit-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; -ms-transform: scale(1); transform: scale(1); -webkit-transform: scale(1); }

figure.effect-bubba:hover img { opacity: 0.7; -ms-transform: scale(1.05); transform: scale(1.05); -webkit-transform: scale(1.05); }

figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; content: ''; opacity: 0; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; -o-transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; }

figure.effect-bubba figcaption::before { border-top: 4px solid rgba(255, 255, 255, 0.7); border-bottom: 4px solid rgba(255, 255, 255, 0.7); -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); }

figure.effect-bubba figcaption::after { border-right: 4px solid rgba(255, 255, 255, 0.7); border-left: 4px solid rgba(255, 255, 255, 0.7); -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); }

figure.effect-bubba h3 { padding-top: 30%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); }

figure.effect-bubba p { padding: 20px 2.5em; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }

figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

figure.effect-bubba:hover h3, figure.effect-bubba:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Romeo *****/
/*---------------*/
figure.effect-romeo { -webkit-perspective: 1000px; perspective: 1000px; }

figure.effect-romeo img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 0, 300px); transform: translate3d(0, 0, 300px); }

figure.effect-romeo:hover img { opacity: 0.6; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-romeo figcaption::before, figure.effect-romeo figcaption::after { position: absolute; top: 50%; left: 50%; width: 80%; height: 1px; background: #fff; content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }

figure.effect-romeo:hover figcaption::before { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg); transform: translate3d(-50%, -50%, 0) rotate(45deg); }

figure.effect-romeo:hover figcaption::after { opacity: 0.5; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); }

figure.effect-romeo h3, figure.effect-romeo p { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-romeo h3 { -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0); transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0); }

figure.effect-romeo p { padding: 0.25em 2em; -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0); transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0); }

figure.effect-romeo:hover h3 { -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0); transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0); }

figure.effect-romeo:hover p { -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0); transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0); }

/*---------------*/
/***** Layla *****/
/*---------------*/
figure.effect-layla { background: #18a367; }

figure.effect-layla img { height: 390px; }

figure.effect-layla figcaption { padding: 3em; }

figure.effect-layla figcaption::before, figure.effect-layla figcaption::after { position: absolute; content: ''; opacity: 0; }

figure.effect-layla figcaption::before { top: 50px; right: 30px; bottom: 50px; left: 30px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; }

figure.effect-layla figcaption::after { top: 30px; right: 50px; bottom: 30px; left: 50px; border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; }

figure.effect-layla h3 { padding-top: 26%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-layla p { padding: 0.5em 2em; text-transform: none; opacity: 0; -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); }

figure.effect-layla img, figure.effect-layla h3 { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); }

figure.effect-layla img, figure.effect-layla figcaption::before, figure.effect-layla figcaption::after, figure.effect-layla p { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-layla:hover img { opacity: 0.7; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-layla:hover figcaption::before, figure.effect-layla:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

figure.effect-layla:hover h3, figure.effect-layla:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-layla:hover figcaption::after, figure.effect-layla:hover h3, figure.effect-layla:hover p, figure.effect-layla:hover img { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; }

/*---------------*/
/***** Honey *****/
/*---------------*/
figure.effect-honey { background: #4a3753; }

figure.effect-honey img { opacity: 0.9; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-honey:hover img { opacity: 0.5; }

figure.effect-honey figcaption::before { position: absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #fff; content: ''; -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); }

figure.effect-honey h3 { position: absolute; bottom: 0; left: 0; padding: 1em 1.5em; width: 100%; text-align: left; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); }

figure.effect-honey h3 i { font-style: normal; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); }

figure.effect-honey figcaption::before, figure.effect-honey h3 { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; }

figure.effect-honey:hover figcaption::before, figure.effect-honey:hover h3, figure.effect-honey:hover h3 i { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Oscar *****/
/*---------------*/
figure.effect-oscar { background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%); background: -o-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%); background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%); }

figure.effect-oscar img { opacity: 0.9; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-oscar figcaption { padding: 3em; background-color: rgba(58, 52, 42, 0.7); -webkit-transition: background-color 0.35s; -o-transition: background-color 0.35s; transition: background-color 0.35s; }

figure.effect-oscar figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; content: ''; }

figure.effect-oscar h3 { margin: 20% 0 10px 0; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }

figure.effect-oscar figcaption::before, figure.effect-oscar p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); }

figure.effect-oscar:hover h3 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-oscar:hover figcaption::before, figure.effect-oscar:hover p { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

figure.effect-oscar:hover figcaption { background-color: rgba(58, 52, 42, 0); }

figure.effect-oscar:hover img { opacity: 0.4; }

/*---------------*/
/***** Marley *****/
/*---------------*/
figure.effect-marley figcaption { text-align: right; }

figure.effect-marley h3, figure.effect-marley p { position: absolute; right: 30px; left: 30px; padding: 10px 0; }

figure.effect-marley p { bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }

figure.effect-marley h3 { top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }

figure.effect-marley:hover h3 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-marley h3::after { position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: #fff; content: ''; -webkit-transform: translate3d(0, 40px, 0); transform: translate3d(0, 40px, 0); }

figure.effect-marley h3::after, figure.effect-marley p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-marley:hover h3::after, figure.effect-marley:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Ruby *****/
/*---------------*/
figure.effect-ruby { background-color: #17819c; }

figure.effect-ruby img { opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); }

figure.effect-ruby:hover img { opacity: 0.5; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

figure.effect-ruby h3 { margin-top: 20%; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); }

figure.effect-ruby p { margin: 1em 0 0; padding: 3em; border: 1px solid #fff; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 20px, 0) scale(1.1); transform: translate3d(0, 20px, 0) scale(1.1); }

figure.effect-ruby:hover h3 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-ruby:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); }

/*---------------*/
/***** Milo *****/
/*---------------*/
figure.effect-milo { background: #2e5d5a; }

figure.effect-milo img { max-width: none; width: -webkit-calc(100% + 60px); width: calc(100% + 60px); opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-30px, 0, 0) scale(1.12); transform: translate3d(-30px, 0, 0) scale(1.12); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

figure.effect-milo:hover img { opacity: 0.5; -webkit-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); }

figure.effect-milo h3 { position: absolute; right: 0; bottom: 0; padding: 1em 1.2em; }

figure.effect-milo p { padding: 0 10px 0 0; width: 50%; border-right: 1px solid #fff; text-align: right; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); }

figure.effect-milo:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Dexter *****/
/*---------------*/
figure.effect-dexter { background: -webkit-linear-gradient(top, #258dc8 0%, #683c13 100%); background: -webkit-gradient(linear, left top, left bottom, from(#258dc8), to(#683c13)); background: -o-linear-gradient(top, #258dc8 0%, #683c13 100%); background: linear-gradient(to bottom, #258dc8 0%, #683c13 100%); }

figure.effect-dexter img { -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; }

figure.effect-dexter:hover img { opacity: 0.4; }

figure.effect-dexter figcaption::after { position: absolute; right: 30px; bottom: 30px; left: 30px; height: -webkit-calc(50% - 30px); height: calc(50% - 30px); border: 7px solid #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }

figure.effect-dexter:hover figcaption::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-dexter figcaption { padding: 3em; text-align: left; }

figure.effect-dexter p { position: absolute; right: 60px; bottom: 60px; left: 60px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, -100px, 0); transform: translate3d(0, -100px, 0); }

figure.effect-dexter:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Sarah *****/
/*---------------*/
figure.effect-sarah { background: #42b078; }

figure.effect-sarah img { max-width: none; width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

figure.effect-sarah:hover img { opacity: 0.4; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-sarah figcaption { text-align: left; }

figure.effect-sarah h3 { position: relative; overflow: hidden; padding: 0.5em 0; }

figure.effect-sarah h3::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); }

figure.effect-sarah:hover h3::after { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-sarah p { padding: 1em 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); }

figure.effect-sarah:hover p { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

/*---------------*/
/***** Zoe *****/
/*---------------*/
figure.effect-zoe figcaption { top: auto; bottom: 0; padding: 1em; height: 3.75em; background: #fff; color: #3c4a50; -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }

figure.effect-zoe h3 { float: left; }

figure.effect-zoe p.icon-links a { float: right; color: #3c4a50; font-size: 1.4em; }

figure.effect-zoe:hover p.icon-links a:hover, figure.effect-zoe:hover p.icon-links a:focus { color: #252d31; }

figure.effect-zoe p.description { position: absolute; bottom: 8em; padding: 2em; color: #fff; text-transform: none; font-size: 90%; opacity: 0; -webkit-transition: opacity 0.35s; -o-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */ }

figure.effect-zoe h3, figure.effect-zoe p.icon-links a { -webkit-transition: -webkit-transform 0.35s; transition: -webkit-transform 0.35s; -o-transition: transform 0.35s; transition: transform 0.35s; transition: transform 0.35s, -webkit-transform 0.35s; -webkit-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0); }

figure.effect-zoe p.icon-links a span::before { display: inline-block; padding: 8px 10px; font-family: 'feathericons'; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-eye::before { content: '\e000'; }

.icon-paper-clip::before { content: '\e001'; }

.icon-heart::before { content: '\e024'; }

figure.effect-zoe h3 { display: inline-block; }

figure.effect-zoe:hover p.description { opacity: 1; }

figure.effect-zoe:hover figcaption, figure.effect-zoe:hover h3, figure.effect-zoe:hover p.icon-links a { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

figure.effect-zoe:hover h3 { -webkit-transition-delay: 0.05s; -o-transition-delay: 0.05s; transition-delay: 0.05s; }

figure.effect-zoe:hover p.icon-links a:nth-child(3) { -webkit-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; }

figure.effect-zoe:hover p.icon-links a:nth-child(2) { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; }

figure.effect-zoe:hover p.icon-links a:first-child { -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; }

/*---------------*/
/***** Chico *****/
/*---------------*/
figure.effect-chico img { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); }

figure.effect-chico:hover img { opacity: 0.5; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

figure.effect-chico figcaption { padding: 3em; }

figure.effect-chico figcaption::before { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; border: 1px solid #fff; content: ''; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }

figure.effect-chico figcaption::before, figure.effect-chico p { opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, -webkit-transform 0.35s; -o-transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s; transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s; }

figure.effect-chico h3 { padding: 20% 0 20px 0; }

figure.effect-chico p { margin: 0 auto; max-width: 200px; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); }

figure.effect-chico:hover figcaption::before, figure.effect-chico:hover p { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

/*------------------*/
/* RECHERCHER  GEN */
/*----------------*/
.search { position: relative; }

.search:before { content: ''; position: absolute; top: 37px; left: 50%; height: 1px; width: 50%; background: #C3C3C4; }

/**/
.search .fst_line { background: url("/images/bg_search.png") no-repeat 0 0; height: 40px; width: 90%; max-width: 830px; margin: 0 auto; padding: 0 0 0 30px; }

.search .fst_line > * { display: inline-block; margin: 0 10px; }

.search .fst_line h2 { text-transform: uppercase; font-size: 2.2rem; color: #909092; font-weight: 400; margin: 0 20px 0 0; line-height: 40px; }

.search .fst_line .rowElem { line-height: 40px; }

.search .fst_line label { font-weight: 600; }

.search .fst_line .radio, .checkbox { height: 16px; top: 3px; width: 16px; }

.search .fst_line .radio::before { height: 6px; margin: 2px; width: 6px; }

.search .crit_btn { font-size: 1.4rem; color: #333; font-weight: 600; display: block; float: right; margin: 8px 0; padding: 2px 10px; border-radius: 5px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.search .crit_btn:hover { background: #DBDBDB; }

/**/
.search .snd_line { width: 100%; max-width: 800px; margin: 0 auto; clear: both; position: relative; padding: 10px 50px; }

.search .snd_line .rowElem { width: 200px; display: inline-block; margin: 5px; }

.search .snd_line select { padding: 2px 10px; height: 33px; font-weight: 600; }

.search .snd_line .selectElem i { font-size: 1.4rem !important; }

.search .submit_btn { background: #212121; position: absolute; top: 50%; right: 35px; height: 74px; line-height: 74px; width: 74px; text-align: center; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 10px; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.search .submit_btn img { vertical-align: middle; display: inline-block; }

.search .submit_btn:hover { background: #463F26; }

/**/
.search .pdc { text-align: center; margin: 0 auto; max-width: 800px; display: none; }

/**/
@media all and (max-width: 800px) { .search .fst_line { width: 100%; padding: 0 20px; }
  .search .fst_line h2 { width: 100%; }
  .search .snd_line { padding: 10px; } }

@media all and (max-width: 640px) { .search .fst_line { width: 100%; background: none; border-bottom: 1px solid #CCC; height: auto; padding: 0 20px; }
  .search .fst_line h2 { width: 100%; } }

@media all and (max-width: 480px) { .search .submit_btn { position: relative; top: auto; right: auto; height: 46px; line-height: 46px; width: 100%; display: inline-block; text-align: center; clear: both; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin: 10px 0; }
  .search .snd_line .rowElem { width: calc(50% - 12px); } }

/*---------------*/
/* !BLOG */
/*---------------*/
.blog * { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.blog { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: "Lato", sans-serif; width: 80%; margin: 160px auto 0; }

.blog > section { margin: 0 20px 0 0; max-width: 700px; width: calc(70% - 20px); float: left; }

.blog img { width: 100%; }

.blog article { margin: 0 0 40px; position: relative; }

.blog .category { color: #463F26; font-size: 11px; font-weight: 500; padding: 25px 0 5px; text-align: center; text-transform: uppercase; }

.blog h2 { margin: 0 0 20px 0; }

.blog h3 { font-size: 28px; font-weight: 400; margin: 0 0 10px; position: relative; text-align: center; text-transform: capitalize; }

.blog h3::after { background: #463F26 none repeat scroll 0 0; bottom: -10px; content: ""; height: 2px; left: 50%; position: absolute; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 40px; }

.blog time { color: #999; display: block; font-size: 12px; font-style: italic; padding: 10px 0; text-align: center; }

.blog .author { color: #463F26; float: left; font-size: 11px; font-style: italic; padding: 10px 0; text-transform: uppercase; }

.blog .tags { color: #999; float: right; font-size: 11px; font-style: italic; padding: 10px; text-align: right; }

.blog article > div { padding: 0 0 20px; }

.blog p { color: #333; font-size: 14px; }

.blog a { color: #000; }

.blog a:hover, .blog .selected a { color: #463F26; }

.blog a.img { overflow: hidden; display: block; }

.blog a.img:hover img { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }

.blog a.back { background: #463F26 none repeat scroll 0 0; color: #fff; padding: 5px 10px; }

.blog a.back:hover { background: #000 none repeat scroll 0 0; color: #fff; }

.blog a.readmore { border-bottom: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1; clear: both; color: #000; display: block; font-size: 13px; font-weight: 500; letter-spacing: 2px; padding: 10px 0; text-align: center; text-transform: uppercase; }

.blog a.readmore:hover { color: #463F26; }

/* aside */
.blog > aside { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; margin: 0; max-width: 300px; padding: 20px; width: 30%; float: right; }

.blog > aside ul li { list-style: outside none none; }

.blog > aside h2 { border-bottom: 1px solid #333; border-top: 1px solid #333; color: #333; font-size: 14px; font-weight: 600; margin: 0 0 10px; padding: 5px 10px; text-align: center; }

.blog > aside nav { margin: 30px 0; }

.blog > aside a { color: #333; display: block; font-size: 1.4rem; }

/**/
#byTag ul li { background: #fff none repeat scroll 0 0; display: inline-block; margin: 2px 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; position: relative; -webkit-transform: translateZ(0px); transform: translateZ(0px); }

#byTag ul li:before { content: ""; background: #463F26; bottom: 0; left: 0; position: absolute; right: 0; top: 0; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50% 0; -ms-transform-origin: 0 50% 0; transform-origin: 0 50% 0; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; -o-transition-property: transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; z-index: -1; }

#byTag ul li:hover:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }

#byTag ul li a { padding: 5px 10px; }

#byTag ul li:hover a { color: #fff; }

#byTag ul li.selected a, #byTag ul li.selected { background: #463F26; }

/**/
#byRecent ul li { border-bottom: 1px solid #e1e1e1; padding: 10px; }

#blog_details { max-width: 1000px; width: 100%; }

#blog_details h2 { margin: 10px 0; text-align: center; }

#blog_details article > div { border-bottom: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1; padding: 20px 0; }

#blog_details ul li { font-size: 14px; margin: 0 0 0 25px; }

/* share */
.share { position: absolute; right: 20px; top: 20px; -webkit-transition: all 1.5s; -o-transition: all 1.5s; transition: all 1.5s; height: 30px; width: 30px; overflow: hidden; z-index: 100; }

.share a { background: #212121; color: #fff; display: block; font-size: 1.8rem; height: 30px; line-height: 30px; text-align: center; width: 30px; float: right; }

.share a:hover { background: #463F26; color: #FFF; }

.share .social_box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; }

.share .social_box li { list-style: none; }

.share:hover { width: 240px; }

/**/
@media all and (max-width: 800px) { main.blog { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
  #blog_details { margin: 80px auto; max-width: none; width: calc(100% - 20px); }
  #blog_details h1 { padding: 90px 0 40px 30px; }
  #blog_details img { max-width: 100%; }
  .blog > section { clear: both; margin: 20px auto; max-width: none; width: calc(100% - 20px); }
  /* aside */
  .blog > aside { clear: both; margin: 20px auto; max-width: none; width: 100%; }
  .blog > aside ul { max-height: 0; opacity: 0; overflow: hidden; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
  .blog > aside nav { margin: 0; cursor: pointer; }
  .blog > aside nav:hover ul { max-height: 100%; opacity: 1; padding: 10px 0 20px 0; } }

/*---------------*/
/* !viande home*/
/*---------------*/
.home .meat_suggest { padding: 60px 0; text-align: center; position: relative; z-index: 20; }

.home .meat_suggest:before { content: ''; width: 120%; height: 100px; -webkit-transform: skewY(2.5deg); -ms-transform: skewY(2.5deg); transform: skewY(2.5deg); position: absolute; top: -30px; left: 0; background: #F7F6F2; }

.meat_suggest { padding: 200px 0; text-align: center; }

/**/
.meat_suggest h2 { font-size: 3rem; font-weight: 300; color: #FFFFFF; letter-spacing: 5px; text-transform: uppercase; text-align: right; position: relative; display: inline-block; clear: both; }

.meat_suggest h2 span { display: block; clear: both; font-size: 1.2rem; color: #635A52; font-weight: 600; text-transform: none; }

.meat_suggest h2:after { content: ''; background: url("/images/clutch.svg") no-repeat 50% 50%/contain rgba(0, 0, 0, 0); position: absolute; top: 6px; right: -22px; width: 14px; height: 25px; }

.meat_suggest > h2 { position: absolute; top: 80px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-align: center; font-size: 3.4rem; }

/**/
.meat_suggest > article { margin: 30px 0; max-width: 30%; position: relative; overflow: hidden; display: inline-block; vertical-align: top; }

.meat_suggest > article img { max-width: 100%; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

/**/
.meat_suggest h3 { font-size: 2.5rem; color: #8E8277; font-weight: 400; text-transform: capitalize; padding: 0 0 10px; position: relative; }

.meat_suggest h3:after { content: ''; background: #504239; height: 1px; width: 80%; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.meat_suggest .price { font-size: 1.4rem; color: #A7965D; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; padding: 14px 0 0; }

.meat_suggest .price span { font-size: 10px; color: #8E8277; letter-spacing: 1.43px; font-weight: 700; display: block; clear: both; }

/**/
.meat_suggest article a { position: absolute; top: 10px; left: 0; width: 100%; height: calc(100% - 70px); -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; overflow: hidden; font-style: normal; }

.home .meat_suggest article a { top: 68px; }

.meat_suggest article a:after { content: ''; width: 200px; height: 200px; background: #F7F6F2; border: 1px solid #504239; -webkit-transform: rotate(-315deg) translate(-240px, -100px); -ms-transform: rotate(-315deg) translate(-240px, -100px); transform: rotate(-315deg) translate(-240px, -100px); position: absolute; top: 0; left: 50%; -webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s; z-index: 10; }

.meat_suggest article a span { font-size: 1.1rem; font-weight: 600; color: #8E8277; letter-spacing: 1px; text-transform: uppercase; position: absolute; top: 0; left: 50%; opacity: 0; z-index: 20; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

.meat_suggest article:hover img { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); opacity: .5; }

.meat_suggest article a:hover:after { -webkit-transform: rotate(-315deg) translate(-150px, 0px); -ms-transform: rotate(-315deg) translate(-150px, 0px); transform: rotate(-315deg) translate(-150px, 0px); }

.meat_suggest article:hover a span { position: absolute; left: 50%; top: 10%; opacity: 1; padding: 0 10px 0 0; }

/*--------------------*/
/* !LISTING PORDUITS */
/*------------------*/
.meat_listing { margin: 140px auto 0; text-align: center; }

[class*="meat_"] h1 { font-size: 3.4rem; font-weight: 300; color: #FFFFFF; letter-spacing: 5px; text-transform: uppercase; text-align: right; position: relative; display: inline-block; }

[class*="meat_"] h1 span { display: block; clear: both; font-size: 1.2rem; color: #635A52; font-weight: 600; text-transform: none; }

[class*="meat_"] h1:after { content: ''; background: url("/images/clutch.svg") no-repeat 50% 50%/contain rgba(0, 0, 0, 0); position: absolute; top: 6px; right: -22px; width: 14px; height: 25px; }

/**/
.results { text-align: center; margin: 0 auto 200px; }

.results article { position: relative; display: inline-block; width: 42%; margin: 2%; max-width: 720px; overflow: hidden; }

.results article:nth-child(even) { -webkit-transform: translateY(160px); -ms-transform: translateY(160px); transform: translateY(160px); }

.results article img { max-width: 100%; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.results article a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.results article a:after { content: ''; width: 200px; height: 200px; background: #F7F6F2; border: 1px solid #504239; -webkit-transform: rotate(-315deg) translate(-240px, -100px); -ms-transform: rotate(-315deg) translate(-240px, -100px); transform: rotate(-315deg) translate(-240px, -100px); position: absolute; top: 0; left: 50%; -webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s; z-index: 10; }

.results article a span { font-size: 1.1rem; font-weight: 600; color: #8E8277; letter-spacing: 1px; text-transform: uppercase; position: absolute; top: 0; left: 50%; opacity: 0; z-index: 20; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

/**/
.results article:hover img { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); opacity: .5; }

.results article a:hover:after { -webkit-transform: rotate(-315deg) translate(-150px, 0px); -ms-transform: rotate(-315deg) translate(-150px, 0px); transform: rotate(-315deg) translate(-150px, 0px); }

.results article:hover a span { position: absolute; left: 50%; top: 10%; opacity: 1; padding: 0 10px 0 0; }

/**/
.results h2 { font-size: 2.5rem; color: #8E8277; font-weight: 400; text-transform: capitalize; padding: 0 0 10px; position: relative; }

.results h2:after { content: ''; background: #504239; height: 1px; width: 60%; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }

.results .price { font-size: 1.4rem; color: #A7965D; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; padding: 14px 0 0; }

.results .price span { font-size: 10px; color: #8E8277; letter-spacing: 1.43px; font-weight: 700; display: block; clear: both; }

/**/
.descr { background: #32302D; -webkit-transform: skewY(2.5deg); -ms-transform: skewY(2.5deg); transform: skewY(2.5deg); padding: 140px 20% 200px; }

.descr > div { -webkit-transform: skewY(-2.5deg); -ms-transform: skewY(-2.5deg); transform: skewY(-2.5deg); }

.descr h3 { font-family: "Lato", sans-serif; opacity: 0.9; font-size: 3.6rem; color: #FFF; line-height: 38px; margin: 0 0 30px; }

.descr p { font-family: "Oswald", sans-serif; font-size: 1.3rem; color: #8E8277; line-height: 22px; }

/*-------------------*/
/* !DETAILS PRODUIT */
/*-----------------*/
.meat_details { margin: 140px auto 0; text-align: center; }

.meat_details nav a { border: 1px solid #8E8277; color: #8E8277; display: inline-block; font-size: 1rem; text-transform: uppercase; text-decoration: none; padding: 10px 25px; letter-spacing: 1.25px; font-weight: 600; margin: 30px 0; font-style: normal; position: relative; overflow: hidden; }

.meat_details nav a:hover { color: #FFF; border: 1px solid #A7965D; }

.meat_details nav a:before { content: ''; width: 120%; height: 100%; background: #A7965D; -webkit-transform: translateX(-110%) skew(-20deg); -ms-transform: translateX(-110%) skew(-20deg); transform: translateX(-110%) skew(-20deg); position: absolute; left: 0; top: 0; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; z-index: -1; }

.meat_details nav a:hover:before { -webkit-transform: translateX(0) skew(0); -ms-transform: translateX(0) skew(0); transform: translateX(0) skew(0); }

/**/
.meat_details .produit { position: relative; width: 80%; margin: 0 auto; min-height: 600px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 0 160px; }

.meat_details .produit:after { display: none; }

.meat_details .produit > img { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 0; max-width: 100%; opacity: .8; }

.meat_details .produit > div { position: relative; text-align: left; }

/**/
.meat_details .infox { width: 280px; }

.meat_details .infox p { font-size: 1.2rem; line-height: 24px; color: #FFF; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid #5F4C43; margin: 0; padding: 8px 0; }

.meat_details .infox p:last-child { border-bottom: none; }

.meat_details .infox i { font-size: 2.2rem; margin: 0 10px 0; }

/**/
.meat_details .buyx { width: 300px; }

.meat_details .buyx .size p, .meat_details .buyx label { font-size: 1.3rem; color: #FFF; letter-spacing: 1.62px; text-transform: uppercase; font-weight: 700; padding: 0; clear: both; width: 100%; display: block; margin: 0 0 10px; }

.meat_details .buyx .size ul { margin: 0; }

.meat_details .buyx .size ul li { border: 1px solid #504239; padding: 8px 15px; display: inline-block; list-style: none; margin: 0 6px 10px 0; text-transform: uppercase; font-size: 1.1rem; font-weight: 600; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.meat_details .buyx .size ul li:hover, .meat_details .buyx .size ul li.selected { border: 1px solid #A7965D; color: #A7965D; cursor: pointer; }

.meat_details .buyx .size ul li.off { border: 1px solid rgba(80, 66, 57, 0.8); color: rgba(255, 255, 255, 0.2); background: rgba(80, 66, 57, 0.4); }

.meat_details .buyx form { margin: 10px 0 0; }

.meat_details .buyx input { background: none; border: 1px solid #504239; font-weight: 700; font-size: 1.6rem; text-align: center; padding: 0; width: 50px; float: left; height: 50px; border-right: none; border-radius: 0; }

.meat_details .buyx .qty { float: left; }

.meat_details .buyx .qplusmoins { float: left; border: 1px solid #504239; margin: 0 20px 0 0; height: 50px; border-left: none; }

.meat_details .buyx .qplusmoins a { font-size: 2rem; font-weight: 700; height: 25px; width: 25px; text-align: center; text-transform: uppercase; color: #FFF; text-decoration: none; display: block; clear: both; font-style: normal; }

.meat_details .buyx .qplusmoins a:hover { background: rgba(255, 255, 255, 0.05); }

/**/
.meat_details .buyx .price { font-size: 2.3rem; color: #A7965D; letter-spacing: 2.88px; border: 1px solid #504239; float: left; height: 50px; line-height: 50px; padding: 0 30px; font-weight: 600; position: relative; min-width: 120px; margin: 27px 0 0; }

.meat_details .buyx .price:before { content: attr(data-per-kg); color: #FFF; opacity: 0.7; font-size: 1.1rem; line-height: 1rem; letter-spacing: 1.38px; position: absolute; top: -23px; right: 0; }

.meat_details .buyx .dispo { clear: both; color: #FFF; text-transform: uppercase; font-weight: 600; }

/**/
.svg-filters { position: absolute; visibility: hidden; width: 1px; height: 1px; }

.button--1, .button--1 .button__bg, .button--2 { -webkit-font-smoothing: antialiased; background: #A7965D; border: none; display: inline-block; font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; letter-spacing: 0.1em; color: white; padding: 15px 40px; text-transform: uppercase; -webkit-transition: background-color 0.1s ease-out; -o-transition: background-color 0.1s ease-out; transition: background-color 0.1s ease-out; }

.button--1:hover, .button--1 .button__bg:hover, .button--2:hover { background-color: #A7965D; color: #fff; }

.button--1:focus, .button--1 .button__bg:focus, .button--2:focus { outline: none; color: #fff; }

.button--1 { position: relative; background: none; z-index: 0; }

.button--1:hover { background: none; }

.button--1:hover .circle { background: #A7965D; }

.button--1:hover .button__bg { background: #A7965D; }

.button--1 .button__container { position: absolute; display: block; width: 200%; height: 400%; top: -150%; left: -50%; pointer-events: none; z-index: -1; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }

.button--1 .button__bg { position: absolute; width: 50%; height: 25%; top: 50%; left: 25%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

.button--1 .circle { position: absolute; width: 25px; height: 25px; border-radius: 15px; background: #A7965D; -webkit-transition: background-color 0.1s ease-out; -o-transition: background-color 0.1s ease-out; transition: background-color 0.1s ease-out; }

.button--1 .circle.top-left { top: 40%; left: 27%; }

.button--1 .circle.bottom-right { bottom: 40%; right: 27%; }

/**/
.meat_details .cooking_time { position: absolute !important; bottom: 0; left: 50%; -webkit-transform: translate(-51px, -20px); -ms-transform: translate(-51px, -20px); transform: translate(-51px, -20px); width: 100px; height: 100px; }

.meat_details .cooking_time:before { content: ''; -webkit-transform: translate(-51px, 0) rotate(45deg); -ms-transform: translate(-51px, 0) rotate(45deg); transform: translate(-51px, 0) rotate(45deg); border: 1px solid #443A32; width: 100px; height: 100px; position: absolute !important; bottom: 0; left: 50%; }

.meat_details .cooking_time > * { text-align: center; }

.meat_details .cooking_time i { font-size: 2rem; display: block; margin: 10px 0 0; color: #8E8277; }

.meat_details .cooking_time p { color: #8E8277; font-weight: 500; margin: 0; padding: 0; }

.meat_details .cooking_time span { font-size: 2.7rem; font-weight: 500; }

.meat_details .cooking_time p + p { font-size: 1.1rem; text-transform: uppercase; margin: -5px 0 0; }

/**/
.meat_details .modules { width: 80%; padding: 0 0 120px; }

.meat_details .modules > div { width: calc(50% - 5px); display: inline-block; vertical-align: top; padding: 0 40px; }

.meat_details .modules > div > div { margin: 35px 0; }

.meat_details .modules .col_L { text-align: right; border-right: 1px solid #443A32; }

.meat_details .modules .col_R { text-align: left; }

.meat_details .modules figure { float: left; max-width: 200px; margin: 0 15px 0 0; }

.meat_details .modules figure img { width: 186px; height: 186px; }

.meat_details .modules figcaption { margin: 10px 0 0; }

.meat_details .modules h2 { font-size: 1.9rem; color: #FFF; letter-spacing: 2.38px; text-transform: uppercase; font-weight: 500; margin: 0 0 15px; }

.meat_details .modules p { font-weight: 300; }

.meat_details .modules ul { margin: 0 0 10px; }

.meat_details .modules li { list-style: none; color: #8E8277; font-size: 1.2rem; letter-spacing: 1px; font-weight: 300; }

/*----------------------*/
/* MEDIA QUERIES ESHOP */
/*--------------------*/
@media all and (max-width: 1024px) { .meat_listing { margin: 200px auto 0 !important; }
  .meat_details { margin: 190px auto 0 !important; } }

@media all and (max-width: 800px) { .meat_details .produit { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .meat_details .produit > img { position: relative; }
  .meat_details .infox { width: 90%; text-align: center !important; -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; }
  .meat_details .infox p { display: inline-block; width: 45%; margin: 0 5px; }
  .meat_details .infox p:last-child { border-bottom: 1px solid #5F4C43; }
  .meat_details .buyx { width: 90%; margin: 0 0 50px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
  .meat_details .buyx .size { text-align: center; }
  .meat_details .buyx form { text-align: center; }
  .meat_details .buyx .qty { display: inline-block; vertical-align: top; }
  .meat_details .buyx .qty::after { clear: both; content: ""; display: table; }
  .meat_details .buyx .price { float: none; display: inline-block; vertical-align: top; } }

@media all and (max-width: 640px) { .results article { width: 100%; margin: 30px 0; max-width: 90%; }
  .results article:nth-child(even) { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  .descr { padding: 140px 10% 200px; }
  /**/
  .meat_details .modules > div { width: calc(100% - 5px); }
  .meat_details .modules .col_L, .meat_details .modules .col_R { text-align: center; border-right: none; } }

@media all and (max-width: 480px) { [class*="meat_"] h1 { font-size: 2.4rem; }
  .meat_listing { margin: 220px auto 0; }
  .meat_details .produit, .meat_details .modules { width: 95%; }
  .meat_suggest > h2 { font-size: 2.4rem; width: 95%; }
  .meat_details .modules figure { float: none; margin: 20px auto; } }

.panier *, .tunnel_achat * { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

.panier { margin: 0 auto; max-width: 1170px; }

.panier h1 { font-size: 3.4rem; font-weight: 300; color: #FFFFFF; letter-spacing: 5px; text-transform: uppercase; text-align: right; position: relative; display: inline-block; }

.tunnel_achat { margin: 140px auto 200px; text-align: center; }

.tunnel_achat > section { max-width: 1180px; }

.tunnel_achat h1 { font-size: 3.4rem; font-weight: 300; color: #FFFFFF; letter-spacing: 5px; text-transform: uppercase; position: relative; margin: 0 0 40px; }

.tunnel_achat h2 { font-size: 2rem; font-weight: 600; }

/*---------------*/
/* RECAP PANIER */
/*---------------*/
.recap { margin: 20px 0; }

.recap::after { clear: both; content: ""; display: table; }

.recap #arts { display: table; width: 100%; border-collapse: separate; border-spacing: 1px; }

.recap article { display: table-row; background: rgba(93, 84, 78, 0.4); }

.recap article:nth-child(odd) { background: rgba(93, 84, 78, 0.8); }

.recap article:hover { background: #5d544e; cursor: default; }

.recap article > div { display: table-cell; vertical-align: middle; padding: 5px 10px; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 400px; font-size: 1.4rem; font-family: "Playfair Display", serif; }

.recap article a { color: #FFF; font-size: 1.8rem; }

.recap article a:hover { color: #000; }

.recap article img { padding: 0; vertical-align: middle; width: 120px; }

.recap article h3 { color: #000; display: inline; font-size: 1.6rem; font-weight: 600; line-height: 16px; text-transform: uppercase; letter-spacing: 2px; }

.recap article:after { display: none; }

/**/
.recap article.intitule > div { font-size: 12px; color: #FFF; background: #000; font-weight: 700; }

/**/
.recap_quantite span { margin: 0 3px; }

/**/
/**/
#recap_soustotaux { float: right; border-collapse: separate; border-spacing: 1px; }

#recap_soustotaux p { font-size: 14px; font-weight: 600; padding: 5px 10px; }

#recap_soustotaux input { padding: 0 0 0 10px; }

#recap_soustotaux input[type="submit"] { padding: 0; }

#recap_soustotaux > div { background: rgba(93, 84, 78, 0.4); margin: 5px 0; display: table-row; }

#recap_soustotaux .codepromo > *, #recap_soustotaux .fdl > * { padding: 20px; display: table-cell; vertical-align: middle; position: relative; }

#recap_soustotaux .recap_montantligne { min-width: 111px; font-size: 1.2rem; }

#recap_soustotaux .removeCode { position: absolute; top: 0; right: 0; cursor: pointer; line-height: 30px; width: 30px; text-align: center; }

#recap_soustotaux .removeCode:hover { color: #e51216; }

/**/
#recap_total { background: #463F26; float: right; margin: 0 2px 20px 2px; clear: both; padding: 5px 10px; }

#recap_total p { color: #000000; font-size: 1.8rem; font-weight: 600; padding: 2px 0 2px 10px; margin: 0; }

#recap_total p span { margin: 0 0 0 5px; }

/**/
.actions { clear: both; text-align: center; margin: 20px 0; }

.actions a { background: #463F26; -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.6); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.6); color: #000000; float: left; font-size: 1.6rem; font-weight: 600; height: 44px; line-height: 44px; margin: 15px 0 0; padding: 0 25px; cursor: pointer; border-radius: 5px; }

.actions a:hover { background: #000000; -webkit-box-shadow: none; box-shadow: none; color: #463F26; }

.actions ul li { display: inline-block; list-style: outside none none; margin: 0 10px 0 0; }

/*---------------*/
/* TUNNEL ACHAT */
/*---------------*/
#etapes { margin: 260px auto 70px auto; text-align: center; }

#etapes div { background: none; display: inline-table; float: none; height: auto; line-height: inherit; width: 12%; }

#etapes p { color: rgba(167, 150, 93, 0.3); font-size: 1.2rem; text-transform: uppercase; font-weight: 600; position: relative; display: block; }

#etapes p::after { background: rgba(167, 150, 93, 0.3); content: ""; height: 2px; left: calc(50% + 20px); position: absolute; top: -30px; width: calc(100% - 36px); }

#etapes .actif:hover p { color: #a7965d; cursor: pointer; }

#etapes .actif p { color: rgba(167, 150, 93, 0.8); }

#etapes .actif p span { border: 2px solid rgba(167, 150, 93, 0.8); font-size: 1.3rem; font-weight: 700; color: rgba(167, 150, 93, 0.8); }

#etapes .actif p::after { background: rgba(167, 150, 93, 0.8); }

#etapes div:last-child p::after { background: none; }

#etapes span { display: block; border: 2px solid rgba(167, 150, 93, 0.3); border-radius: 100%; height: 40px; width: 40px; position: absolute; left: 50%; -webkit-transform: translate(-50%, -50px); -ms-transform: translate(-50%, -50px); transform: translate(-50%, -50px); line-height: 35px; }

/**/
.etape_modepaiement { margin: 0 0 60px 0; }

.etape_modepaiement input[type="button"], .etape_modepaiement input[type="submit"] { background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, left bottom, from(#463F26), to(#ed5000)) repeat scroll 0 0; background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, #463F26 0%, #ed5000 100%) repeat scroll 0 0; background: rgba(0, 0, 0, 0) -o-linear-gradient(top, #463F26 0%, #ed5000 100%) repeat scroll 0 0; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #463F26 0%, #ed5000 100%) repeat scroll 0 0; border: medium none; -webkit-box-shadow: 2px 2px 3px 0 #bbbbbb; box-shadow: 2px 2px 3px 0 #bbbbbb; color: #fff; float: left; font-size: 17px; font-weight: 600; margin: 15px 10px 0 0; padding: 30px 55px; text-transform: uppercase; }

.etape_modepaiement input[type="button"]:hover, .etape_modepaiement input[type="submit"]:hover { background: #ff7005 none repeat scroll 0 0; -webkit-box-shadow: none; box-shadow: none; }

/**/
#compte_choix { text-align: center; margin: 0 auto; max-width: 1170px; }

#compte_choix article { border-right: 1px solid rgba(255, 255, 255, 0.3); margin: 40px 0 0; padding: 40px; width: calc(50% - 82px); display: inline-block; }

#compte_choix article:last-child { border: medium none; }

#compte_choix p { display: block; font-size: 22px; font-weight: 400; margin: 0 0 30px; padding: 0 0 10px; position: relative; text-align: center; text-transform: uppercase; color: #999; }

#compte_choix a { background: #463F26; border-radius: 5px; color: #000000; display: block; margin: 0 auto; padding: 10px; text-align: center; text-decoration: none; width: 260px; font-size: 1.4rem; font-weight: 600; }

#compte_choix a:hover { -ms-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); }

/*---------------*/
/* ADRESSES */
/*---------------*/
.adr_tab { margin: 0 5px; padding: 10px 20px; width: calc(50% - 60px); display: inline-block; vertical-align: top; background: rgba(82, 74, 68, 0.4); }

.adr_tab > div .adresse_card { background: white; padding: 10px; margin: 10px 0; border-radius: 10px; position: relative; height: 230px; }

.adr_tab > div .adresse_card.active { border: 6px solid #463F26; }

.adr_tab .adressElem { position: absolute; top: 10px; left: 10px; margin: 0; }

.adr_tab .modifier, .adr_tab .supprimer { position: absolute; top: 10px; right: 45px; font-size: 2rem; width: 30px; line-height: 30px; }

.adr_tab .supprimer { right: 10px; }

.adr_tab .ajxadrtxt { margin: 3px 40px; text-align: left; }

.adr_tab .tit { text-transform: uppercase; font-weight: 600; font-size: 1.6rem; margin: 5px 0 10px; }

.adr_tab .nom { font-size: 1.4rem; margin: 0 0 5px; }

.adr_tab .adr { background: #F4F4F4; padding: 10px; margin: 0 0 10px; }

.adr_tab .adr p { margin: 0; }

.add_adr { background: none !important; }

.adr_tab > a { background: #463F26; -webkit-box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.6); box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.6); color: #FFF; font-size: 1.4rem; font-weight: 600; height: 44px; line-height: 44px; padding: 0 25px; cursor: pointer; border-radius: 5px; margin: 15px 5px; display: inline-block; cursor: pointer; }

.adr_tab > a:hover { -webkit-box-shadow: none; box-shadow: none; color: #463F26; background: #FFF; }

.adr_tab .ajouter { background: none; -webkit-box-shadow: none; box-shadow: none; border: 2px dashed #ccc; border-radius: 10px; color: #999; display: block; height: 100px; line-height: 100px; text-align: center; cursor: pointer; font-size: 1.6rem; }

.adr_tab .ajouter:hover { -webkit-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95); background: none; border: 2px dashed #463F26; }

/*---------------*/
/* MODE DE TRANSPORT */
/*---------------*/
#transport .modes { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

.modes > article { display: inline-block; vertical-align: top; border: 6px solid #524A44; background: #524A44; width: 260px; margin: 10px; cursor: pointer; padding: 0 10px; border-radius: 10px; }

.modes > article h3 { padding: 20px 0 10px 0; font-size: 22px; }

.modes > article img { cursor: pointer; display: none; }

.modes > article .desc { background: #EBE6DC; padding: 20px; min-height: 300px; overflow: hidden; }

.modes > article .desc p { font-size: 1.2rem; color: #262420; text-align: justify; }

.modes > article p.price { font-size: 22px; font-weight: 600; color: #FFF; padding: 10px 0; }

.modes > article.active { border: 6px solid #463F26; }

.modes > article.active h3, .modes > article.active p.price { color: #463F26; }

.modes > article .radioElem { float: none; }

@media all and (max-width: 800px) { .recap .intitule { display: none; }
  .recap article { height: auto; position: relative; width: calc(100% - 30px); margin: 10px 5px; padding: 20px 10px; background: #eee; display: block; }
  .recap article > div { height: auto; line-height: normal; border: none; margin: 5px 5px 5px 0; font-weight: 600; width: auto; }
  .recap article > div:first-child, .recap_prixunitaire { display: none !important; }
  .recap article > div:nth-child(2) { width: 100%; clear: both; }
  .recap h3 { white-space: nowrap; }
  .recap_taille, .recap_couleur { padding: 5px 10px; }
  .recap_montantligne { color: #f26a06; padding: 5px 10px; font-size: 20px; }
  .recap_actions a { position: absolute; top: -10px; right: 0; background: #f26a06; padding: 5px 10px; color: #FFF !important; }
  .recap_quantite { position: absolute; top: -15px; right: 50px; background: #f26a06; padding: 5px 10px; color: #FFF !important; }
  .recap_quantite a { color: #FFF !important; padding: 0 5px; }
  /**/
  #tab_facturation, #tab_livraison { width: 90%; }
  #etapes { margin: 260px auto 0; }
  #etapes p { text-indent: -999em; }
  #etapes span { text-indent: 0; }
  #compte_choix article { padding: 0 20px; width: 48%; min-width: 220px; }
  #compte_choix a { max-width: 90%; }
  #paiement input[type="submit"] { padding: 0; }
  /**/
  .steps_counter li { width: 100%; }
  .tunnel_achat h1 { font-size: 2.6rem; } }

/*---------------*/
/* CUSTOMERS REVIEWS */
/*---------------*/
/**/
.reviews { background: #32302D; -webkit-transform: skewY(2.5deg); -ms-transform: skewY(2.5deg); transform: skewY(2.5deg); padding: 80px 20% 140px; font-family: "Playfair Display", serif; }

.reviews > div { -webkit-transform: skewY(-2.5deg); -ms-transform: skewY(-2.5deg); transform: skewY(-2.5deg); text-align: center; }

.reviews h2 { font-size: 3.4rem; font-weight: 300; color: #FFFFFF; letter-spacing: 5px; text-transform: uppercase; position: relative; display: inline-block; margin: 0 auto 20px; }

.reviews h2:after { content: ''; background: url("/images/clutch.svg") no-repeat 50% 50%/contain rgba(0, 0, 0, 0); position: absolute; top: 6px; right: -22px; width: 14px; height: 25px; }

.reviews .nb_com { font-size: 1.2rem; color: #FFF; letter-spacing: 1.71px; text-transform: uppercase; font-size: 1.2rem; text-align: center; }

.reviews article { display: -webkit-box; display: -ms-flexbox; display: flex; margin: auto; }

.reviews article img { -ms-flex-item-align: start; align-self: flex-start; margin: 5px 5px 0; }

/**/
.reviews .r_content { background: #57504B; border-radius: 0; padding: 15px 0 0; margin: 0 0 40px 15px; position: relative; text-align: left; }

.reviews .r_content::before { content: ''; right: 100%; top: 27px; border: solid transparent; height: 0; width: 0; position: absolute; pointer-events: none; border-color: #32302D; border-right-color: #57504B; border-width: 10px; margin-top: -10px; z-index: -1; }

.reviews .r_author { font-size: 1.8rem; color: #FFF; padding: 0 20px; float: left; max-width: calc(100% - 150px); }

.reviews .r_author span { font-size: 1.2rem; opacity: .5; }

.reviews .r_score { color: #FFF; padding: 0 20px; width: 150px; float: right; font-size: 1.8rem; }

.reviews .r_score .fa-star, .r_score .fa-star-o { margin: 0 2px; }

.reviews .r_tit { font-size: 1.4rem; color: #FFF; text-transform: none; font-weight: 500; padding: 5px 30px 0; display: block; clear: both; }

.reviews .r_opinion { font-size: 1.2rem; color: #FFF; padding: 0 30px 20px; }

.reviews time { border-top: 1px solid #504239; padding: 15px; color: rgba(255, 255, 255, 0.5); display: block; font-size: 1.1rem; font-weight: 500; letter-spacing: 1px; }

.reviews time .fa-clock-o { margin: 0 5px 0; }

/**/
.reviews .r_answer { padding: 15px 0 0; border-top: 1px solid #504239; }

@media all and (max-width: 640px) { .reviews { padding: 80px 10% 140px; } }

@media all and (max-width: 480px) { .reviews { padding: 80px 5% 140px; }
  .reviews h2 { font-size: 2.4rem; } }

/*---------------*/
/* !COLIBROOT v1 */
/*---------------*/
html { font-size: 62.5%; }

body { background: #F7F6F2; color: #000000; font-family: "Playfair Display", serif; overflow-x: hidden; }

header, main, footer, section, aside, article, nav, form { -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

header::after, main::after, footer::after, section::after, aside::after, article::after, nav::after, form::after { clear: both; content: ""; display: table; }

.cycle-slideshow, .cycle-slide, .gmap div { -webkit-transition: none !important; -o-transition: none !important; transition: none !important; }

/**/
.home h1 { font-size: 3.6rem; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; font-family: "Playfair Display", serif; text-align: center; margin: 0 0 30px 0; position: relative; bottom: auto; right: auto; color: #000000; }

p { font-family: "Lato", sans-serif; color: primaryColor; font-size: 1.2rem; }

a { font-size: 1.2rem; color: primaryColor; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; text-decoration: none; }

a:hover { color: #463F26; }

h2 { font-size: 2rem; margin: 5px 0; }

h3 { font-size: 1.8rem; margin: 5px 0; font-weight: 300; }

/*---------------*/
/* !GEN */
/*---------------*/
main { margin: 0 auto; position: relative; z-index: 1; }

main > section { position: relative; padding: 0; margin: 0 auto; clear: both; }

.compte > section { width: 60%; }

.compte fieldset { border: 1px solid #57504B; padding: 10px 30px; margin: 30px 0; }

/**/
.ontop { background: #8E8277; bottom: 60px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; line-height: 28px; }

.ontop:hover { color: #FFF; background: #463F26; }

/**/
@-webkit-keyframes appear1 { 0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; } }
@keyframes appear1 { 0% { opacity: 0; }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; } }

@-webkit-keyframes appear2 { 0% { opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  30% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  60% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% { opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }

@keyframes appear2 { 0% { opacity: 0;
    -webkit-transform: scale(0.7);
    transform: scale(0.7); }
  30% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  60% { opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% { opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }

@-webkit-keyframes appear3 { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes appear3 { 0% { opacity: 0; }
  100% { opacity: 1; } }

.intro { position: relative; }

.slogan-transition { position: absolute; display: block; left: 30vw; width: 70vw; height: 550px; background-color: #F2F1EB; z-index: 9999; opacity: 0; z-index: 0; }

.slogan-transition strong { display: block; font-size: 8rem; color: #000; margin: 100px 0 0 80px; font-weight: 400; }

.logo-transition { position: absolute; z-index: 9998; display: block; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: none; opacity: 0; z-index: 1; }

.logo-transition img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; max-width: 500px; height: auto; }

.slogan-transition.anim { -webkit-animation-name: appear1; animation-name: appear1; -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease; }

.logo-transition.anim { -webkit-animation-name: appear2; animation-name: appear2; -webkit-animation-delay: 2.2s; animation-delay: 2.2s; -webkit-animation-duration: 3.5s; animation-duration: 3.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease; }

.home .slider { opacity: 0; }

.home .slider.anim { -webkit-animation-name: appear3; animation-name: appear3; -webkit-animation-delay: 4.6s; animation-delay: 4.6s; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease; animation-timing-function: ease; z-index: 2; }

/**/
.nivo-lightbox-nav, .nivo-lightbox-close { font-family: "Lato", sans-serif; }

/*---------------*/
/* !WYSI*/
/*---------------*/
.wysiwyg { position: relative; margin: 10px 0 0 30vw; padding: 0; width: 70%; max-width: 690px; z-index: 10; display: block; }

.wysi h1 { font-size: 3.2rem; font-weight: 400; color: #212121; line-height: 32px; letter-spacing: normal; text-transform: none; text-align: left; position: relative; display: block; margin: 0 0 25px 0; }

.wysi h2 { font-weight: 400; letter-spacing: -0.5px; margin: 5px 0 10px 0; }

.wysi h3 { font-weight: 400; letter-spacing: -0.3px; margin: 5px 0; }

.wysi a { font-family: "Lato", sans-serif; font-weight: 700; color: #FF1E00; font-size: 1.4rem; }

.wysi a:hover { color: #463F26; }

.wysi p { color: #1A1A1A; font-size: 1.4rem; padding: 2px 20px 2px 10px; font-family: "Lato", sans-serif; text-align: justify; }

.wysi ul, .wysi ol { font-family: "Lato", sans-serif; font-size: 1.2rem; margin: 10px; list-style-position: inside; }

.wysi li { color: #1A1A1A; font-size: 1.4rem; padding: 0; font-family: "Lato", sans-serif; text-align: justify; }

.wysi blockquote { font-size: 1.4rem; color: #1A1A1A; font-weight: 700; font-style: italic; padding: 5px 20px 5px 10px; }

.wysi b, .wysi strong { font-family: "Lato", sans-serif; font-weight: 700; font-size: 1.4rem; color: #1A1A1A; }

.wysi img { width: auto; max-width: 100%; height: auto; margin: 10px 0 20px 0; }

/**/
.download::after { clear: both; content: ""; display: table; }

.download a { color: #FF1E00; padding: 10px 5px; margin: 20px auto; text-decoration: none; display: inline-block; }

.download a:hover { color: "Lato", sans-serif; }

/**/
.social { position: relative; display: block; text-align: right; }

.social a { text-decoration: none; font-size: 2rem; color: #1A1A1A; }

.social a:hover { color: #FF1E00; }

.wysi .social_box, .social_box { overflow: hidden; padding: 0; margin: 5px 0; position: relative; z-index: 8000; min-height: 0; height: 0; -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right; text-align: right; }

.social_box.showed { min-height: 20px; height: auto; }

.social_box li { list-style: none; display: block; float: right; text-align: right; }

.social_box li a { display: block; width: 20px; height: 20px; line-height: 20px; font-size: 1.6rem; text-align: center; color: #FF1E00; text-align: right; }

.social_box li a:hover { color: #1A1A1A; }

/* details projet*/
.projet_details h1 { margin: 0 0 10px 0; padding: 0 15px 0 0; }

.modules { position: relative; margin: 10px 0 0 30vw; padding: 0; width: 70%; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }

.col_L { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 30%; flex: 1 1 30%; max-width: 277px; margin: 0 10px 0 0; padding: 14px 15px 30px 30px; }

.col_L:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #F2F1EB; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transition-delay: 0.7s; -o-transition-delay: 0.7s; transition-delay: 0.7s; z-index: 8; }

.col_L.anim:before { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }

.col_L:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #212121; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transition: all .7s; -o-transition: all .7s; transition: all .7s; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; z-index: 0; }

.col_L.anim:after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }

.col_L > * { position: relative; z-index: 9; opacity: 0; }

.col_L.anim > * { opacity: 1; -webkit-transition: all .8s; -o-transition: all .8s; transition: all .8s; -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; opacity: 1; }

.projet_details .txt { padding: 0 15px 0 0; }

.projet_details p { padding: 5px 0; }

strong.place { text-transform: uppercase; margin: 5px 0; display: block; font-family: "Lato", sans-serif; padding: 0 15px 0 0; }

/*---------------*/
/* !gallery photo */
/*---------------*/
/*---------------*/
/* !CONTACT */
/*---------------*/
.contact h3 { padding: 0 0 10px 0; }

.contact p { text-align: left; padding: 1px 0; margin: 0; }

.map { margin: 30px 0 0 0; width: auto; max-width: 715px; }

.map img { margin: 0; }

/*---------------*/
/* !FOOTER */
/*---------------*/
footer * { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }

footer { position: relative; padding: 0; width: 85%; text-align: left; margin: 170px 0 0 15%; -webkit-transition: .5s all; -o-transition: .5s all; transition: .5s all; }

footer li, footer a, footer p { color: #212121; font-size: 1.8rem; font-weight: normal; text-align: left; list-style: none; position: relative; text-decoration: none; font-family: "Lato", sans-serif; }

footer div { position: relative; z-index: 2; }

.f_fst { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.f_info { margin: 0 0 35px 7%; background-color: #463F26; padding: 25px; width: 220px; min-height: 220px; height: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; vertical-align: top; -ms-flex-item-align: end; align-self: flex-end; }

.f_info p:first-of-type { font-family: "Playfair Display", serif; color: #fff; font-weight: 400; font-size: 2.9rem; line-height: 30px; text-align: left; }

.f_info a:hover { letter-spacing: 1.5px; }

.f_info p { color: #fff; font-size: 1.6rem; }

.f_address { display: inline-block; vertical-align: top; margin: 40px 0 23px 40px; }

.tel { font-weight: 900; font-size: 2.2rem; color: #212121; margin: 6px 0 0 0; }

footer:after { content: ''; width: 100%; height: 112px; background-color: #F2F1EB; position: absolute; bottom: 0; left: 0; z-index: 0; }

footer .colibri { position: absolute; bottom: 10px; right: 10px; }

footer .colibri a { text-decoration: none; color: rgba(0, 0, 0, 0.1); padding: 0 10px; }

/*---------------*/
/* !MEDIA QUERIES MAIN */
/*---------------*/
@media all and (min-width: 1400px) { .modules { width: 78%; margin: 10px 0 0 20vw; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
  .contact { width: 78%; max-width: 100%; margin: 10px 0 0 20vw; }
  .contact .wysi { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
  .contact .wysi h1 { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; }
  .wysidescr { padding: 0 30px 0 0; }
  .map { margin: 0; } }

@media all and (max-width: 1024px) { .wysiwyg { width: 100%; margin: 0; max-width: 100%; }
  .wysi { margin: 10px auto 0 auto; width: 90%; }
  .slogan-transition { left: 0; width: 100%; height: 550px; padding: 5%; text-align: center; }
  .slogan-transition strong { font-size: 4rem; margin: 0 auto; } }

@media all and (max-width: 800px) { .wysi { width: calc(100% - 100px); display: block; }
  .col_L { width: 100%; max-width: 100%; }
  footer { width: 100%; margin: 70px 0 0 0; } }

/* 480 galaxy s - 414 iphone 6s */
@media all and (max-width: 480px) { .wysi { width: calc(100% - 50px); } }

/* 414 -iphone 6s - 375 iphone 6, 360 galaxy s3, nexus , note - htc one - xperia z - */

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