/* @group Master */
/* @group Reset */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v2.0 | 20110126 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* @end of Reset */
/* @group Fonts */
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Book.otf"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-BookItalic.otf"); font-weight: normal; font-style: italic; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Medium.otf"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-MediumItalic.otf"); font-weight: 600; font-style: italic; }
@font-face { font-family: "Gotham"; src: url("../fonts/Gotham-Bold.otf"); font-weight: 700; font-style: normal; }
@font-face { font-family: "SignPainterHouseBrush"; src: url("../fonts/SignPainterHouseBrush.ttf"); font-weight: normal; font-style: normal; }
/* @end of Fonts */
/* @group Variables */
/* @end of Variables */
/* @group Utilities */
.u-verticalAlign { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }

.u-bottomAlign { position: absolute; bottom: 0; left: calc(50% + 15px); }

/* @end of Utilities */
/* @group General */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body { font-size: 0.875em; font-family: "Gotham", Helvetica, Arial, sans-serif; color: #404040; -webkit-font-smoothing: antialiased; background: white; -webkit-transition: background 0.3s ease-out; -moz-transition: background 0.3s ease-out; transition: background 0.3s ease-out; }
body.is-colored { background: #375a67; }
body.is-blocked { overflow-y: hidden; }

a { text-decoration: none; }

i { text-align: left; text-indent: -9999px; overflow: hidden; }

.clear { clear: both; }

hr { border: 0; }

.rel { position: relative; }

strong { font-weight: 700; }

.header { position: fixed; z-index: 100; top: 20px; left: 20px; }
.header .header-title { width: 210px; min-height: 150px; background: url(../images/logo-popPills.png) no-repeat center top; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.header .header-title, .header .header-subtitle { text-align: left; text-indent: -9999px; overflow: hidden; }
.header .header-button { position: absolute; opacity: 0; bottom: 0; left: 0; min-width: 210px; text-align: center; background: #b7502e; padding: 2px 5px; -webkit-transform: rotate(-10deg) skew(-10deg); -moz-transform: rotate(-10deg) skew(-10deg); -ms-transform: rotate(-10deg) skew(-10deg); -o-transform: rotate(-10deg) skew(-10deg); transform: rotate(-10deg) skew(-10deg); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; }
.header .header-button:hover { background: #4f889c; }
.header .header-button .header-button-text { -webkit-transform: skew(10deg); -moz-transform: skew(10deg); -ms-transform: skew(10deg); -o-transform: skew(10deg); transform: skew(10deg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: white; font-size: 0.78571em; }
.header.is-visible .header-title { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.header.is-visible .header-button { opacity: 1; -webkit-transform: rotate(2deg) skew(-10deg); -moz-transform: rotate(2deg) skew(-10deg); -ms-transform: rotate(2deg) skew(-10deg); -o-transform: rotate(2deg) skew(-10deg); transform: rotate(2deg) skew(-10deg); -webkit-transition: all 0.3s ease-out 0.3s, background 0.3s ease-out; -moz-transition: all 0.3s ease-out 0.3s, background 0.3s ease-out; transition: all 0.3s ease-out 0.3s, background 0.3s ease-out; }

.button { margin: 0 auto; width: 280px; display: block; text-align: center; background: #b7502e; padding: 2px 5px; border: 0; -webkit-transform: rotate(-2deg) skew(-10deg); -moz-transform: rotate(-2deg) skew(-10deg); -ms-transform: rotate(-2deg) skew(-10deg); -o-transform: rotate(-2deg) skew(-10deg); transform: rotate(-2deg) skew(-10deg); -webkit-transition: background 0.3s ease-out; -moz-transition: background 0.3s ease-out; transition: background 0.3s ease-out; }
.button:hover { background: #4f889c; }
.button .button-text { -webkit-transform: skew(10deg); -moz-transform: skew(10deg); -ms-transform: skew(10deg); -o-transform: skew(10deg); transform: skew(10deg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: white; font-size: 1.07143em; }
.button.in-touch { background: #375a67; margin: 30px auto; width: 260px; -webkit-transform: rotate(2deg) skew(-10deg); -moz-transform: rotate(2deg) skew(-10deg); -ms-transform: rotate(2deg) skew(-10deg); -o-transform: rotate(2deg) skew(-10deg); transform: rotate(2deg) skew(-10deg); }
.button.in-touch:hover { background: #d8752d; }
.button.in-touch .button-text { font-size: 0.78571em; }

.introduction, .excerpts, .shop { min-height: 100vh; }

.grid { max-width: 1000px; margin: 0 auto; }
.grid .one-third, .grid .two-thirds, .grid .half { float: left; }
.grid .one-third { width: 395px; padding-right: 20px; }
.grid .two-thirds { width: 605px; padding-left: 20px; }
.grid .half { width: 50%; position: relative; }
.grid .half.half-left { padding-right: 20px; }
.grid .half.half-right { padding-left: 20px; }

.introduction { margin: 40px auto; position: relative; }
.introduction p { line-height: 1.57143em; margin-bottom: 20px; }
.introduction p.bigger { font-size: 1.42857em; margin-bottom: 40px; }
.introduction img { margin: 0 auto; display: block; }
.introduction blockquote { line-height: 1.57143em; margin-bottom: 20px; position: relative; font-style: italic; }
.introduction blockquote:before, .introduction blockquote:after { content: ''; position: absolute; background: url("../images/i-quote.svg") no-repeat; background-size: 100%; display: block; width: 25px; height: 25px; }
.introduction blockquote:before { top: -7px; left: -15px; }
.introduction blockquote:after { bottom: 5px; right: 0px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
.introduction .title { color: #d8752d; font-weight: 700; text-transform: uppercase; }
.introduction .enjoy { color: #d8752d; font-size: 3.42857em; text-align: center; font-family: "SignPainterHouseBrush"; }

.credits { margin-top: 40px; font-size: 0.85714em; }
.credits .half { margin-bottom: 10px; }
.credits .half-left { color: #4f889c; text-align: right; }
.credits a { color: #404040; -webkit-transition: text-decoration 0.3s ease-out; -moz-transition: text-decoration 0.3s ease-out; transition: text-decoration 0.3s ease-out; }
.credits a:hover { text-decoration: underline; }

.excerpts { margin: 40px auto; position: relative; }
.excerpts p.bigger { font-size: 1.42857em; margin-bottom: 40px; line-height: 1.57143em; }

.slider { position: relative; min-height: 525px; margin-bottom: 40px; }
.slider li { position: absolute; top: 0; left: 0; opacity: 0; margin-bottom: 40px; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }
.slider li.is-visible { opacity: 1; }
.slider li img { max-width: 100%; height: auto; margin-bottom: 10px; }
.slider li p { text-align: right; color: #777; line-height: 1.57143em; font-size: 1em; }

.video { margin-bottom: 40px; width: 100%; min-height: 593px; }

.shop { color: white; padding: 0; position: relative; }
.shop .grid { position: relative; overflow: hidden; }
.shop .shop-section { margin: 80px auto; overflow: hidden; }
.shop .shop-section.is-darker { background: #4f889c; padding: 80px 0; }
.shop .shop-section.is-darker .shop-subtitle { color: #375a67; }
.shop .shop-section.is-darker .shop-details { color: #375a67; }
.shop .shop-section.is-darker .shop-price-amount { color: #b7502e; }
.shop .shop-section.is-darker .shop-price-conditions { color: #b7502e; }
.shop .shop-section.is-darker .shop-image { border: 5px solid #b7502e; }
.shop .shop-section.is-darker .shop-ask a { color: #b7502e; }
.shop .shop-section.is-darker .shop-ask a:hover { color: white; }
.shop .shop-title { margin-bottom: 10px; font-family: "SignPainterHouseBrush"; font-size: 3.57143em; }
.shop p { line-height: 1.57143em; margin-bottom: 20px; }
.shop p.bigger { font-size: 1.42857em; margin-bottom: 40px; }
.shop .shop-subtitle { font-weight: 700; color: #4f889c; margin-bottom: 5px; }
.shop .shop-details { color: #4f889c; margin-bottom: 20px; }
.shop .shop-details li { line-height: 1.57143em; }
.shop .shop-details li:before { margin-right: 5px; content: '-'; }
.shop .shop-price { font-family: "SignPainterHouseBrush"; font-size: 1.14286em; line-height: 1.25em; margin-bottom: 0; }
.shop .shop-price .shop-price-amount { color: #d8752d; margin-right: 10px; display: block; float: left; font-size: 3.57143em; line-height: 0.7em; text-shadow: 1px 1px 0 white; }
.shop .shop-price .shop-price-conditions { color: #d8752d; }
.shop .shop-image { width: 100%; height: auto; border-radius: 10px; border: 5px solid #d8752d; }
.shop .shop-images { margin-top: 20px; overflow: hidden; }
.shop .shop-images li { float: left; text-align: center; width: 150px; overflow: hidden; margin-right: 15px; }
.shop .shop-images li:last-child { margin: 0; }
.shop .shop-preview { position: relative; margin-bottom: 10px; width: 150px; height: 100px; overflow: hidden; }
.shop .shop-preview:hover { cursor: pointer; }
.shop .shop-preview div { z-index: 10; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); display: block; position: absolute; top: 0; left: 0; border-radius: 5px; font-family: "SignPainterHouseBrush"; font-size: 3.28571em; color: #375a67; opacity: 1; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }
.shop .shop-preview div span { line-height: 2.28261em; }
.shop .shop-preview div:hover { opacity: 0; }
.shop .shop-preview img { border-radius: 5px; width: 100%; height: auto; }
.shop .shop-description { font-weight: 600; }
.shop .shop-explanations { margin: 30px 0 0 0; text-align: center; }
.shop .shop-ask { font-style: italic; }
.shop .shop-ask a { color: #d8752d; font-weight: 600; -webkit-transition: color 0.3s ease-out; -moz-transition: color 0.3s ease-out; transition: color 0.3s ease-out; }
.shop .shop-ask a:hover { color: white; }
.shop .shop-button { position: fixed; z-index: 100; opacity: 0; bottom: 40px; right: 40px; align-items: stretch; width: 197px; height: 105px; background: url(../images/i-checkOut.png); text-align: center; border: none; outline: 0; cursor: pointer; font-size: 1em; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.shop .shop-button .shop-button-price { position: absolute; top: 15px; margin: 0 auto; left: 0; right: 0; color: #d8752d; text-shadow: 1px 1px 0 #4f889c; font-family: "SignPainterHouseBrush"; font-size: 3.92857em; }
.shop .shop-button .shop-button-text { position: absolute; left: 0; bottom: 10px; width: 180px; display: block; background: #b7502e; padding: 2px 5px; opacity: 0; -webkit-transform: rotate(10deg) skew(-10deg); -moz-transform: rotate(10deg) skew(-10deg); -ms-transform: rotate(10deg) skew(-10deg); -o-transform: rotate(10deg) skew(-10deg); transform: rotate(10deg) skew(-10deg); -webkit-transition: -webkit-transform 0.3s ease-out 0s, opacity 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out 0s, opacity 0.3s ease-out; transition: transform 0.3s ease-out 0s, opacity 0.3s ease-out; }
.shop .shop-button .shop-button-text > span { font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: white; font-size: 0.78571em; -webkit-transform: skew(10deg); -moz-transform: skew(10deg); -ms-transform: skew(10deg); -o-transform: skew(10deg); transform: skew(10deg); }
.shop .shop-button.animate .shop-button-price { -webkit-animation: scale 0.3s ease-out; -moz-animation: scale 0.3s ease-out; animation: scale 0.3s ease-out; }
.shop .shop-button.is-visible { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.shop .shop-button.is-visible .shop-button-text { opacity: 1; -webkit-transform: rotate(-2deg) skew(-10deg); -moz-transform: rotate(-2deg) skew(-10deg); -ms-transform: rotate(-2deg) skew(-10deg); -o-transform: rotate(-2deg) skew(-10deg); transform: rotate(-2deg) skew(-10deg); -webkit-transition: -webkit-transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, background 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, background 0.3s ease-out; transition: transform 0.3s ease-out 0.3s, opacity 0.3s ease-out 0.3s, background 0.3s ease-out; }
.shop .shop-button:hover .shop-button-text { background: #4f889c; }
.shop .shop-currency { position: fixed; top: 20%; right: 10%; z-index: 1000; }
.shop .shop-currency .shop-currency-button { opacity: 0; cursor: pointer; outline: none; -webkit-transform: rotate(15deg) skew(-10deg); -moz-transform: rotate(15deg) skew(-10deg); -ms-transform: rotate(15deg) skew(-10deg); -o-transform: rotate(15deg) skew(-10deg); transform: rotate(15deg) skew(-10deg); }
.shop .shop-currency .shop-currency-button .button-text { padding-right: 20px; position: relative; }
.shop .shop-currency .shop-currency-button .button-text:after { font-weight: normal; position: absolute; top: -200%; right: -20px; font-family: "SignPainterHouseBrush"; font-size: 5.71429em; display: block; color: #4f889c; text-shadow: 1px 1px 0 white; content: attr(data-currency-sign); -webkit-transition: background 0.3s ease-out; -moz-transition: background 0.3s ease-out; transition: background 0.3s ease-out; }
.shop .shop-currency .shop-currency-button:hover .button-text:after { color: #d8752d; }
.shop .shop-currency.is-visible .shop-currency-button { opacity: 1; -webkit-transform: rotate(5deg) skew(-10deg); -moz-transform: rotate(5deg) skew(-10deg); -ms-transform: rotate(5deg) skew(-10deg); -o-transform: rotate(5deg) skew(-10deg); transform: rotate(5deg) skew(-10deg); -webkit-transition: all 0.3s ease-out, background 0.3s ease-out; -moz-transition: all 0.3s ease-out, background 0.3s ease-out; transition: all 0.3s ease-out, background 0.3s ease-out; }

.pop-in { position: fixed; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; background: rgba(255, 255, 255, 0.7); z-index: -10; -webkit-transition: opacity 0.3s ease-out; -moz-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; }
.pop-in.is-visible { opacity: 1; z-index: 200; }
.pop-in img { width: 1000px; height: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
.pop-in span { display: block; font-family: "SignPainterHouseBrush"; color: #d8752d; position: absolute; right: 40px; top: 20px; cursor: pointer; font-size: 3.57143em; }

@-webkit-keyframes scale { 0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.5); }
  100% { -webkit-transform: scale(1); } }
@-moz-keyframes scale { 0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(1.5); }
  100% { -moz-transform: scale(1); } }
@keyframes scale { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  50% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); }
  100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }
input[type="number"] { width: 30px; border-radius: 5px; border: 0; padding: 2px 0 2px 5px; outline: none; font-family: "Gotham", Helvetica, Arial, sans-serif; font-weight: 600; }

@media (max-width: 1000px) { .grid { padding: 0 20px; max-width: 100%; margin: 0 auto; }
  .grid .one-third, .grid .two-thirds, .grid .half { float: left; }
  .grid .one-third { width: 100%; margin: 0 auto; }
  .grid .one-third .half { width: 50%; }
  .grid .one-third .half.half-left { padding-right: 20px; }
  .grid .one-third .half.half-right { padding-left: 20px; }
  .grid .two-thirds { width: 100%; }
  .grid .two-thirds .half { width: 50%; }
  .grid .two-thirds .half.half-left { padding-right: 20px; }
  .grid .two-thirds .half.half-right { padding-left: 20px; }
  .grid .half { width: 100%; position: relative; }
  .grid .half.half-left, .grid .half.half-right { padding: 0; }
  .grid .half .half { width: 50%; }
  .grid .half .half.half-left { padding-right: 20px; }
  .grid .half .half.half-right { padding-left: 20px; }
  .shop .shop-image { margin-bottom: 30px; }
  .shop .shop-images { text-align: center; }
  .shop .shop-images li { display: inline-block; float: none; }
  .shop .shop-explanations { text-align: left; }
  .u-bottomAlign { position: relative; left: 0; }
  .pop-in img { width: 100%; height: auto; padding: 20px; }
  .pop-in span { right: 20px; top: 20px; }
  .video { margin-bottom: 40px; width: 100%; min-height: 50vw; } }
.remerciements .title, .annulation .title { margin: 40px 0; color: #d8752d; font-size: 3.42857em; text-align: center; font-family: "SignPainterHouseBrush"; }
.remerciements p, .annulation p { text-align: center; line-height: 1.57143em; font-size: 1.42857em; margin-bottom: 40px; }
.remerciements a, .annulation a { color: white; }

.footer { padding: 240px 0; min-height: 230px; height: 100vh; text-align: center; overflow: hidden; }
.footer .button { width: 300px; }
.footer h2 { color: #b7502e; font-family: "SignPainterHouseBrush"; font-size: 8.57143em; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); }
.footer p { color: #4f889c; font-family: "SignPainterHouseBrush"; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); font-size: 2.85714em; }

/* @end of General */
/* @end of Master */

/*# sourceMappingURL=master.css.map */