@charset "UTF-8";
/* Generated by Font Squirrel (https://www.fontsquirrel.com) on April 3, 2016 */
@font-face { font-family: 'brandon_grotesquemedium'; src: url("font/brandon_med-webfont.eot"); src: url("font/brandon_med-webfont.eot?#iefix") format("embedded-opentype"), url("font/brandon_med-webfont.woff2") format("woff2"), url("font/brandon_med-webfont.woff") format("woff"), url("font/brandon_med-webfont.ttf") format("truetype"), url("font/brandon_med-webfont.svg#brandon_grotesquemedium") format("svg"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'brandon_grotesquethin'; src: url("font/brandon_thin-webfont.eot"); src: url("font/brandon_thin-webfont.eot?#iefix") format("embedded-opentype"), url("font/brandon_thin-webfont.woff2") format("woff2"), url("font/brandon_thin-webfont.woff") format("woff"), url("font/brandon_thin-webfont.ttf") format("truetype"), url("font/brandon_thin-webfont.svg#brandon_grotesquethin") format("svg"); font-weight: normal; font-style: normal; }
body { background-color: #fffcf4; }

a { text-decoration: none; }

ul { padding: 0; margin: 0; }

h2 { position: relative; color: rgba(0, 0, 0, 0.7); }
h2:before, h2:after { content: ""; position: absolute; width: 25px; height: 2px; bottom: 12px; background-color: rgba(0, 0, 0, 0.7); }
h2:before { left: -40px; }
h2:after { right: -40px; }

h3 { margin-bottom: 1rem; color: #38e2aa; letter-spacing: 0.05rem; }

.divider { height: 25px; margin-bottom: 20px; opacity: 0.7; }

section#intro { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 0 40px; }
@media (min-width: 550px) { section#intro { padding: 30px 0; } }
section#intro p { width: 90%; text-align: center; }
@media (min-width: 550px) { section#intro p { width: 33.333333%; } }
section#intro .image-intro { width: 100%; }
@media (min-width: 550px) { section#intro .image-intro { display: none; } }

section#sisters { display: flex; flex-direction: column; padding: 0; }
@media (min-width: 1024px) { section#sisters { flex-direction: row; } }
@media (max-width: 1024px) { section#sisters { padding-bottom: 60px; } }
@media (max-width: 550px) { section#sisters { padding-bottom: 0; } }
section#sisters .image-intro { width: 100%; }
@media (min-width: 550px) { section#sisters .image-intro { display: none; } }
section#sisters .sisters-presentation { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; }
@media (min-width: 1024px) { section#sisters .sisters-presentation { width: 50%; } }
section#sisters .sisters-presentation .sisters-content { display: flex; flex-direction: column; align-items: center; }
@media (min-width: 550px) { section#sisters .sisters-presentation .sisters-content { flex-direction: row; } }
@media (min-width: 1024px) { section#sisters .sisters-presentation .sisters-content { flex-direction: column; } }
section#sisters .sisters-presentation .sisters-content .content-block { display: flex; flex-direction: column; align-items: center; width: 100%; }
section#sisters .sisters-presentation .sisters-content p { width: 90%; text-align: center; }
@media (min-width: 550px) { section#sisters .sisters-presentation .sisters-content p { width: 90%; } }
@media (min-width: 1024px) { section#sisters .sisters-presentation .sisters-content p { width: 50%; } }
section#sisters .sisters-carousel { width: 100%; min-height: 525px; }
@media (min-width: 1024px) { section#sisters .sisters-carousel { width: 50%; } }
@media (max-width: 550px) { section#sisters .sisters-carousel { display: none; } }
section#sisters .sisters-carousel .slick-slider { padding-top: 40px; width: 100%; }
@media (max-width: 1024px) { section#sisters .sisters-carousel .slick-slider { margin: 0 auto; width: 95%; } }
section#sisters .sisters-carousel .slick-slider .slick-list { height: 525px !important; }
@media (max-width: 1024px) { section#sisters .sisters-carousel .slick-slider .slick-list { height: 100% !important; } }
section#sisters .sisters-carousel .slick-slider .slick-list .slick-slide img { width: 100%; border: 5px solid #fff; box-sizing: border-box; }
section#sisters .sisters-carousel .slick-slider .slick-slide { max-width: 100%; }
section#sisters .sisters-carousel .slick-slider .slick-dots { position: absolute; width: 8%; top: 55%; transform: translateY(-40%); left: -15px; }
@media (max-width: 1024px) { section#sisters .sisters-carousel .slick-slider .slick-dots { width: 100%; top: 103%; } }
section#sisters .sisters-carousel .slick-slider .slick-dots li { display: flex; align-items: center; justify-content: center; margin: 0 0 1rem; width: 30px; height: 30px; }
@media (max-width: 1024px) { section#sisters .sisters-carousel .slick-slider .slick-dots li { display: inline-block; margin: 0 0 0 4rem; } }
section#sisters .sisters-carousel .slick-slider .slick-dots li button { width: 10px; height: 10px; background: #fff; border: 2px solid rgba(0, 0, 0, 0.7); border-radius: 0; transform: rotate(45deg); }
section#sisters .sisters-carousel .slick-slider .slick-dots li button:before { display: none; }
section#sisters .sisters-carousel .slick-slider .slick-dots .slick-active button { position: relative; width: 25px; height: 25px; top: 2px; }
section#sisters .sisters-carousel .slick-slider .slick-dots .slick-active button:before { display: block; left: 1px; }

section#products, section#origins { display: flex; flex-wrap: wrap; padding: 80px 0 40px; }
section#products .block-1, section#origins .block-1 { display: flex; flex-direction: column; width: 42.5%; }
@media (max-width: 550px) { section#products .block-1, section#origins .block-1 { flex-direction: row; order: 2; width: 100%; } }
section#products .block-1 .image, section#origins .block-1 .image { width: 100%; }
@media (max-width: 550px) { section#products .block-1 .image, section#origins .block-1 .image { width: 50%; } }
section#products .block-1 .image:after, section#origins .block-1 .image:after { content: ""; display: block; padding-bottom: 101.5%; background-size: cover; background-repeat: no-repeat; }
section#products .block-2, section#origins .block-2 { display: flex; flex-direction: column; width: 57.5%; }
@media (max-width: 550px) { section#products .block-2, section#origins .block-2 { width: 100%; order: 1; } }
section#products .block-2 .image-3, section#origins .block-2 .image-3 { width: 100%; order: 2; }
section#products .block-2 .image-3:after, section#origins .block-2 .image-3:after { content: ""; display: block; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; }
section#products .block-2 .block-3, section#origins .block-2 .block-3 { display: flex; flex-wrap: wrap; order: 1; }
section#products .block-2 .block-3 .image-4, section#origins .block-2 .block-3 .image-4 { width: 50%; }
@media (max-width: 550px) { section#products .block-2 .block-3 .image-4, section#origins .block-2 .block-3 .image-4 { order: 2; width: 100%; } }
section#products .block-2 .block-3 .image-4:after, section#origins .block-2 .block-3 .image-4:after { content: ""; display: block; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; }
section#products .block-2 .block-3 .prestations-content, section#origins .block-2 .block-3 .prestations-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 5%; width: 40%; text-align: center; }
@media (max-width: 550px) { section#products .block-2 .block-3 .prestations-content, section#origins .block-2 .block-3 .prestations-content { order: 1; width: 100%; } }

@media (min-width: 551px) and (max-width: 1199px) { section#products .block-1 { order: 2; flex-direction: row; width: 100%; } }
section#products .block-1 .image-1:after { background-image: url("../images/creations/nos_creations_1.jpg"); background-position: right; }
section#products .block-1 .image-2:after { background-image: url("../images/creations/nos_creations_2.jpg"); background-position: center; }
@media (min-width: 551px) and (max-width: 1199px) { section#products .block-2 { order: 1; position: relative; width: 100%; } }
section#products .block-2 .image-3:after { background-image: url("../images/creations/nos_creations_3.jpg"); }
@media (min-width: 551px) and (max-width: 1199px) { section#products .block-2 .image-3 { position: absolute; width: 50%; right: 0; bottom: 0; } }
@media (min-width: 551px) and (max-width: 1199px) { section#products .block-3 .prestations-content { width: 100% !important; } }
section#products .block-3 .image-4:after { background-image: url("../images/creations/nos_creations_4.jpg"); }

section#origins { display: flex; flex-wrap: wrap; padding: 80px 0 40px; /* ORIGINS PICTURES *********************************************************/ }
@media (max-width: 1199px) { section#origins { padding: 60px 0 40px; } }
section#origins .block-1 { display: flex; flex-direction: column; width: 42.5%; }
@media (max-width: 1199px) { section#origins .block-1 { flex-direction: row; order: 2; width: 100%; } }
section#origins .block-1 .image { width: 100%; }
@media (max-width: 1199px) { section#origins .block-1 .image { width: 50%; } }
section#origins .block-1 .image:after { content: ""; display: block; padding-bottom: 101.5%; background-size: cover; background-repeat: no-repeat; }
section#origins .block-2 { display: flex; flex-direction: column; position: relative; width: 57.5%; }
@media (max-width: 1199px) { section#origins .block-2 { width: 100%; } }
@media (min-width: 1200px) { section#origins .block-2 { width: 57.5%; } }
section#origins .block-2 .image-3 { width: 100%; order: 2; }
section#origins .block-2 .image-3:after { content: ""; display: block; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; }
@media (min-width: 501px) and (max-width: 1199px) { section#origins .block-2 .image-3 { width: 50%; position: absolute; right: 0; bottom: 0; } }
section#origins .block-2 .block-3 { display: flex; flex-wrap: wrap; order: 1; }
section#origins .block-2 .block-3 .image-4 { width: 50%; order: 2; }
@media (max-width: 550px) { section#origins .block-2 .block-3 .image-4 { width: 100%; } }
section#origins .block-2 .block-3 .image-4:after { content: ""; display: block; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; }
section#origins .block-2 .block-3 .prestations-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 5%; width: 40%; text-align: center; }
@media (max-width: 1199px) { section#origins .block-2 .block-3 .prestations-content { order: 1; width: 100%; } }
section#origins .block-1 .image-1:after { background-image: url("../images/produits/nos_produits_1.jpg"); background-position: center; }
section#origins .block-1 .image-2:after { background-image: url("../images/produits/nos_produits_2.jpg"); }
section#origins .block-2 .image-3:after { background-image: url("../images/produits/nos_produits_3.jpg"); }
section#origins .block-3 .image-4:after { background-image: url("../images/produits/nos_produits_4.jpg"); }

section#menu { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 0 40px; }
@media (max-width: 550px) { section#menu { padding: 30px 0 40px; } }
@media (max-width: 550px) { section#menu h2 { width: 150px; text-align: center; }
  section#menu h2:after, section#menu h2:before { bottom: 23px; } }
section#menu .icon-svg { padding-bottom: 30px; height: 40px; width: 80px; }
section#menu a { display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; }
section#menu a:hover { color: #333; border-color: #888; outline: 0; }

section#events { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 0 40px; }
@media (max-width: 550px) { section#events { padding: 60px 0 40px; } }
section#events .block-1 { display: flex; }
@media (min-width: 551px) and (max-width: 1199px) { section#events .block-1 { flex-wrap: wrap; } }
@media (max-width: 550px) { section#events .block-1 { flex-direction: column; } }
section#events .block-1 .image { width: 33.33333%; }
@media (min-width: 551px) and (max-width: 1199px) { section#events .block-1 .image { width: 50%; } }
@media (max-width: 550px) { section#events .block-1 .image { width: 100%; } }
section#events .block-1 .image:after { content: ""; display: block; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; }
@media (max-width: 1199px) { section#events .block-1 .image-1 { order: 2; } }
section#events .block-1 .image-1:after { background-image: url("../images/evenements/nos_evenements_1.jpg"); }
@media (max-width: 1199px) { section#events .block-1 .image-2 { order: 3; } }
section#events .block-1 .image-2:after { background-image: url("../images/evenements/nos_evenements_2.jpg"); }
section#events .block-1 .what-we-do { display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 0 5%; width: 33.33333%; text-align: center; }
@media (min-width: 551px) and (max-width: 1199px) { section#events .block-1 .what-we-do { order: 1; width: 100%; padding: 0 20%; } }
@media (max-width: 550px) { section#events .block-1 .what-we-do { order: 1; width: 100%; } }
section#events .block-2 { display: flex; width: 100%; }
section#events .block-2 .image { width: 50%; }
section#events .block-2 .image:after { content: ""; display: block; padding-bottom: 100%; background-size: cover; background-repeat: no-repeat; }
section#events .block-2 .image-3:after { background-image: url("../images/evenements/nos_evenements_3.jpg"); background-position: 71%; }
section#events .block-2 .image-4:after { background-image: url("../images/evenements/nos_evenements_4.jpg"); }

section#contact { display: flex; padding: 80px 90px 40px; }
@media (min-width: 551px) and (max-width: 1199px) { section#contact { padding: 80px 20px 40px; } }
@media (max-width: 768px) { section#contact { flex-direction: column; padding: 60px 0 40px; } }
section#contact .block { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; }
@media (max-width: 768px) { section#contact .block { width: 100%; } }
section#contact .contact-map { box-sizing: border-box; width: 70%; border: 5px solid #fff; border-radius: 2px; }
@media (max-width: 768px) { section#contact .contact-map { order: 2; display: none; } }
section#contact .contact-details { padding: 0 60px; width: 30%; }
@media (max-width: 768px) { section#contact .contact-details { order: 1; padding: 0 0 30px; width: 100%; } }
section#contact .contact-details p { text-align: center; }
section#contact .contact-details ul { display: flex; list-style: none; margin-bottom: 0; }
section#contact .contact-details ul li:not(last-child) { margin-right: 10px; }
section#contact .contact-details .locator { display: inline-block; height: 38px; margin-top: 30px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; }
section#contact .contact-details .locator:hover { color: #333; border-color: #888; outline: 0; }
@media (min-width: 768px) { section#contact .contact-details .locator { display: none; } }

section#instagram { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 80px 0 0; }
@media (max-width: 550px) { section#instagram { padding: 0; } }
section#instagram p { width: 90%; text-align: center; }
@media (min-width: 550px) { section#instagram p { width: 33.333333%; } }
section#instagram p a, section#instagram p a:active, section#instagram p a:focus, section#instagram p a:hover { color: #222; }
section#instagram #instafeed { display: flex; flex-wrap: wrap; }
section#instagram #instafeed a { display: flex; width: 20%; }
@media (max-width: 550px) { section#instagram #instafeed a { width: 50%; } }
section#instagram #instafeed a img { height: 100%; width: 100%; }

footer { display: flex !important; align-items: center; justify-content: center; background-color: #fff; height: 30px; }
footer p { margin-bottom: 0; font-size: 12px; text-align: center; }

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }

/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/* HTML5 display definitions ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { /* 1 */ display: block; }

/** Add the correct display in IE 9-. */
audio, canvas, progress, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Add the correct display in IE 10-. 1. Add the correct display in IE. */
template, [hidden] { display: none; }

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

/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active, a:hover { outline-width: 0; }

/* Text-level semantics ========================================================================== */
/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

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

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content ========================================================================== */
/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/* Forms ========================================================================== */
/** Change font properties to `inherit` in all browsers (opinionated). */
button, input, select, textarea { font: inherit; }

/** Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold; }

/** Show the overflow in IE. 1. Show the overflow in Edge. 2. Show the overflow in Edge, Firefox, and IE. */
button, input, select { /* 2 */ overflow: visible; }

/** Remove the margin in Safari. 1. Remove the margin in Firefox and Safari. */
button, input, select, textarea { /* 1 */ margin: 0; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** Change the cursor in all browsers (opinionated). */
button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; }

/** Restore the default cursor to disabled elements unset by the previous rule. */
[disabled] { cursor: default; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }

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

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; }

/** Change the border, margin, and padding in all browsers (opinionated). */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** Correct the odd appearance of search inputs in Chrome and Safari. */
[type="search"] { -webkit-appearance: textfield; }

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

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/
/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/
/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
@media (max-width: 550px) { .container { padding: 0; } }

.column, .columns { width: 100%; float: left; box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) { .container { width: 100%; padding: 0; } }
/* For devices larger than 550px */
@media (min-width: 550px) { .container { width: 100%; }
  .column, .columns { margin-left: 4%; }
  .column:first-child, .columns:first-child { margin-left: 0; }
  .one.column, .one.columns { width: 4.66666666667%; }
  .two.columns { width: 13.3333333333%; }
  .three.columns { width: 22%; }
  .four.columns { width: 30.6666666667%; }
  .five.columns { width: 39.3333333333%; }
  .six.columns { width: 48%; }
  .seven.columns { width: 56.6666666667%; }
  .eight.columns { width: 65.3333333333%; }
  .nine.columns { width: 74.0%; }
  .ten.columns { width: 82.6666666667%; }
  .eleven.columns { width: 91.3333333333%; }
  .twelve.columns { width: 100%; margin-left: 0; }
  .one-third.column { width: 30.6666666667%; }
  .two-thirds.column { width: 65.3333333333%; }
  .one-half.column { width: 48%; }
  /* Offsets */
  .offset-by-one.column, .offset-by-one.columns { margin-left: 8.66666666667%; }
  .offset-by-two.column, .offset-by-two.columns { margin-left: 17.3333333333%; }
  .offset-by-three.column, .offset-by-three.columns { margin-left: 26%; }
  .offset-by-four.column, .offset-by-four.columns { margin-left: 34.6666666667%; }
  .offset-by-five.column, .offset-by-five.columns { margin-left: 43.3333333333%; }
  .offset-by-six.column, .offset-by-six.columns { margin-left: 52%; }
  .offset-by-seven.column, .offset-by-seven.columns { margin-left: 60.6666666667%; }
  .offset-by-eight.column, .offset-by-eight.columns { margin-left: 69.3333333333%; }
  .offset-by-nine.column, .offset-by-nine.columns { margin-left: 78.0%; }
  .offset-by-ten.column, .offset-by-ten.columns { margin-left: 86.6666666667%; }
  .offset-by-eleven.column, .offset-by-eleven.columns { margin-left: 95.3333333333%; }
  .offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
  .offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; } }
/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html { font-size: 62.5%; }

body { font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; font-family: 'brandon_grotesquethin'; color: #222; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 { margin-bottom: 2rem; }

h1 { font-family: 'brandon_grotesquethin'; }

h2 { font-family: 'brandon_grotesquemedium'; margin-bottom: 2rem; }

h3, h4, h5, h6 { font-family: 'brandon_grotesquethin'; margin-bottom: 1rem; }

h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -.1rem; }

h2 { font-size: 1.9rem; line-height: 1.25; letter-spacing: -.1rem; font-weight: 400; }

h3 { font-size: 1.6rem; line-height: 1.3; letter-spacing: -.1rem; }

h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }

h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }

h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) { h1 { font-size: 2.4rem; }
  h2 { font-size: 2.2rem; }
  h3 { font-size: 1.7rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; } }
p { margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #1EAEDB; }

a:hover { color: #0FA0CE; }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; text-transform: uppercase; text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; }

.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; outline: 0; }

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; }

.button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; }

/* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; }

input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; }

label, legend { display: block; margin-bottom: .5rem; font-weight: 600; }

fieldset { padding: 0; border-width: 0; }

input[type="checkbox"], input[type="radio"] { display: inline; }

label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; }

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul { list-style: circle inside; }

ol { list-style: decimal inside; }

ol, ul { padding-left: 0; margin-top: 0; }

ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }

li { margin-bottom: 1rem; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; }

pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; }

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; }

th:first-child, td:first-child { padding-left: 0; }

th:last-child, td:last-child { padding-right: 0; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button, .button { margin-bottom: 1rem; }

input, textarea, select, fieldset { margin-bottom: 1.5rem; }

pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width { width: 100%; box-sizing: border-box; }

.u-max-full-width { max-width: 100%; box-sizing: border-box; }

.u-pull-right { float: right; }

.u-pull-left { float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Self Clearing Goodness */
.container:after, .row:after, .u-cf { content: ""; display: table; clear: both; }

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
/* Larger than mobile */
/* Larger than phablet (also point when grid becomes active) */
/* Larger than tablet */
/* Larger than desktop */
/* Larger than Desktop HD */
nav { position: fixed; z-index: 2; width: 100%; top: 0; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); transition: all 0.3s ease-in-out; z-index: 15; }
nav a, nav a:visited, nav a:focus { color: #333; font-family: 'brandon_grotesquethin'; font-weight: 600; }
nav a:hover { color: #333; }
nav ul.nav-desktop { display: none; }
nav .nav-mobile { display: flex; align-items: center; justify-content: space-between; width: 100%; }
nav .nav-mobile .menu-icon { display: flex; justify-content: center; align-items: center; margin-right: 20px; width: 35px; height: 35px; cursor: pointer; transition: all 0.3s ease-in-out; }
nav .nav-mobile .menu-icon svg { height: 25px; }
nav .nav-mobile .menu-opened { transform: rotate(90deg); }
nav .nav-mobile img { margin: 10px 0 10px 20px; height: 30px; }
nav .nav-mobile ul { list-style: none; position: absolute; padding: 20px; top: 75px; right: 10px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); transition: all 0.3s ease-in-out; }
nav .nav-mobile ul li { margin-bottom: 2rem; }
nav .nav-mobile ul li a { padding: 10px 20px; }
nav .nav-mobile ul:before { bottom: 100%; right: 9%; border: solid transparent; content: " "; height: 0; width: 0; top: -20px; position: absolute; pointer-events: none; border-color: rgba(194, 225, 245, 0); border-bottom-color: #fff; border-width: 12px; margin-left: -10px; }
nav .nav-mobile ul.menu-hidden { display: none; }
@media (min-width: 1000px) { nav .nav-mobile { display: none; }
  nav ul.nav-desktop { display: flex; justify-content: space-around; margin: 0 auto; max-width: 960px; list-style: none; height: 60px; align-items: center; }
  nav ul.nav-desktop li { flex-basis: 14.30%; margin-bottom: 0; text-align: center; transition: all 0.3s ease-in-out; }
  nav ul.nav-desktop .nav-logo { display: none; visibility: hidden; transition: all 0.3s ease-in-out; }
  nav ul.nav-desktop .nav-logo img { height: 45px; transition: all 0.3s ease-in-out; } }

.nav-page ul { justify-content: space-between; }
.nav-page ul li { flex-basis: inherit; }
.nav-page ul .nav-logo { display: block; visibility: hidden; }

nav.scrolled ul.nav-desktop .nav-logo { display: block; visibility: visible; }

.overlay-mobile-menu { position: fixed; width: 100%; height: 100vh; top: 0; right: 0; bottom: 0; left: 0; background-color: transparent; z-index: 10; }

.overlay-mobile-menu.hidden { display: none; }

header { display: flex; position: relative; box-sizing: border-box; flex-direction: column; padding-top: 145px; width: 100%; height: 620px; }
header #item { stroke: #fff; }
header:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background-image: url("../images/header.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; }
header .container-logo { display: flex; align-items: center; justify-content: center; position: relative; left: 50%; transform: translateX(-50%); z-index: 1; background-color: #fff; border-radius: 50%; height: 220px; width: 220px; transition: all 0.3s ease-in-out; }
@media (max-width: 550px) { header .container-logo { height: 160px; width: 160px; } }
header .container-logo img { height: 200px; }
@media (max-width: 550px) { header .container-logo img { height: 140px; } }
header .container-logo.scrolled { opacity: 0; }
header .header-content { position: relative; z-index: 1; padding-top: 30px; text-align: center; }
@media (max-width: 550px) { header .header-content { padding: 30px 20px 0; } }
header .header-content h1 { font-size: 1.9rem; text-transform: uppercase; letter-spacing: 0.05rem; color: #fff; }
header .header-content h1 small { text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.1rem; }

.page-header { display: flex; flex-direction: column; position: relative; box-sizing: border-box; padding-top: 60px; width: 100%; height: 300px; }
.page-header #item { stroke: #fff; }
.page-header:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; background-image: url("../images/header.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; }
.page-header .container-logo { display: flex; align-items: center; justify-content: center; position: relative; left: 50%; transform: translateX(-50%); z-index: 1; background-color: #fff; border-radius: 50%; height: 100px; min-height: 100px; width: 100px; transition: all 0.3s ease-in-out; }
.page-header .container-logo img { height: 90px; }
.page-header .container-logo.scrolled { opacity: 0; }
.page-header .header-content { position: relative; z-index: 1; padding-top: 30px; text-align: center; }
.page-header .header-content h1 { font-size: 1.9rem; text-transform: uppercase; letter-spacing: 0.05rem; color: #fff; }
.page-header .header-content h1 small { text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.1rem; }

.current-menu { display: flex; flex-wrap: wrap; padding: 60px 5% 0; }
.current-menu h2 { margin-bottom: 0.5rem; }
@media (min-width: 551px) and (max-width: 1199px) { .current-menu h2 { text-align: center; } }
@media (min-width: 551px) and (max-width: 1024px) { .current-menu h2:before, .current-menu h2:after { display: none; } }
.current-menu p { text-align: center; }
.current-menu span { margin-bottom: 1rem; text-align: center; }
.current-menu i { margin-bottom: 1rem; font-weight: 600; }
.current-menu ul { list-style: none; text-align: center; }
.current-menu ul li strong { font-family: 'brandon_grotesquethin'; font-size: 1.6rem; line-height: 1.3; letter-spacing: 0.05rem; color: #38e2aa; }
@media (min-width: 550px) { .current-menu ul li strong { font-size: 1.7rem; } }
.current-menu section { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; padding: 0 2%; width: 33.33333%; }
@media (max-width: 550px) { .current-menu section { width: 100%; } }
.current-menu section#formules { display: flex; flex-direction: row; justify-content: space-around; padding-bottom: 60px; width: 100%; }
@media (max-width: 550px) { .current-menu section#formules { flex-direction: column; padding-bottom: 0; } }
.current-menu section#formules .formule { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; width: 30%; background-color: #fff; border: 1px solid #ffdada; border-radius: 2px; }
@media (max-width: 550px) { .current-menu section#formules .formule { margin-bottom: 30px; width: 100%; } }
.current-menu section#drinks, .current-menu section#coffee { margin-top: 30px; width: 50%; }
@media (max-width: 550px) { .current-menu section#drinks, .current-menu section#coffee { margin-top: 0; width: 100%; } }
.current-menu section#drinks .divided, .current-menu section#coffee .divided { display: flex; width: 100%; }
.current-menu section#drinks .divided ul, .current-menu section#coffee .divided ul { width: 50%; }

/* We are hiding the invisible nav outside the screen so we need to avoid the horizontal scroll */
body.okayNav-loaded { overflow-x: hidden; }

.okayNav-header { position: fixed; top: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; width: 100%; padding: 0 15px; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-direction: row; -ms-flex-direction: row; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }

.okayNav:not(.loaded) { visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.okayNav ul { /* We want two navigations - one hidden and one visible */ float: right; }

.okayNav a { position: relative; z-index: 1; }

.okayNav__nav--visible { overflow: hidden; white-space: nowrap; }

.okayNav__nav--visible li { display: inline-block; }

.okayNav__nav--visible a { /* Link styling for the visible part of the nav */ display: block; padding: 15px 15px; transition: color 200ms cubic-bezier(0.55, 0, 0.1, 1); }

.okayNav__nav--visible:empty ~ .okayNav__menu-toggle { top: 0; }

/* Link styling for the off-screen part of the nav */
.okayNav__nav--invisible { position: fixed; top: 7rem; bottom: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

.okayNav__nav--invisible a { display: block; width: 240px; padding: 15px; background: #fff; }

.okayNav__nav--invisible.nav-left { left: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); }

.okayNav__nav--invisible.nav-right { right: 0; -webkit-transform: translateX(100%); transform: translateX(100%); }

.okayNav__nav--invisible.transition-enabled { transition: -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1); transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1); transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1); }

.okayNav__nav--invisible.nav-open { -webkit-transform: translateX(0); transform: translateX(0); }

/* Kebab icon */
.okayNav__menu-toggle { position: relative; z-index: 1; top: 15px; float: left; width: 40px; height: 20px; cursor: pointer; transition: -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1); transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1); transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1); }

.okayNav__menu-toggle.okay-invisible { position: absolute; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; opacity: 0; }

.okayNav__menu-toggle span { position: absolute; right: 0; left: 0; display: block; width: 4px; height: 4px; margin: auto; pointer-events: none; border-radius: 50%; }

.okayNav__menu-toggle span:nth-child(1) { top: 0; }

.okayNav__menu-toggle span:nth-child(2) { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

.okayNav__menu-toggle span:nth-child(3) { bottom: 0; }

.okayNav__menu-toggle.icon--active { /* Kebab icon when off-screen nav is open */ -webkit-transform: rotate(90deg); transform: rotate(90deg); }

/* Slider */
.slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }

.slick-list:focus { outline: none; }

.slick-list.dragging { cursor: pointer; cursor: hand; }

.slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slick-track { position: relative; top: 0; left: 0; display: block; }

.slick-track:before, .slick-track:after { display: table; content: ''; }

.slick-track:after { clear: both; }

.slick-loading .slick-track { visibility: hidden; }

.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }

[dir='rtl'] .slick-slide { float: right; }

.slick-slide img { display: block; }

.slick-slide.slick-loading img { display: none; }

.slick-slide.dragging img { pointer-events: none; }

.slick-initialized .slick-slide { display: block; }

.slick-loading .slick-slide { visibility: hidden; }

.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }

.slick-arrow.slick-hidden { display: none; }

/* Slider */
.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face { font-family: 'slick'; font-weight: normal; font-style: normal; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); }
/* Arrows */
.slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; margin-top: -10px\9; /*lte IE 8*/ -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; }

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; }

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; }

.slick-prev:before, .slick-next:before { font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-prev { left: -25px; }

[dir='rtl'] .slick-prev { right: -25px; left: auto; }

.slick-prev:before { content: '←'; }

[dir='rtl'] .slick-prev:before { content: '→'; }

.slick-next { right: -25px; }

[dir='rtl'] .slick-next { right: auto; left: -25px; }

.slick-next:before { content: '→'; }

[dir='rtl'] .slick-next:before { content: '←'; }

/* Dots */
.slick-slider { margin-bottom: 30px; }

.slick-dots { position: absolute; bottom: -45px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; }

.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }

.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }

.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }

.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }

.slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.slick-dots li.slick-active button:before { opacity: .75; color: black; }