One third grid
Two thirds grid
One half grid
One quarter grid
One quarter grid
...
`
*
* This would create a `div` that, at ‘desktop’ sizes, takes up a quarter of the
* horizontal space, a half of that space at ‘tablet’ sizes, and goes full width
* at ‘mobile’ sizes.
*
* Demo: jsfiddle.net/inuitcss/WS4Ge
*
*/
@media only screen and (max-width: 500px) {
/**
* Whole
*/
.palm-one-whole {
width: 100%;
}
/**
* Halves
*/
.palm-one-half, .palm-two-quarters, .palm-three-sixths, .palm-four-eighths, .palm-five-tenths, .palm-six-twelfths {
width: 50%;
}
/**
* Thirds
*/
.palm-one-third, .palm-two-sixths, .palm-four-twelfths {
width: 33.333%;
}
.palm-two-thirds, .palm-four-sixths, .palm-eight-twelfths {
width: 66.666%;
}
/**
* Quarters
*/
.palm-one-quarter, .palm-two-eighths, .palm-three-twelfths {
width: 25%;
}
.palm-three-quarters, .palm-six-eighths, .palm-nine-twelfths {
width: 75%;
}
/**
* Fifths
*/
.palm-one-fifth, .palm-two-tenths {
width: 20%;
}
.palm-two-fifths, .palm-four-tenths {
width: 40%;
}
.palm-three-fifths, .palm-six-tenths {
width: 60%;
}
.palm-four-fifths, .palm-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.palm-one-sixth, .palm-two-twelfths {
width: 16.666%;
}
.palm-five-sixths, .palm-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.palm-one-eighth {
width: 12.5%;
}
.palm-three-eighths {
width: 37.5%;
}
.palm-five-eighths {
width: 62.5%;
}
.palm-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.palm-one-tenth {
width: 10%;
}
.palm-three-tenths {
width: 30%;
}
.palm-seven-tenths {
width: 70%;
}
.palm-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.palm-one-twelfth {
width: 8.333%;
}
.palm-five-twelfths {
width: 41.666%;
}
.palm-seven-twelfths {
width: 58.333%;
}
.palm-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 501px) and (max-width: 986px) {
/**
* Whole
*/
.lap-one-whole {
width: 100%;
}
/**
* Halves
*/
.lap-one-half, .lap-two-quarters, .lap-three-sixths, .lap-four-eighths, .lap-five-tenths, .lap-six-twelfths {
width: 50%;
}
/**
* Thirds
*/
.lap-one-third, .lap-two-sixths, .lap-four-twelfths {
width: 33.333%;
}
.lap-two-thirds, .lap-four-sixths, .lap-eight-twelfths {
width: 66.666%;
}
/**
* Quarters
*/
.lap-one-quarter, .lap-two-eighths, .lap-three-twelfths {
width: 25%;
}
.lap-three-quarters, .lap-six-eighths, .lap-nine-twelfths {
width: 75%;
}
/**
* Fifths
*/
.lap-one-fifth, .lap-two-tenths {
width: 20%;
}
.lap-two-fifths, .lap-four-tenths {
width: 40%;
}
.lap-three-fifths, .lap-six-tenths {
width: 60%;
}
.lap-four-fifths, .lap-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.lap-one-sixth, .lap-two-twelfths {
width: 16.666%;
}
.lap-five-sixths, .lap-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.lap-one-eighth {
width: 12.5%;
}
.lap-three-eighths {
width: 37.5%;
}
.lap-five-eighths {
width: 62.5%;
}
.lap-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.lap-one-tenth {
width: 10%;
}
.lap-three-tenths {
width: 30%;
}
.lap-seven-tenths {
width: 70%;
}
.lap-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.lap-one-twelfth {
width: 8.333%;
}
.lap-five-twelfths {
width: 41.666%;
}
.lap-seven-twelfths {
width: 58.333%;
}
.lap-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 501px) {
/**
* Whole
*/
.lap-and-up-one-whole {
width: 100%;
}
/**
* Halves
*/
.lap-and-up-one-half, .lap-and-up-two-quarters, .lap-and-up-three-sixths, .lap-and-up-four-eighths, .lap-and-up-five-tenths, .lap-and-up-six-twelfths {
width: 50%;
}
/**
* Thirds
*/
.lap-and-up-one-third, .lap-and-up-two-sixths, .lap-and-up-four-twelfths {
width: 33.333%;
}
.lap-and-up-two-thirds, .lap-and-up-four-sixths, .lap-and-up-eight-twelfths {
width: 66.666%;
}
/**
* Quarters
*/
.lap-and-up-one-quarter, .lap-and-up-two-eighths, .lap-and-up-three-twelfths {
width: 25%;
}
.lap-and-up-three-quarters, .lap-and-up-six-eighths, .lap-and-up-nine-twelfths {
width: 75%;
}
/**
* Fifths
*/
.lap-and-up-one-fifth, .lap-and-up-two-tenths {
width: 20%;
}
.lap-and-up-two-fifths, .lap-and-up-four-tenths {
width: 40%;
}
.lap-and-up-three-fifths, .lap-and-up-six-tenths {
width: 60%;
}
.lap-and-up-four-fifths, .lap-and-up-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.lap-and-up-one-sixth, .lap-and-up-two-twelfths {
width: 16.666%;
}
.lap-and-up-five-sixths, .lap-and-up-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.lap-and-up-one-eighth {
width: 12.5%;
}
.lap-and-up-three-eighths {
width: 37.5%;
}
.lap-and-up-five-eighths {
width: 62.5%;
}
.lap-and-up-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.lap-and-up-one-tenth {
width: 10%;
}
.lap-and-up-three-tenths {
width: 30%;
}
.lap-and-up-seven-tenths {
width: 70%;
}
.lap-and-up-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.lap-and-up-one-twelfth {
width: 8.333%;
}
.lap-and-up-five-twelfths {
width: 41.666%;
}
.lap-and-up-seven-twelfths {
width: 58.333%;
}
.lap-and-up-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (max-width: 986px) {
/**
* Whole
*/
.portable-one-whole {
width: 100%;
}
/**
* Halves
*/
.portable-one-half, .portable-two-quarters, .portable-three-sixths, .portable-four-eighths, .portable-five-tenths, .portable-six-twelfths {
width: 50%;
}
/**
* Thirds
*/
.portable-one-third, .portable-two-sixths, .portable-four-twelfths {
width: 33.333%;
}
.portable-two-thirds, .portable-four-sixths, .portable-eight-twelfths {
width: 66.666%;
}
/**
* Quarters
*/
.portable-one-quarter, .portable-two-eighths, .portable-three-twelfths {
width: 25%;
}
.portable-three-quarters, .portable-six-eighths, .portable-nine-twelfths {
width: 75%;
}
/**
* Fifths
*/
.portable-one-fifth, .portable-two-tenths {
width: 20%;
}
.portable-two-fifths, .portable-four-tenths {
width: 40%;
}
.portable-three-fifths, .portable-six-tenths {
width: 60%;
}
.portable-four-fifths, .portable-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.portable-one-sixth, .portable-two-twelfths {
width: 16.666%;
}
.portable-five-sixths, .portable-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.portable-one-eighth {
width: 12.5%;
}
.portable-three-eighths {
width: 37.5%;
}
.portable-five-eighths {
width: 62.5%;
}
.portable-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.portable-one-tenth {
width: 10%;
}
.portable-three-tenths {
width: 30%;
}
.portable-seven-tenths {
width: 70%;
}
.portable-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.portable-one-twelfth {
width: 8.333%;
}
.portable-five-twelfths {
width: 41.666%;
}
.portable-seven-twelfths {
width: 58.333%;
}
.portable-eleven-twelfths {
width: 91.666%;
}
}
@media only screen and (min-width: 987px) {
/**
* Whole
*/
.desk-one-whole {
width: 100%;
}
/**
* Halves
*/
.desk-one-half, .desk-two-quarters, .desk-three-sixths, .desk-four-eighths, .desk-five-tenths, .desk-six-twelfths {
width: 50%;
}
/**
* Thirds
*/
.desk-one-third, .desk-two-sixths, .desk-four-twelfths {
width: 33.333%;
}
.desk-two-thirds, .desk-four-sixths, .desk-eight-twelfths {
width: 66.666%;
}
/**
* Quarters
*/
.desk-one-quarter, .desk-two-eighths, .desk-three-twelfths {
width: 25%;
}
.desk-three-quarters, .desk-six-eighths, .desk-nine-twelfths {
width: 75%;
}
/**
* Fifths
*/
.desk-one-fifth, .desk-two-tenths {
width: 20%;
}
.desk-two-fifths, .desk-four-tenths {
width: 40%;
}
.desk-three-fifths, .desk-six-tenths {
width: 60%;
}
.desk-four-fifths, .desk-eight-tenths {
width: 80%;
}
/**
* Sixths
*/
.desk-one-sixth, .desk-two-twelfths {
width: 16.666%;
}
.desk-five-sixths, .desk-ten-twelfths {
width: 83.333%;
}
/**
* Eighths
*/
.desk-one-eighth {
width: 12.5%;
}
.desk-three-eighths {
width: 37.5%;
}
.desk-five-eighths {
width: 62.5%;
}
.desk-seven-eighths {
width: 87.5%;
}
/**
* Tenths
*/
.desk-one-tenth {
width: 10%;
}
.desk-three-tenths {
width: 30%;
}
.desk-seven-tenths {
width: 70%;
}
.desk-nine-tenths {
width: 90%;
}
/**
* Twelfths
*/
.desk-one-twelfth {
width: 8.333%;
}
.desk-five-twelfths {
width: 41.666%;
}
.desk-seven-twelfths {
width: 58.333%;
}
.desk-eleven-twelfths {
width: 91.666%;
}
}
/**
* If you have set the additional `$responsive-extra` variable to ‘true’ in
* `_vars.scss` then you now have access to the following class available to
* accomodate much larger screen resolutions.
*/
/* endif */
/*------------------------------------*\
$PUSH
\*------------------------------------*/
/**
* Push classes, to move grid items over to the right by certain amounts.
*/
/**
* Whole
*/
.push--one-whole {
left: 100%;
}
/**
* Halves
*/
.push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths {
left: 50%;
}
/**
* Thirds
*/
.push--one-third, .push--two-sixths, .push--four-twelfths {
left: 33.333%;
}
.push--two-thirds, .push--four-sixths, .push--eight-twelfths {
left: 66.666%;
}
/**
* Quarters
*/
.push--one-quarter, .push--two-eighths, .push--three-twelfths {
left: 25%;
}
.push--three-quarters, .push--six-eighths, .push--nine-twelfths {
left: 75%;
}
/**
* Fifths
*/
.push--one-fifth, .push--two-tenths {
left: 20%;
}
.push--two-fifths, .push--four-tenths {
left: 40%;
}
.push--three-fifths, .push--six-tenths {
left: 60%;
}
.push--four-fifths, .push--eight-tenths {
left: 80%;
}
/**
* Sixths
*/
.push--one-sixth, .push--two-twelfths {
left: 16.666%;
}
.push--five-sixths, .push--ten-twelfths {
left: 83.333%;
}
/**
* Eighths
*/
.push--one-eighth {
left: 12.5%;
}
.push--three-eighths {
left: 37.5%;
}
.push--five-eighths {
left: 62.5%;
}
.push--seven-eighths {
left: 87.5%;
}
/**
* Tenths
*/
.push--one-tenth {
left: 10%;
}
.push--three-tenths {
left: 30%;
}
.push--seven-tenths {
left: 70%;
}
.push--nine-tenths {
left: 90%;
}
/**
* Twelfths
*/
.push--one-twelfth {
left: 8.333%;
}
.push--five-twelfths {
left: 41.666%;
}
.push--seven-twelfths {
left: 58.333%;
}
.push--eleven-twelfths {
left: 91.666%;
}
/**
* Not a particularly great selector, but the DRYest way to do things.
*/
[class*="push--"] {
position: relative;
}
@media only screen and (min-width: 501px) and (max-width: 986px) {
/**
* Whole
*/
.push--lap-one-whole {
left: 100%;
}
/**
* Halves
*/
.push--lap-one-half, .push--lap-two-quarters, .push--lap-three-sixths, .push--lap-four-eighths, .push--lap-five-tenths, .push--lap-six-twelfths {
left: 50%;
}
/**
* Thirds
*/
.push--lap-one-third, .push--lap-two-sixths, .push--lap-four-twelfths {
left: 33.333%;
}
.push--lap-two-thirds, .push--lap-four-sixths, .push--lap-eight-twelfths {
left: 66.666%;
}
/**
* Quarters
*/
.push--lap-one-quarter, .push--lap-two-eighths, .push--lap-three-twelfths {
left: 25%;
}
.push--lap-three-quarters, .push--lap-six-eighths, .push--lap-nine-twelfths {
left: 75%;
}
/**
* Fifths
*/
.push--lap-one-fifth, .push--lap-two-tenths {
left: 20%;
}
.push--lap-two-fifths, .push--lap-four-tenths {
left: 40%;
}
.push--lap-three-fifths, .push--lap-six-tenths {
left: 60%;
}
.push--lap-four-fifths, .push--lap-eight-tenths {
left: 80%;
}
/**
* Sixths
*/
.push--lap-one-sixth, .push--lap-two-twelfths {
left: 16.666%;
}
.push--lap-five-sixths, .push--lap-ten-twelfths {
left: 83.333%;
}
/**
* Eighths
*/
.push--lap-one-eighth {
left: 12.5%;
}
.push--lap-three-eighths {
left: 37.5%;
}
.push--lap-five-eighths {
left: 62.5%;
}
.push--lap-seven-eighths {
left: 87.5%;
}
/**
* Tenths
*/
.push--lap-one-tenth {
left: 10%;
}
.push--lap-three-tenths {
left: 30%;
}
.push--lap-seven-tenths {
left: 70%;
}
.push--lap-nine-tenths {
left: 90%;
}
/**
* Twelfths
*/
.push--lap-one-twelfth {
left: 8.333%;
}
.push--lap-five-twelfths {
left: 41.666%;
}
.push--lap-seven-twelfths {
left: 58.333%;
}
.push--lap-eleven-twelfths {
left: 91.666%;
}
}
@media only screen and (min-width: 987px) {
/**
* Whole
*/
.push--desk-one-whole {
left: 100%;
}
/**
* Halves
*/
.push--desk-one-half, .push--desk-two-quarters, .push--desk-three-sixths, .push--desk-four-eighths, .push--desk-five-tenths, .push--desk-six-twelfths {
left: 50%;
}
/**
* Thirds
*/
.push--desk-one-third, .push--desk-two-sixths, .push--desk-four-twelfths {
left: 33.333%;
}
.push--desk-two-thirds, .push--desk-four-sixths, .push--desk-eight-twelfths {
left: 66.666%;
}
/**
* Quarters
*/
.push--desk-one-quarter, .push--desk-two-eighths, .push--desk-three-twelfths {
left: 25%;
}
.push--desk-three-quarters, .push--desk-six-eighths, .push--desk-nine-twelfths {
left: 75%;
}
/**
* Fifths
*/
.push--desk-one-fifth, .push--desk-two-tenths {
left: 20%;
}
.push--desk-two-fifths, .push--desk-four-tenths {
left: 40%;
}
.push--desk-three-fifths, .push--desk-six-tenths {
left: 60%;
}
.push--desk-four-fifths, .push--desk-eight-tenths {
left: 80%;
}
/**
* Sixths
*/
.push--desk-one-sixth, .push--desk-two-twelfths {
left: 16.666%;
}
.push--desk-five-sixths, .push--desk-ten-twelfths {
left: 83.333%;
}
/**
* Eighths
*/
.push--desk-one-eighth {
left: 12.5%;
}
.push--desk-three-eighths {
left: 37.5%;
}
.push--desk-five-eighths {
left: 62.5%;
}
.push--desk-seven-eighths {
left: 87.5%;
}
/**
* Tenths
*/
.push--desk-one-tenth {
left: 10%;
}
.push--desk-three-tenths {
left: 30%;
}
.push--desk-seven-tenths {
left: 70%;
}
.push--desk-nine-tenths {
left: 90%;
}
/**
* Twelfths
*/
.push--desk-one-twelfth {
left: 8.333%;
}
.push--desk-five-twelfths {
left: 41.666%;
}
.push--desk-seven-twelfths {
left: 58.333%;
}
.push--desk-eleven-twelfths {
left: 91.666%;
}
}
/*------------------------------------*\
$PULL
\*------------------------------------*/
/**
* Pull classes, to move grid items over to the right by certain amounts.
*/
/**
* Not a particularly great selector, but the DRYest way to do things.
*/
[class*="pull--"] {
position: relative;
}
/**
* Whole
*/
.pull--one-whole {
right: 100%;
}
/**
* Halves
*/
.pull--one-half, .pull--two-quarters, .pull--three-sixths, .pull--four-eighths, .pull--five-tenths, .pull--six-twelfths {
right: 50%;
}
/**
* Thirds
*/
.pull--one-third, .pull--two-sixths, .pull--four-twelfths {
right: 33.333%;
}
.pull--two-thirds, .pull--four-sixths, .pull--eight-twelfths {
right: 66.666%;
}
/**
* Quarters
*/
.pull--one-quarter, .pull--two-eighths, .pull--three-twelfths {
right: 25%;
}
.pull--three-quarters, .pull--six-eighths, .pull--nine-twelfths {
right: 75%;
}
/**
* Fifths
*/
.pull--one-fifth, .pull--two-tenths {
right: 20%;
}
.pull--two-fifths, .pull--four-tenths {
right: 40%;
}
.pull--three-fifths, .pull--six-tenths {
right: 60%;
}
.pull--four-fifths, .pull--eight-tenths {
right: 80%;
}
/**
* Sixths
*/
.pull--one-sixth, .pull--two-twelfths {
right: 16.666%;
}
.pull--five-sixths, .pull--ten-twelfths {
right: 83.333%;
}
/**
* Eighths
*/
.pull--one-eighth {
right: 12.5%;
}
.pull--three-eighths {
right: 37.5%;
}
.pull--five-eighths {
right: 62.5%;
}
.pull--seven-eighths {
right: 87.5%;
}
/**
* Tenths
*/
.pull--one-tenth {
right: 10%;
}
.pull--three-tenths {
right: 30%;
}
.pull--seven-tenths {
right: 70%;
}
.pull--nine-tenths {
right: 90%;
}
/**
* Twelfths
*/
.pull--one-twelfth {
right: 8.333%;
}
.pull--five-twelfths {
right: 41.666%;
}
.pull--seven-twelfths {
right: 58.333%;
}
.pull--eleven-twelfths {
right: 91.666%;
}
@media only screen and (min-width: 987px) {
/**
* Whole
*/
.pull--desk-one-whole {
right: 100%;
}
/**
* Halves
*/
.pull--desk-one-half, .pull--desk-two-quarters, .pull--desk-three-sixths, .pull--desk-four-eighths, .pull--desk-five-tenths, .pull--desk-six-twelfths {
right: 50%;
}
/**
* Thirds
*/
.pull--desk-one-third, .pull--desk-two-sixths, .pull--desk-four-twelfths {
right: 33.333%;
}
.pull--desk-two-thirds, .pull--desk-four-sixths, .pull--desk-eight-twelfths {
right: 66.666%;
}
/**
* Quarters
*/
.pull--desk-one-quarter, .pull--desk-two-eighths, .pull--desk-three-twelfths {
right: 25%;
}
.pull--desk-three-quarters, .pull--desk-six-eighths, .pull--desk-nine-twelfths {
right: 75%;
}
/**
* Fifths
*/
.pull--desk-one-fifth, .pull--desk-two-tenths {
right: 20%;
}
.pull--desk-two-fifths, .pull--desk-four-tenths {
right: 40%;
}
.pull--desk-three-fifths, .pull--desk-six-tenths {
right: 60%;
}
.pull--desk-four-fifths, .pull--desk-eight-tenths {
right: 80%;
}
/**
* Sixths
*/
.pull--desk-one-sixth, .pull--desk-two-twelfths {
right: 16.666%;
}
.pull--desk-five-sixths, .pull--desk-ten-twelfths {
right: 83.333%;
}
/**
* Eighths
*/
.pull--desk-one-eighth {
right: 12.5%;
}
.pull--desk-three-eighths {
right: 37.5%;
}
.pull--desk-five-eighths {
right: 62.5%;
}
.pull--desk-seven-eighths {
right: 87.5%;
}
/**
* Tenths
*/
.pull--desk-one-tenth {
right: 10%;
}
.pull--desk-three-tenths {
right: 30%;
}
.pull--desk-seven-tenths {
right: 70%;
}
.pull--desk-nine-tenths {
right: 90%;
}
/**
* Twelfths
*/
.pull--desk-one-twelfth {
right: 8.333%;
}
.pull--desk-five-twelfths {
right: 41.666%;
}
.pull--desk-seven-twelfths {
right: 58.333%;
}
.pull--desk-eleven-twelfths {
right: 91.666%;
}
}
/*------------------------------------*\
$BRAND
\*------------------------------------*/
/**
* `.brand` is a quick and simple way to apply your brand face and/or color to
* any element using a handy helper class.
*/
.brand {
font-family: Helvetica Neue, sans-serif!important;
color: #4a8ec2!important;
}
.brand-face {
font-family: Helvetica Neue, sans-serif!important;
}
.brand-color,
.brand-colour {
color: #4a8ec2!important;
}
/**
* Applique une font-size en REM avec fallback en pixels
* @param {px} $size - font-size voulue
* @param {px} $base-size (15px) - font-size dans html
*
* @example scss
* @include font-size(20px);
* // affiche :
* font-size: 20px;
* font-size: 1.33333rem;
*
* @include font-size(20px, 20px);
* // affiche :
* font-size: 20px;
* font-size: 1rem;
*
*/
/**
* Applique une line-height en REM avec fallback en pixels
* @param {px} $size - font-size voulue
* @param {px} $base-size (15px) - font-size dans html
*
* @example scss
* @include line-height(20px);
* // affiche :
* line-height: 20px;
* line-height: 1.33333rem;
*
* @include line-height(20px, 20px);
* // affiche :
* line-height: 20px;
* line-height: 1rem;
*
*/
/**
* Renvoie une taille en REM
* @param {px} $size - font-size voulue
* @param {px} $base-size (15px) - font-size dans html
*
* @example scss
* px2rem(20px); // renvoie 1.33333rem;
* px2rem(20px, 20px); // renvoie 1rem;
*
*/
/**
* Ajoute des propriétés de clearfix
*
* @example scss
* include clearfix;
*/
/**
* Englobe le content dans une media-query
*/
/**
* @description Output spacing ( padding and margin ) rules
*
* @param String $property
* @param String $value
*/
.u-margin {
margin: 20px !important;
}
.u-margin-top {
margin-top: 20px !important;
}
.u-margin-top-0 {
margin-top: 0 !important;
}
.u-margin-top-10px {
margin-top: 10px !important;
}
.u-margin-bottom {
margin-bottom: 20px !important;
}
.u-margin-bottom-10px {
margin-bottom: 10px !important;
}
.u-padding-top {
padding-top: 20px !important;
}
.u-padding-top-0 {
padding-top: 0 !important;
}
.u-padding-right {
padding-right: 20px !important;
}
.u-padding-bottom {
padding-bottom: 20px !important;
}
.u-padding-bottom-0 {
padding-bottom: 0 !important;
}
@media only screen and (min-width: 990px) {
.u-padding-top\@desk {
padding-top: 20px !important;
}
}
@media only screen and (min-width: 990px) {
.u-padding-bottom\@desk {
padding-bottom: 20px !important;
}
}
/**
* Renvoie une chaine avec unité, en nombre sans son unité
* @param {string} $number - chaine
*
* @example scss
* strip-units(20px); // renvoie 20;
* strip-units(1.5em); // renvoie 1.5;
*/
.u-clear:after {
content: "";
display: table;
clear: both;
}
.u-float-left {
float: left;
}
.u-float-right {
float: right;
}
.u-relative {
position: relative;
}
.u-table {
display: table;
}
.u-cell {
display: table-cell;
vertical-align: middle;
}
.u-hidden {
display: none;
}
.u-align-center {
text-align: center !important;
}
.u-align-left {
text-align: left !important;
}
.u-upper {
text-transform: uppercase;
}
.u-break-word {
word-break: break-word;
}
.u-padding {
padding: 20px;
}
.u-border {
border: 1px solid #3e3e41;
}
.u-spacer {
display: block;
height: 20px;
}
.u-block {
display: block !important;
}
.u-iblock {
display: inline-block;
}
.u-regular {
font-weight: 400 !important;
}
.u-bold {
font-weight: 700 !important;
}
.u-color-gold {
color: #bca351 !important;
}
.u-color-orange {
color: #e94e1b !important;
}
.u-fill-gold {
fill: #bca351 !important;
}
.u-regular {
font-weight: 400 !important;
}
.u-w-5 {
width: 5% !important;
}
.u-w-10 {
width: 10% !important;
}
.u-w-15 {
width: 15% !important;
}
.u-w-20 {
width: 20% !important;
}
.u-w-25 {
width: 25% !important;
}
.u-w-30 {
width: 30% !important;
}
.u-w-35 {
width: 35% !important;
}
.u-w-40 {
width: 40% !important;
}
.u-w-45 {
width: 45% !important;
}
.u-w-50 {
width: 50% !important;
}
.u-w-55 {
width: 55% !important;
}
.u-w-60 {
width: 60% !important;
}
.u-w-65 {
width: 65% !important;
}
.u-w-70 {
width: 70% !important;
}
.u-w-75 {
width: 75% !important;
}
.u-w-80 {
width: 80% !important;
}
.u-w-85 {
width: 85% !important;
}
.u-w-90 {
width: 90% !important;
}
.u-w-95 {
width: 95% !important;
}
.u-w-100 {
width: 100% !important;
}
.u-email-obfuscate:before {
content: attr(data-website) "@" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
/**
* @deprecated
*/
/**
* La charte graphique du site, au sens classique du terme : titres, textes, couleurs...
* Les éléments des différents modules HTML/CSS doivent --étendre-- ces classes. Ex :
* .un-module {
* @extend %style-1;
*
* }
* .un-module__title{
* @extend %h1
* }
* .un-module__link{
* @extend %read-more;
* }
*/
.txt-small, .form__checkbox-tooltip, .cart-item__hint {
font-family: arial;
font-size: 13px;
line-height: 20px;
}
.txt-big, .article-header__chapo {
font-family: arial;
font-size: 20px;
font-size: 1.33333rem;
line-height: 30px;
line-height: 2rem;
}
@media print {
.txt-big, .article-header__chapo {
font-size: 13pt;
}
}
.txt-fat {
font-size: 32px;
font-size: 2.13333rem;
line-height: 32px;
line-height: 2.13333rem;
}
@media print {
.txt-fat {
font-size: 25pt;
}
}
.section__title, .plancha__font-4 {
color: #96969a;
font-size: 20px;
font-size: 1.33333rem;
line-height: 21px;
line-height: 1.4rem;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 300;
margin-bottom: 10px;
position: relative;
letter-spacing: 2px;
}
@media print {
.section__title, .plancha__font-4 {
font-size: 13pt;
}
}
@media only screen and (min-width: 987px) {
.section__title, .plancha__font-4 {
margin-bottom: 20px;
}
}
.section__title > *, .plancha__font-4 > * {
display: inline-block;
background-color: #fff;
padding: 0 12px;
top: -11px;
position: relative;
}
.rct__add-instr, .rct__add-step, .link-tag {
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
}
.rct__add-instr, .rct__add-step, .link-tag, .some-link, .tags__tag-link, .certifie, .faq a, .mod-recipe__edit-mod, .mod-recipe__edit-label, .recipe-ingredients__item a {
color: #856400;
text-decoration: none;
font-style: normal;
cursor: pointer;
}
.rct__add-instr:hover, .rct__add-step:hover, .link-tag:hover, .some-link:hover, .tags__tag-link:hover, .certifie:hover, .faq a:hover, .mod-recipe__edit-mod:hover, .mod-recipe__edit-label:hover, .recipe-ingredients__item a:hover {
text-decoration: underline;
}
.link-orange {
color: #957000;
text-align: center;
}
.link-orange a {
text-decoration: none;
}
.landing-subscription__title, .landing-presentation__title, .gras-maj-noir__1, .recipe-header__new-label, .recipe-header__title--normal, .gras-maj-noir__2, .pap__intro-title, .gras-maj-noir__3, .recipe-header__title--chef, .seasons__item {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
color: #3e3e41;
}
.landing-subscription__title, .landing-presentation__title, .gras-maj-noir__1, .recipe-header__new-label, .recipe-header__title--normal {
font-size: 18px;
line-height: 22px;
}
@media only screen and (min-width: 501px) {
.landing-subscription__title, .landing-presentation__title, .gras-maj-noir__1, .recipe-header__new-label, .recipe-header__title--normal {
font-size: 26px;
line-height: 32px;
}
}
@media only screen and (min-width: 987px) {
.landing-subscription__title, .landing-presentation__title, .gras-maj-noir__1, .recipe-header__new-label, .recipe-header__title--normal {
font-size: 34px;
line-height: 46px;
}
}
.gras-maj-noir__2, .pap__intro-title {
font-size: 18px;
line-height: 22px;
}
@media only screen and (min-width: 501px) {
.gras-maj-noir__2, .pap__intro-title {
font-size: 32px;
line-height: 38px;
}
}
@media only screen and (min-width: 987px) {
.gras-maj-noir__2, .pap__intro-title {
font-size: 40px;
line-height: 46px;
}
}
.gras-maj-noir__3, .recipe-header__title--chef {
font-size: 24px;
line-height: 26px;
}
@media only screen and (min-width: 501px) {
.gras-maj-noir__3, .recipe-header__title--chef {
font-size: 32px;
line-height: 38px;
}
}
@media only screen and (min-width: 987px) {
.gras-maj-noir__3, .recipe-header__title--chef {
font-size: 45px;
line-height: 45px;
}
}
.landing__cover-user, .form__row-label, .form__row-label-top, .normal-min-noir__1, .mod-cta__desc, .promo-newsletter__label, .landing-offer__paragraph, .form__row-label-med, .normal-min-noir__2, .table1 th, .flash--confirm, .flash--error, .recipe-header__disabled-h2, .mod-cta__h2, .landing-subscription__subtitle, .lexicon, .form__label, .form__row-label-big, .pager__link, .normal-min-noir__3, .faq-rub-top, .faq-rub-mid, .landing-register__headline, .recipe-ingredients__items-title, .quote__author-name, .landing__author, .article__title, .card-part__title, .normal-min-noir__4, .rich-text h3, .md-preview h3, .faq-cat, .recipe-steps__step-title, .menu-label, .pap__footer-state, .pap__step-title, .mod-cta__h1-AAA, .mod-cta__h1, .ph-header-partner, .fav__title {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 400;
color: #3e3e41;
}
.landing__cover-user, .form__row-label, .form__row-label-top, .normal-min-noir__1, .mod-cta__desc, .promo-newsletter__label {
font-size: 15px;
line-height: 20px;
}
.landing-offer__paragraph, .form__row-label-med, .normal-min-noir__2, .table1 th, .flash--confirm, .flash--error, .recipe-header__disabled-h2, .mod-cta__h2 {
font-size: 15px;
line-height: 20px;
}
@media only screen and (min-width: 501px) {
.landing-offer__paragraph, .form__row-label-med, .normal-min-noir__2, .table1 th, .flash--confirm, .flash--error, .recipe-header__disabled-h2, .mod-cta__h2 {
font-size: 16px;
line-height: 21px;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__paragraph, .form__row-label-med, .normal-min-noir__2, .table1 th, .flash--confirm, .flash--error, .recipe-header__disabled-h2, .mod-cta__h2 {
font-size: 18px;
line-height: 25px;
}
}
.landing-subscription__subtitle, .lexicon, .form__label, .form__row-label-big, .pager__link, .normal-min-noir__3, .faq-rub-top, .faq-rub-mid, .landing-register__headline, .recipe-ingredients__items-title, .quote__author-name {
font-size: 15px;
line-height: 20px;
}
@media only screen and (min-width: 501px) {
.landing-subscription__subtitle, .lexicon, .form__label, .form__row-label-big, .pager__link, .normal-min-noir__3, .faq-rub-top, .faq-rub-mid, .landing-register__headline, .recipe-ingredients__items-title, .quote__author-name {
font-size: 18px;
line-height: 22px;
}
}
@media only screen and (min-width: 987px) {
.landing-subscription__subtitle, .lexicon, .form__label, .form__row-label-big, .pager__link, .normal-min-noir__3, .faq-rub-top, .faq-rub-mid, .landing-register__headline, .recipe-ingredients__items-title, .quote__author-name {
font-size: 20px;
line-height: 24px;
}
}
.landing__author, .article__title, .card-part__title, .normal-min-noir__4, .rich-text h3, .md-preview h3, .faq-cat, .recipe-steps__step-title, .menu-label, .pap__footer-state, .pap__step-title, .mod-cta__h1-AAA, .mod-cta__h1, .ph-header-partner, .fav__title {
font-size: 17px;
line-height: 23px;
}
@media only screen and (min-width: 501px) {
.landing__author, .article__title, .card-part__title, .normal-min-noir__4, .rich-text h3, .md-preview h3, .faq-cat, .recipe-steps__step-title, .menu-label, .pap__footer-state, .pap__step-title, .mod-cta__h1-AAA, .mod-cta__h1, .ph-header-partner, .fav__title {
font-size: 20px;
line-height: 26px;
}
}
@media only screen and (min-width: 987px) {
.landing__author, .article__title, .card-part__title, .normal-min-noir__4, .rich-text h3, .md-preview h3, .faq-cat, .recipe-steps__step-title, .menu-label, .pap__footer-state, .pap__step-title, .mod-cta__h1-AAA, .mod-cta__h1, .ph-header-partner, .fav__title {
font-size: 24px;
line-height: 30px;
}
}
.u-some-link, .rich-text a, .rich-text label, .md-preview a, .md-preview label {
color: #856400;
border-bottom: 1px dotted #ccc;
cursor: pointer;
}
.u-some-link:hover, .rich-text a:hover, .rich-text label:hover, .md-preview a:hover, .md-preview label:hover {
color: #614900;
}
.readmore {
color: #89660a;
border-bottom: 1px dotted #dadada;
font-family: 'Roboto Condensed', sans-serif;
font-size: 15px;
font-weight: 400;
padding-bottom: 3px;
}
.readmore:hover {
color: #684d08;
}
a.landing__cover-user-name:hover, a.mod-pedia__body:hover, a.activity__author-name:hover, a.reco-list__item:hover, a.gras-min-noir__1:hover, a.mod-user__name:hover, a.ingredients-family__item:hover, a.figure2__title:hover, a.mod-place__title:hover, a.map-addresses-search__tooltip-title:hover, a.activity__title:hover, a.fundamental__title:hover, a.comment__author-name:hover, a.reco-list-labels__item:hover, a.gras-min-noir__2:hover, a.mod-user__name--big:hover, a.mod-user__name--vvbig:hover, a.mod-recipe__title:hover, a.landing-offer__paragraph-title:hover, a.variete__title:hover, a.mod-edito__title:hover, a.mod-article__title:hover, a.gras-min-noir__3:hover, a.landing-register__stitle:hover, a.mod-generic__title:hover, a.pap__intro-author-name:hover, a.mod-edito__title--headline:hover, a.gras-min-noir__4:hover, a.err__msg:hover, a.recipe-header__disabled-h1:hover, a.pedia-header__title:hover, a.ph-chef__title:hover, a.ph-default__title:hover, a.gras-min-noir__5:hover, a.landing-register__title:hover, a.user-header__name:hover, a.partner-casino__baseline:hover, a.partner-casino-2__baseline:hover, a.article-header__title:hover, a.gras-min-noir__6:hover, a.landing__title:hover {
color: #78787A;
}
.landing__cover-user-name, .mod-pedia__body, .activity__author-name, .reco-list__item, .gras-min-noir__1, .mod-user__name, .ingredients-family__item, .figure2__title, .mod-place__title, .map-addresses-search__tooltip-title, .activity__title, .fundamental__title, .comment__author-name, .reco-list-labels__item, .gras-min-noir__2, .mod-user__name--big, .mod-user__name--vvbig, .mod-recipe__title, .landing-offer__paragraph-title, .variete__title, .mod-edito__title, .mod-article__title, .gras-min-noir__3, .landing-register__stitle, .mod-generic__title, .activity .mod-recipe__title, .pap__intro-author-name, .mod-edito__title--headline, .gras-min-noir__4, .err__msg, .recipe-header__disabled-h1, .pedia-header__title, .ph-chef__title, .ph-default__title, .gras-min-noir__5, .landing-register__title, .user-header__name, .partner-casino__baseline, .partner-casino-2__baseline, .article-header__title, .gras-min-noir__6, .landing__title {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
color: #333;
}
.landing__cover-user-name, .mod-pedia__body, .activity__author-name, .reco-list__item, .gras-min-noir__1, .mod-user__name {
font-size: 12px;
line-height: 18px;
}
@media only screen and (min-width: 501px) {
.landing__cover-user-name, .mod-pedia__body, .activity__author-name, .reco-list__item, .gras-min-noir__1, .mod-user__name {
font-size: 13px;
line-height: 20px;
}
}
.ingredients-family__item, .figure2__title, .mod-place__title, .map-addresses-search__tooltip-title, .activity__title, .fundamental__title, .comment__author-name, .reco-list-labels__item, .gras-min-noir__2, .mod-user__name--big, .mod-user__name--vvbig, .mod-recipe__title {
font-size: 13px;
line-height: 17px;
}
@media only screen and (min-width: 501px) {
.ingredients-family__item, .figure2__title, .mod-place__title, .map-addresses-search__tooltip-title, .activity__title, .fundamental__title, .comment__author-name, .reco-list-labels__item, .gras-min-noir__2, .mod-user__name--big, .mod-user__name--vvbig, .mod-recipe__title {
font-size: 14px;
line-height: 18px;
}
}
@media only screen and (min-width: 987px) {
.ingredients-family__item, .figure2__title, .mod-place__title, .map-addresses-search__tooltip-title, .activity__title, .fundamental__title, .comment__author-name, .reco-list-labels__item, .gras-min-noir__2, .mod-user__name--big, .mod-user__name--vvbig, .mod-recipe__title {
font-size: 15px;
line-height: 20px;
}
}
.landing-offer__paragraph-title, .variete__title, .mod-edito__title, .mod-article__title, .gras-min-noir__3, .landing-register__stitle, .mod-generic__title, .activity .mod-recipe__title, .pap__intro-author-name {
font-size: 15px;
line-height: 20px;
}
@media only screen and (min-width: 501px) {
.landing-offer__paragraph-title, .variete__title, .mod-edito__title, .mod-article__title, .gras-min-noir__3, .landing-register__stitle, .mod-generic__title, .activity .mod-recipe__title, .pap__intro-author-name {
font-size: 16px;
line-height: 22px;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__paragraph-title, .variete__title, .mod-edito__title, .mod-article__title, .gras-min-noir__3, .landing-register__stitle, .mod-generic__title, .activity .mod-recipe__title, .pap__intro-author-name {
font-size: 18px;
line-height: 24px;
}
}
.mod-edito__title--headline, .gras-min-noir__4, .err__msg, .recipe-header__disabled-h1 {
font-size: 20px;
line-height: 26px;
}
@media only screen and (min-width: 501px) {
.mod-edito__title--headline, .gras-min-noir__4, .err__msg, .recipe-header__disabled-h1 {
font-size: 28px;
line-height: 32px;
}
}
@media only screen and (min-width: 987px) {
.mod-edito__title--headline, .gras-min-noir__4, .err__msg, .recipe-header__disabled-h1 {
font-size: 30px;
line-height: 36px;
}
}
.pedia-header__title, .ph-chef__title, .ph-default__title, .gras-min-noir__5, .landing-register__title, .user-header__name, .partner-casino__baseline, .partner-casino-2__baseline {
font-size: 28px;
line-height: 30px;
}
@media only screen and (min-width: 501px) {
.pedia-header__title, .ph-chef__title, .ph-default__title, .gras-min-noir__5, .landing-register__title, .user-header__name, .partner-casino__baseline, .partner-casino-2__baseline {
font-size: 32px;
line-height: 40px;
}
}
@media only screen and (min-width: 987px) {
.pedia-header__title, .ph-chef__title, .ph-default__title, .gras-min-noir__5, .landing-register__title, .user-header__name, .partner-casino__baseline, .partner-casino-2__baseline {
font-size: 36px;
line-height: 46px;
}
}
.article-header__title, .gras-min-noir__6 {
font-size: 28px;
line-height: 32px;
}
@media only screen and (min-width: 501px) {
.article-header__title, .gras-min-noir__6 {
font-size: 36px;
line-height: 40px;
}
}
@media only screen and (min-width: 987px) {
.article-header__title, .gras-min-noir__6 {
font-size: 44px;
line-height: 50px;
}
}
.normal-min-gris__1, .mod-user__par, .mod-user__stats, .mod-recipe__favorites, .article-header__author, .normal-min-gris__2, .header-simple__info-label, .user-header__links, .mod-user__par--big, .recipe-ingredients__servings, .normal-min-gris__3, .ctas .favorite__nb, .pap__intro-author-par, .search__info, .search-global__result-message {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
color: #96969a;
}
.normal-min-gris__1, .mod-user__par, .mod-user__stats, .mod-recipe__favorites {
font-size: 12px;
line-height: 18px;
}
@media only screen and (min-width: 501px) {
.normal-min-gris__1, .mod-user__par, .mod-user__stats, .mod-recipe__favorites {
font-size: 13px;
line-height: 20px;
}
}
.article-header__author, .normal-min-gris__2, .header-simple__info-label, .user-header__links, .mod-user__par--big, .recipe-ingredients__servings {
font-size: 15px;
font-size: 1rem;
line-height: 20px;
line-height: 1.33333rem;
}
@media print {
.article-header__author, .normal-min-gris__2, .header-simple__info-label, .user-header__links, .mod-user__par--big, .recipe-ingredients__servings {
font-size: 8pt;
}
}
.normal-min-gris__3, .ctas .favorite__nb, .pap__intro-author-par, .search__info, .search-global__result-message {
font-size: 18px;
font-size: 1.2rem;
}
@media print {
.normal-min-gris__3, .ctas .favorite__nb, .pap__intro-author-par, .search__info, .search-global__result-message {
font-size: 11pt;
}
}
.activity__type, .fundamental__type, .normal-maj-gris__1, .mod-user__title, .spinner__label, .form__checkbox label:before, .form__radio .label--1,
.form__checkbox .label--1, .rct__time, .rct__time-label, .rct__step-label, .rct__step-ingr-label, .mod-place__cat, .place-addresses__dt, .normal-maj-gris__2, .tags__tag-link, .certifie, .noel-spe, .user-header__stat-label, .mod-recipe__category, .recipe-time__label, .recipe-time__time, .onglets__link, .ingredients-family__title, .ph-chef__category, .ph-default__category, .place-quotes__title, .normal-maj-gris__3, .pap__intro-author-title, .section__title-centered, .cat-header__title-total, .landing-offer__section-title, .reco-list__title, .normal-maj-gris__4, .recipe-steps__title, .recipe-ingredients__title, .recipe-comments-title, .search__title, .search__cat-title, .cat-header__title--mid, .header-simple__title, .landing-offer__title, .lexicon__letter, .normal-maj-gris__5, .user-header__job, .user-fellows__title, .cat-header__title--big, .normal-maj-gris__6 {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
color: #96969a;
text-transform: uppercase;
}
.activity__type, .fundamental__type, .normal-maj-gris__1, .mod-user__title, .spinner__label {
font-size: 12px;
line-height: 18px;
}
@media only screen and (min-width: 501px) {
.activity__type, .fundamental__type, .normal-maj-gris__1, .mod-user__title, .spinner__label {
font-size: 13px;
line-height: 20px;
}
}
.form__checkbox label:before, .form__radio .label--1,
.form__checkbox .label--1, .rct__time, .rct__time-label, .rct__step-label, .rct__step-ingr-label, .mod-place__cat, .place-addresses__dt, .normal-maj-gris__2, .tags__tag-link, .certifie, .noel-spe, .user-header__stat-label, .mod-recipe__category, .recipe-time__label, .recipe-time__time {
font-size: 15px;
font-size: 1rem;
}
@media print {
.form__checkbox label:before, .form__radio .label--1,
.form__checkbox .label--1, .rct__time, .rct__time-label, .rct__step-label, .rct__step-ingr-label, .mod-place__cat, .place-addresses__dt, .normal-maj-gris__2, .tags__tag-link, .certifie, .noel-spe, .user-header__stat-label, .mod-recipe__category, .recipe-time__label, .recipe-time__time {
font-size: 8pt;
}
}
.onglets__link, .ingredients-family__title, .ph-chef__category, .ph-default__category, .place-quotes__title, .normal-maj-gris__3, .pap__intro-author-title {
font-size: 18px;
font-size: 1.2rem;
line-height: 24px;
line-height: 1.6rem;
}
@media print {
.onglets__link, .ingredients-family__title, .ph-chef__category, .ph-default__category, .place-quotes__title, .normal-maj-gris__3, .pap__intro-author-title {
font-size: 11pt;
}
}
.section__title-centered, .cat-header__title-total, .landing-offer__section-title, .reco-list__title, .normal-maj-gris__4, .recipe-steps__title, .recipe-ingredients__title, .recipe-comments-title, .search__title, .search__cat-title {
font-size: 20px;
font-size: 1.33333rem;
line-height: 26px;
line-height: 1.73333rem;
}
@media print {
.section__title-centered, .cat-header__title-total, .landing-offer__section-title, .reco-list__title, .normal-maj-gris__4, .recipe-steps__title, .recipe-ingredients__title, .recipe-comments-title, .search__title, .search__cat-title {
font-size: 13pt;
}
}
.cat-header__title--mid, .header-simple__title, .landing-offer__title, .lexicon__letter, .normal-maj-gris__5, .user-header__job, .user-fellows__title {
font-size: 26px;
font-size: 1.73333rem;
}
@media print {
.cat-header__title--mid, .header-simple__title, .landing-offer__title, .lexicon__letter, .normal-maj-gris__5, .user-header__job, .user-fellows__title {
font-size: 19pt;
}
}
.cat-header__title--big, .normal-maj-gris__6 {
font-size: 20px;
line-height: 26px;
}
@media only screen and (min-width: 501px) {
.cat-header__title--big, .normal-maj-gris__6 {
font-size: 30px;
line-height: 36px;
}
}
@media only screen and (min-width: 987px) {
.cat-header__title--big, .normal-maj-gris__6 {
font-size: 50px;
line-height: 70px;
}
}
.js-loading .js-bt-loading,
.js-loading.js-bt-loading {
position: relative;
background: #f5f5f5 !important;
border-color: #f5f5f5 !important;
color: #333 !important;
overflow: hidden;
cursor: default;
-moz-transition: background-color 0.3s ease-in, color 0.3s ease-in;
-o-transition: background-color 0.3s ease-in, color 0.3s ease-in;
-webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in;
transition: background-color 0.3s ease-in, color 0.3s ease-in;
}
.js-loading .js-bt-loading .icon,
.js-loading.js-bt-loading .icon {
visibility: hidden;
}
.js-loading .js-bt-loading span,
.js-loading.js-bt-loading span {
position: relative;
z-index: 1;
}
.js-loading .js-bt-loading:before,
.js-loading.js-bt-loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: #ddd;
-moz-animation: js-loading 10s cubic-bezier(0, 1, 1, 1) 1 forwards;
-webkit-animation: js-loading 10s cubic-bezier(0, 1, 1, 1) 1 forwards;
animation: js-loading 10s cubic-bezier(0, 1, 1, 1) 1 forwards;
}
@-moz-keyframes js-loading {
0% {
width: 0;
}
100% {
width: 95%;
}
}
@-webkit-keyframes js-loading {
0% {
width: 0;
}
100% {
width: 95%;
}
}
@keyframes js-loading {
0% {
width: 0;
}
100% {
width: 95%;
}
}
.button-icon, .recipe-actions__step-by-step {
color: #856400;
border: 1px solid #e1e1e1;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 13px;
line-height: 26px;
font-weight: 300;
margin: 0;
background: #fff;
vertical-align: middle;
text-align: center;
}
.button-icon:hover, .recipe-actions__step-by-step:hover, .js-metalinked:hover .button-icon, .js-metalinked:hover .recipe-actions__step-by-step {
background-color: #f7f7f7;
color: #78787a;
cursor: pointer;
}
.ribbon-min, .ribbon-small, .ribbon-big {
display: inline-block;
background-color: #baa256;
color: #fff;
text-transform: uppercase;
position: relative;
text-align: center;
vertical-align: middle;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
}
.ribbon-min:before, .ribbon-small:before, .ribbon-big:before, .ribbon-min:after, .ribbon-small:after, .ribbon-big:after {
content: " ";
border-style: solid;
display: inline-block;
width: 0;
height: 0;
position: absolute;
top: 0;
-ms-transform: scale(0.9999);
-webkit-transform: scale(0.9999);
transform: scale(0.9999);
-moz-transform: scale(1);
}
.ribbon-min:before, .ribbon-small:before, .ribbon-big:before {
border-color: #baa256 #baa256 #baa256 transparent;
}
.ribbon-min:after, .ribbon-small:after, .ribbon-big:after {
border-color: #baa256 transparent #baa256 #baa256;
}
.ribbon-o-min, .ribbon-o-small, .ribbon-o-big {
display: inline-block;
background-color: #fff;
border: 1px solid #baa256;
color: #baa256;
text-transform: uppercase;
position: relative;
text-align: center;
vertical-align: middle;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
-moz-transform: skew(-20deg);
-ms-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
.ribbon-o-min .ribbon-o__label, .ribbon-o-small .ribbon-o__label, .ribbon-o-big .ribbon-o__label {
display: inline-block;
-moz-transform: skew(20deg);
-ms-transform: skew(20deg);
-webkit-transform: skew(20deg);
transform: skew(20deg);
}
.ribbon-aaa-min, .ribbon-aaa-small, .ribbon-aaa-big {
display: inline-block;
background-color: #e8420c;
color: #fff !important;
position: relative;
text-align: center;
vertical-align: middle;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
}
.ribbon-aaa-min:before, .ribbon-aaa-small:before, .ribbon-aaa-big:before, .ribbon-aaa-min:after, .ribbon-aaa-small:after, .ribbon-aaa-big:after {
content: " ";
border-style: solid;
display: inline-block;
width: 0;
height: 0;
position: absolute;
top: 0;
-ms-transform: scale(0.9999);
-webkit-transform: scale(0.9999);
transform: scale(0.9999);
-moz-transform: scale(1);
}
.ribbon-aaa-min:before, .ribbon-aaa-small:before, .ribbon-aaa-big:before {
border-color: #e8420c #e8420c #e8420c transparent;
}
.ribbon-aaa-min:after, .ribbon-aaa-small:after, .ribbon-aaa-big:after {
border-color: #e8420c transparent #e8420c #e8420c;
}
.ribbon-aaa-min strong, .ribbon-aaa-small strong, .ribbon-aaa-big strong {
color: #fff !important;
}
.mod-user__par--ellip {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (min-width: 987px) {
.desk-hidden {
display: none !important;
}
}
@media only screen and (max-width: 500px) {
.palm-hidden {
display: none !important;
}
}
@media only screen and (max-width: 986px) {
.portable-hidden {
display: none !important;
}
}
@media only screen and (min-width: 501px) and (max-width: 986px) {
.lap-hidden {
display: none !important;
}
}
@media only screen and (min-width: 501px) {
.lap-and-up-hidden {
display: none !important;
}
}
.vamid {
vertical-align: middle;
}
.section__content, .section__footer-content, .banner__content, .landing-offer__section-content, .search-global__bar-wrapper, .search-global__result-content {
position: relative;
max-width: 480px;
padding: 0 12px;
margin: 0 auto;
}
@media only screen and (min-width: 501px) {
.section__content, .section__footer-content, .banner__content, .landing-offer__section-content, .search-global__bar-wrapper, .search-global__result-content {
max-width: 530px;
margin: 0 auto;
}
}
@media only screen and (min-width: 655px) {
.section__content, .section__footer-content, .banner__content, .landing-offer__section-content, .search-global__bar-wrapper, .search-global__result-content {
max-width: 640px;
margin: 0 auto;
}
}
@media only screen and (min-width: 987px) {
.section__content, .section__footer-content, .banner__content, .landing-offer__section-content, .search-global__bar-wrapper, .search-global__result-content {
max-width: 972px;
}
}
.onglets {
margin-top: 20px;
text-align: center;
}
.onglets__item {
display: inline-block;
text-align: center;
border: 1px solid #E5E5E5;
position: relative;
margin-bottom: -1px;
}
.onglets__item:nth-child(odd) {
border-left: 1px solid #E5E5E5;
}
.onglets__item.is-active, .onglets__item:hover {
border-bottom-color: #E5E5E5;
}
.onglets__item + .onglets__item {
border-left: 0;
}
.onglets__item.is-active, .onglets__item:hover {
border-bottom-color: #fff;
}
.onglets__item.is-active .onglets__link, .onglets__item:hover .onglets__link {
background-color: #fff;
color: #333;
}
.onglets__item:hover {
border-bottom-color: #E5E5E5;
}
.onglets__item.is-active:hover {
border-bottom-color: #fff;
}
.onglets__link {
display: block;
line-height: 39px;
background-color: #f0f0f0;
white-space: pre;
padding: 0 10px;
}
@media only screen and (min-width: 501px) {
.onglets__link {
padding: 0 20px;
}
}
@media only screen and (min-width: 987px) {
.onglets__link {
padding: 0 30px;
}
}
@media only screen and (min-width: 501px) {
.onglets__icon + .onglets__label {
margin-left: 10px;
}
}
.onglets__label {
display: none;
}
@media only screen and (min-width: 501px) {
.onglets__label {
display: inline;
}
}
@media only screen and (min-width: 501px) {
.onglets__short {
text-align: center;
}
.onglets__short .onglets__item {
width: auto;
}
}
@media only screen and (min-width: 987px) {
.onglets__long {
text-align: center;
}
.onglets__long .onglets__item {
width: auto;
}
}
.ribbon-min {
line-height: 16px;
padding: 0 10px;
font-size: 10px;
}
.ribbon-min:before {
border-width: 8px 0 8px 5px;
left: -5px;
}
.ribbon-min:after {
border-width: 8px 5px 8px 0;
right: -5px;
}
.ribbon-small {
line-height: 16px;
padding: 0 10px;
font-size: 10px;
}
.ribbon-small:before {
border-width: 8px 0 8px 5px;
left: -5px;
}
.ribbon-small:after {
border-width: 8px 5px 8px 0;
right: -5px;
}
@media only screen and (min-width: 501px) {
.ribbon-small {
line-height: 20px;
padding: 0 10px;
font-size: 12px;
}
.ribbon-small:before {
border-width: 10px 0 10px 5px;
left: -5px;
}
.ribbon-small:after {
border-width: 10px 5px 10px 0;
right: -5px;
}
}
.ribbon-big {
line-height: 20px;
padding: 0 10px;
font-size: 12px;
}
.ribbon-big:before {
border-width: 10px 0 10px 5px;
left: -5px;
}
.ribbon-big:after {
border-width: 10px 5px 10px 0;
right: -5px;
}
@media only screen and (min-width: 987px) {
.ribbon-big {
line-height: 30px;
padding: 0 30px;
font-size: 15px;
letter-spacing: 2px;
}
.ribbon-big:before {
border-width: 15px 0 15px 5px;
left: -5px;
}
.ribbon-big:after {
border-width: 15px 5px 15px 0;
right: -5px;
}
}
.ribbon-o-min {
line-height: 16px;
padding: 0 10px;
font-size: 10px;
}
.ribbon-o-small {
line-height: 16px;
padding: 0 10px;
font-size: 10px;
}
@media only screen and (min-width: 501px) {
.ribbon-o-small {
line-height: 20px;
padding: 0 10px;
font-size: 12px;
}
}
.ribbon-o-big {
line-height: 20px;
padding: 0 10px;
font-size: 12px;
}
@media only screen and (min-width: 987px) {
.ribbon-o-big {
line-height: 30px;
padding: 0 17px;
font-size: 15px;
letter-spacing: 2px;
}
}
.ribbon-aaa-min {
line-height: 16px;
padding: 0 10px;
font-size: 10px;
}
.ribbon-aaa-min:before {
border-width: 8px 0 8px 5px;
left: -5px;
}
.ribbon-aaa-min:after {
border-width: 8px 5px 8px 0;
right: -5px;
}
.ribbon-aaa-small {
line-height: 16px;
padding: 0 10px;
font-size: 10px;
}
.ribbon-aaa-small:before {
border-width: 8px 0 8px 5px;
left: -5px;
}
.ribbon-aaa-small:after {
border-width: 8px 5px 8px 0;
right: -5px;
}
@media only screen and (min-width: 501px) {
.ribbon-aaa-small {
line-height: 14px;
padding: 0 10px;
font-size: 12px;
}
.ribbon-aaa-small:before {
border-width: 14px 0 14px 5px;
left: -5px;
}
.ribbon-aaa-small:after {
border-width: 14px 5px 14px 0;
right: -5px;
}
.ribbon-aaa-small strong {
display: block;
}
}
.ribbon-aaa-big {
line-height: 14px;
padding: 0 10px;
font-size: 12px;
}
.ribbon-aaa-big:before {
border-width: 14px 0 14px 5px;
left: -5px;
}
.ribbon-aaa-big:after {
border-width: 14px 5px 14px 0;
right: -5px;
}
.ribbon-aaa-big strong {
display: block;
}
@media only screen and (min-width: 987px) {
.ribbon-aaa-big {
line-height: 30px;
padding: 0 30px;
font-size: 15px;
letter-spacing: 2px;
}
.ribbon-aaa-big:before {
border-width: 15px 0 15px 5px;
left: -5px;
}
.ribbon-aaa-big:after {
border-width: 15px 5px 15px 0;
right: -5px;
}
.ribbon-aaa-big strong {
display: inline;
}
}
.ribbon-corner {
display: block;
position: absolute;
top: -6px;
right: -6px;
overflow: hidden;
height: 150px;
}
.ribbon-corner__content {
display: block;
position: relative;
background-color: #BCA351;
top: 23px;
right: -40px;
padding: 5px 29px 5px 26px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.ribbon-corner__content:before, .ribbon-corner__content:after {
content: ' ';
display: block;
position: absolute;
border-style: solid;
border-color: transparent transparent #a48e4b transparent;
border-width: 0 5px 5px 5px;
width: 0;
height: 0;
}
.ribbon-corner__content:before {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: -4px;
left: -3px;
}
.ribbon-corner__content:after {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
bottom: -4px;
right: -3px;
}
.ribbon-corner__txt1 {
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-size: 12px;
color: #fff;
text-align: center;
}
.ribbon-corner__txt2 {
display: block;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 15px;
line-height: 15px;
color: #fff;
text-align: center;
}
.ribbon-corner__content--offer {
top: 33px;
right: -31px;
}
.ribbon-corner__content--offer--macaron {
width: 140px;
height: 140px;
}
@media only screen and (min-width: 987px) {
.ribbon-corner__content--offer--macaron {
width: 224px;
height: 224px;
}
}
.ribbon-corner__content--offer--macaron--small {
width: 120px;
height: 120px;
margin: 10px;
}
.ribbon-corner__content--box {
top: 18px;
right: -39px;
}
.ribbon-corner__content--new-chef {
top: 22px;
right: -22px;
padding: 5px 22px 5px 22px;
}
.ribbon-corner__txt2--new-chef {
font-size: 10px;
line-height: 10px;
width: 64px;
}
.ribbon-corner__txt2--new-chef-big {
font-size: 10px;
line-height: 10px;
width: 64px;
}
@media only screen and (min-width: 987px) {
.ribbon-corner__txt2--new-chef-big {
font-size: 15px;
line-height: 15px;
width: 96px;
}
}
.ribbon-corner__content--new-chef-big {
top: 22px;
right: -22px;
padding: 5px 22px 5px 22px;
}
@media only screen and (min-width: 987px) {
.ribbon-corner__content--new-chef-big {
top: 33px;
right: -29px;
padding: 5px 29px 5px 26px;
}
}
.badge-orange {
position: absolute;
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
vertical-align: middle;
border-radius: 50%;
color: #fff;
background: #ff8600;
text-transform: uppercase;
text-align: center;
}
@media only screen and (min-width: 501px) {
.badge-orange {
height: 120px;
line-height: 120px;
width: 120px;
}
}
.badge-orange__content {
display: inline-block;
padding: 10px;
line-height: 16px;
font-size: 10px;
vertical-align: middle;
}
@media only screen and (min-width: 501px) {
.badge-orange__content {
font-size: 12px;
}
}
@media only screen and (min-width: 501px) {
.badge-orange__content:before, .badge-orange__content:after {
content: "";
display: block;
border-top: 1px solid;
height: 0;
margin: 10px;
}
}
.badge-gold {
position: absolute;
padding: 10px;
display: inline-block;
border-radius: 50%;
color: #fff;
background: #bca351;
font-size: 14px;
text-transform: uppercase;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
vertical-align: middle;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px #bca351;
}
.badge-gold__content {
display: inline-block;
line-height: 16px;
}
.badge-new {
position: absolute;
display: inline-block;
height: 100px;
line-height: 100px;
width: 100px;
vertical-align: middle;
border-radius: 50%;
color: #fff;
background: #d7ab42;
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
@media only screen and (min-width: 501px) {
.badge-new {
height: 120px;
line-height: 120px;
width: 120px;
}
}
.badge-new__content {
display: inline-block;
padding: 10px;
line-height: 16px;
font-size: 10px;
vertical-align: middle;
}
@media only screen and (min-width: 501px) {
.badge-new__content {
font-size: 12px;
}
}
@media only screen and (min-width: 501px) {
.badge-new__content:before, .badge-new__content:after {
content: "";
display: block;
border-top: 1px solid;
height: 0;
margin: 10px;
}
}
.button-simple {
color: #856400;
border: 1px solid #e1e1e1;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 13px;
line-height: 26px;
font-weight: 300;
margin: 0;
background: #fff;
vertical-align: middle;
text-align: center;
display: inline-block;
padding: 0 15px;
position: relative;
}
.button-simple:hover, .js-metalinked:hover .button-simple {
background-color: #f7f7f7;
color: #78787a;
cursor: pointer;
}
.button-simple .button-simple__label {
vertical-align: middle;
}
.button-simple.button-simple--gold {
color: #fff;
border: 1px solid #bca351;
background-color: #bca351;
}
.button-simple.button-simple--gold:hover, .js-metalinked:hover .button-simple.button-simple--gold {
color: #fff;
background-color: #a48f4b;
}
.button-simple.button-simple--orange {
color: #fff;
border: 1px solid #e94e1b;
background-color: #e94e1b;
}
.button-simple.button-simple--orange:hover, .js-metalinked:hover .button-simple.button-simple--orange {
color: #fff;
background-color: #e94e1b;
}
.button-simple.button-simple--facebook {
color: #fff;
border: 1px solid #3b5999;
background-color: #3b5999;
}
.button-simple.button-simple--facebook:hover, .js-metalinked:hover .button-simple.button-simple--facebook {
color: #fff;
background-color: #3b5999;
}
.button-simple.button-simple--facebook .icon {
margin: 0;
}
.button-simple.button-simple--dark {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
border: 0;
}
.button-simple.button-simple--dark:hover, .js-metalinked:hover .button-simple.button-simple--dark {
color: #3e3e41;
background-color: rgba(255, 255, 255, 0.8);
}
.button-simple.button-simple--dark:hover .icon, .js-metalinked:hover .button-simple.button-simple--dark .icon {
fill: #3e3e41;
}
.button-simple.button-simple--white {
color: #bca351;
border: 1px solid #bca351;
background-color: #fff;
}
.button-simple.button-simple--white:hover, .js-metalinked:hover .button-simple.button-simple--white {
color: #fff;
background-color: #bca351;
}
.button-simple.button-simple--noborder {
border: 0;
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
@media only screen and (min-width: 987px) {
.button-simple.button-simple--right {
float: right;
}
}
@media only screen and (min-width: 501px) {
.button-simple.button-simple--big {
font-size: 20px;
line-height: 36px;
text-align: center;
}
}
.button-simple.button-simple--huge {
padding-left: 1em;
padding-right: 1em;
font-size: 22px;
line-height: 42px;
text-align: center;
}
@media only screen and (min-width: 501px) {
.button-simple.button-simple--huge {
font-size: 27px;
}
}
.button-icon {
display: inline-block;
text-align: center;
vertical-align: middle;
min-width: 30px;
line-height: 27px;
font-weight: 300;
}
.button-simple + .button-icon {
margin-left: 20px;
}
.button-icon .button-icon__label {
display: none;
vertical-align: middle;
padding-left: 5px;
}
.button-icon--share {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 100%;
background: none;
border: none;
text-align: center;
}
.button-icon--share:hover {
background: none;
border: none;
}
.button-icon--facebook {
border-right: solid 1px #fff;
}
.button-icon--facebook .icon {
vertical-align: text-top;
}
.button-icon--facebook:hover {
border-right: solid 1px #fff;
}
.button-circle {
display: block;
margin: 30px auto 0;
width: 60px;
height: 60px;
line-height: 55px;
border: 1px solid #808080;
border-radius: 50%;
text-align: center;
z-index: 1;
}
.button-circle .icon {
width: 70%;
height: 70%;
vertical-align: middle;
fill: #808080;
}
body {
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
html {
font: 0.8125em/1.6 sans-serif;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
@media only screen and (min-width: 501px) {
html {
font: 0.875em/1.6 sans-serif;
}
}
@media only screen and (min-width: 987px) {
html {
font: 0.9375em/1.6 sans-serif;
}
}
body {
color: #3e3e41;
font-family: Arial, sans-serif;
background-color: #fff;
overflow: hidden;
}
body.grey {
background-color: #f5f5f5;
}
a {
color: inherit;
text-decoration: inherit;
}
p, h1 {
margin: 0;
}
ul {
margin: 0;
list-style-type: none;
}
fieldset {
border: 0;
}
label {
margin-bottom: 0;
font-weight: 400;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.readmore__container {
text-align: center;
margin-top: 15px;
}
.sp-12 {
margin-top: -12px;
}
.sp-12 > .grid__item {
margin-top: 12px;
}
.sp-12.mg-12 {
margin-top: 12px;
}
@media only screen and (min-width: 501px) {
.sp-12.lap-and-up-mg-12 {
margin-top: 12px;
}
}
.sp-24 {
margin-top: -24px;
}
.sp-24 > .grid__item {
margin-top: 24px;
}
.sp-24.mg-12 {
margin-top: 12px;
}
@media only screen and (min-width: 501px) {
.sp-24.lap-and-up-mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 501px) {
.lap-and-up-sp-24 {
margin-top: -24px;
}
.lap-and-up-sp-24 > .grid__item {
margin-top: 24px;
}
.lap-and-up-sp-24.mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 501px) and (min-width: 501px) {
.lap-and-up-sp-24.lap-and-up-mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 501px) {
.lap-and-up-sp-20 {
margin-top: -20px;
}
.lap-and-up-sp-20 > .grid__item {
margin-top: 20px;
}
.lap-and-up-sp-20.mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 501px) and (min-width: 501px) {
.lap-and-up-sp-20.lap-and-up-mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 987px) {
.desk-sp-34 {
margin-top: -34px;
}
.desk-sp-34 > .grid__item {
margin-top: 34px;
}
.desk-sp-34.mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 987px) and (min-width: 501px) {
.desk-sp-34.lap-and-up-mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 501px) {
.lap-and-up-sp-29 {
margin-top: -29px;
}
.lap-and-up-sp-29 > .grid__item {
margin-top: 29px;
}
.lap-and-up-sp-29.mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 501px) and (min-width: 501px) {
.lap-and-up-sp-29.lap-and-up-mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 987px) {
.desk-sp-39 {
margin-top: -39px;
}
.desk-sp-39 > .grid__item {
margin-top: 39px;
}
.desk-sp-39.mg-12 {
margin-top: 12px;
}
}
@media only screen and (min-width: 987px) and (min-width: 501px) {
.desk-sp-39.lap-and-up-mg-12 {
margin-top: 12px;
}
}
.grid__item--align-middle {
vertical-align: middle;
}
.grid__item--align-bottom {
vertical-align: bottom;
}
.grid__item--no-marge {
margin-top: 0 !important;
padding-left: 0;
}
.grid--no-marge {
margin-left: 0;
}
.grid--center {
text-align: center;
}
.vs {
margin-top: -19px;
}
.vs + .vs {
margin-top: 0;
}
.vs > .grid__item {
margin-top: 19px;
}
@media only screen and (min-width: 501px) {
.vs {
margin-top: -29px;
}
.vs > .grid__item {
margin-top: 29px;
}
}
@media only screen and (min-width: 987px) {
.vs {
margin-top: -39px;
}
.vs > .grid__item {
margin-top: 39px;
}
}
.vs2 {
margin-top: -14px;
}
.vs2 + .vs2 {
margin-top: 0;
}
.vs2 > .grid__item {
margin-top: 14px;
}
@media only screen and (min-width: 987px) {
.vs2 {
margin-top: -20px;
}
.vs2 > .grid__item {
margin-top: 20px;
}
}
.grid__item.center {
text-align: center;
}
.wrapper {
overflow: hidden;
display: table;
table-layout: fixed;
width: 100%;
position: absolute;
height: 100%;
}
.content {
display: table-row;
height: 100%;
}
.content--centered:after {
display: none;
}
.pied {
background-color: #f5f5f5;
padding-bottom: 0;
display: table-cell;
vertical-align: top;
border-top: 1px solid #e5e5e5;
}
.pied .section {
border-bottom: 1px solid #e5e5e5;
padding-bottom: 24px;
padding-top: 24px;
}
.pied__content {
padding: 10px 0;
max-width: 948px;
margin: 0 auto;
text-align: center;
}
.pied__link {
color: #999;
font-size: 12px;
}
.pied__link + .pied__link {
padding-left: 20px;
}
.content .section:last-child {
margin-bottom: 30px;
}
@media only screen and (min-width: 501px) {
.content .section:last-child {
margin-bottom: 40px;
}
}
@media only screen and (min-width: 987px) {
.content .section:last-child {
margin-bottom: 50px;
}
}
.content .section--centered:last-child {
padding-bottom: 30px;
}
@media only screen and (min-width: 501px) {
.content .section--centered:last-child {
padding-bottom: 40px;
}
}
@media only screen and (min-width: 987px) {
.content .section--centered:last-child {
padding-bottom: 50px;
}
}
*:not(.section--grey):not(.section--banner) + .section, .content *:not(.section--grey):not(.section--banner) + [class*="include_"] .section {
margin-top: 50px;
}
@media only screen and (min-width: 501px) {
*:not(.section--grey):not(.section--banner) + .section, .content *:not(.section--grey):not(.section--banner) + [class*="include_"] .section {
margin-top: 70px;
}
}
@media only screen and (min-width: 987px) {
*:not(.section--grey):not(.section--banner) + .section, .content *:not(.section--grey):not(.section--banner) + [class*="include_"] .section {
margin-top: 90px;
}
}
.section--grey + .section {
margin-top: 30px;
}
@media only screen and (min-width: 501px) {
.section--grey + .section {
margin-top: 40px;
}
}
*:not(.section--grey):not(.section--banner) + .section--tight {
margin-top: 5px;
margin-bottom: 5px;
}
@media only screen and (min-width: 501px) {
*:not(.section--grey):not(.section--banner) + .section--tight {
margin-top: 10px;
margin-bottom: 10px;
}
}
@media only screen and (min-width: 987px) {
*:not(.section--grey):not(.section--banner) + .section--tight {
margin-top: 20px;
margin-bottom: 20px;
}
}
.content .section:first-of-type:not(.section--grey) {
margin-top: 30px;
}
.content .section--centered:first-of-type {
padding-top: 30px;
}
.banner + .section {
margin-top: 30px;
}
.banner + .section--grey {
margin-top: 0;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
}
.section.section--close-to-top {
margin-top: 25px !important;
}
@media only screen and (min-width: 501px) {
.section.section--close-to-top {
margin-top: 35px !important;
}
}
@media only screen and (min-width: 987px) {
.section.section--close-to-top {
margin-top: 45px !important;
}
}
.section .grid__item + .grid__item .section__title {
margin-top: 31px;
}
@media only screen and (min-width: 501px) {
.section .grid__item + .grid__item .section__title {
margin-top: 41px;
}
}
@media only screen and (min-width: 987px) {
.section .grid__item + .grid__item .section__title {
margin-top: 0;
}
}
.section__title {
border-top: 1px solid #dadada;
}
.section__title-label--bordered {
position: relative;
background: none;
height: 40px;
line-height: 40px;
top: -20px;
padding: 0 40px;
color: #d7ab42;
z-index: 1;
}
.section__title-label--bordered::before, .section__title-label--bordered::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid #d7ab42;
background: #fff;
z-index: -1;
transform: perspective(300px) rotateX(56deg);
transform-origin: 50% 100%;
}
.section__title-label--bordered::before {
border-top: 0;
}
.section__title-label--bordered::after {
border-bottom: 0;
transform: perspective(300px) rotateX(-56deg);
transform-origin: 50% 0;
}
.section__title-centered {
display: block;
border-bottom: 1px solid #dadada;
padding-bottom: 5px;
margin-bottom: 10px;
}
* + .section__title-centered {
margin-top: 10px;
}
@media only screen and (min-width: 501px) {
.section__title-centered {
margin-bottom: 20px;
}
* + .section__title-centered {
margin-top: 30px;
}
}
@media only screen and (min-width: 987px) {
.section__title-centered {
margin-bottom: 30px;
}
* + .section__title-centered {
margin-top: 50px;
}
}
.section__content--iframe iframe {
width: 100%;
height: 200px;
}
@media only screen and (min-width: 501px) and (max-width: 986px) {
.section__content--iframe iframe {
height: 300px;
}
}
@media only screen and (min-width: 987px) {
.section__content--iframe iframe {
height: 600px;
}
}
.section__content--small {
max-width: 462px;
}
.section__content--mid {
padding: 0 12px;
}
@media only screen and (min-width: 987px) {
.section__content--mid {
max-width: 834px;
padding: 35px 105px;
}
}
.section__content--786 {
max-width: 786px;
}
@media only screen and (min-width: 987px) {
.section--centered {
display: table-cell;
vertical-align: middle;
}
}
.section + .section--grey {
border-top: 1px solid #e5e5e5;
}
.section--grey {
background-color: #f5f5f5;
padding-bottom: 0;
padding-top: 24px;
}
.section--grey:first-child {
border-bottom: 1px solid #e5e5e5;
}
.section--grey + .section--grey {
margin-top: 30px;
}
.section--grey__footer {
padding: 15px 0 20px 0;
background-color: #f0f0f0;
border-top: 1px solid #e5e5e5;
}
.section--darkgrey {
background-color: #282828;
}
.section__content--darkgrey {
width: 948px;
margin: 0 auto;
}
.section--fixed {
height: 60px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
padding-top: 13px;
padding-bottom: 13px;
}
.section__content--fixed {
height: 33px;
line-height: 33px;
}
.section__content--subscribe, .section__content--cart, .section__content--payment {
max-width: 623px;
padding: 10px;
background: rgba(255, 255, 255, 0.9);
}
@media only screen and (min-width: 501px) {
.section__content--subscribe, .section__content--cart, .section__content--payment {
padding: 45px 85px;
}
}
.section--subscribe {
background: #fff url(/bundles/udgweb/img/bg-subscribe.jpg) no-repeat 50% 0;
}
.section--cart {
margin-bottom: 0 !important;
background: #fff url(/bundles/udgweb/img/bg-cart.jpg) no-repeat 50% 0;
}
.section--payment {
background: #fff url(/bundles/udgweb/img/bg-payment.jpg) no-repeat 50% 0;
}
img {
max-width: 100%;
}
img[src=""] {
display: none;
}
::-webkit-input-placeholder {
color: #aaa;
}
:-moz-placeholder {
color: #aaa;
}
::-moz-placeholder {
color: #aaa;
}
:-ms-input-placeholder {
color: #aaa;
}
.placeholder {
color: #aaa !important;
}
.no-js .no-js-hide {
display: none;
}
.js-on .js-hide,
.js-off .js-hide {
display: none;
}
.no-js .recipe-header__pap {
display: none;
}
.js-off .hidden-while-js-off {
display: none !important;
}
.js-on .js-fullscreen-recipe {
cursor: pointer;
}
.js-on .js-fullscreen-recipe:hover .button-simple--dark {
color: #3e3e41;
background-color: rgba(255, 255, 255, 0.8);
}
.js-on .js-fullscreen-recipe:hover .button-simple--dark .icon {
fill: #3e3e41;
}
.cat-header {
margin-bottom: 12px;
}
.cat-header--bordered {
border-bottom: 1px solid #dadada;
padding-bottom: 12px;
}
@media only screen and (min-width: 501px) {
.cat-header--bordered {
padding-bottom: 20px;
}
}
@media only screen and (min-width: 501px) {
.cat-header {
margin-bottom: 24px;
}
}
@media only screen and (min-width: 987px) {
.cat-header {
margin-bottom: 40px;
}
}
.cat-header__title {
/*
margin-bottom: 20px;
@include media-query(lap-and-up){
margin-bottom: 30px;
}
@include media-query(desk){
margin-bottom: 40px;
}
*/
}
.cat-header__title-xmas {
margin: 0 0 20px;
font-weight: normal;
font-size: 18px;
line-height: 50px;
display: block;
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
background: url(/bundles/udgweb/img/landing/noel2016/bg-title-tag.jpg) no-repeat 50%;
}
@media only screen and (min-width: 501px) {
.cat-header__title-xmas {
margin: 0 0 50px;
font-size: 30px;
}
}
.cat-header__title-xmas-content {
display: inline-block;
position: relative;
color: #fff;
text-transform: uppercase;
}
.cat-header__title-xmas-content:before {
content: "";
position: absolute;
display: block;
top: 0;
right: -35px;
bottom: 0;
left: -35px;
border-top: 50px solid #e7ac34;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.fullscreen-active .wrapper {
display: none;
}
.fullscreen {
z-index: 1;
opacity: 0;
background-color: #fafafa;
position: fixed;
height: 0;
width: 0;
overflow: hidden;
-moz-transition: opacity 0.4s linear;
-o-transition: opacity 0.4s linear;
-webkit-transition: opacity 0.4s linear;
transition: opacity 0.4s linear;
}
.fullscreen-active .fullscreen {
opacity: 1;
height: 100%;
width: 100%;
}
.fullscreen .fullscreen__loader {
display: table;
width: 100%;
height: 100%;
}
.fullscreen .fullscreen__loader-content {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.close-window {
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
color: #96969a;
cursor: pointer;
display: inline-block;
vertical-align: middle;
font-weight: 300;
}
.close-window:before {
display: inline-block;
font-family: arial;
content: 'X';
text-align: center;
border: 1px solid #dadada;
height: 30px;
width: 30px;
margin-right: 10px;
}
.section-fixed {
height: 60px;
}
.hidden {
display: none !important;
}
.offer-bar {
background-color: #f5f5f5;
left: 0;
position: fixed;
top: 0;
width: 230px;
z-index: 3;
display: none;
}
.header__checkbox:checked ~ .wrapper .offer-bar {
display: block;
}
.offer-bar__item {
display: inline-block;
line-height: 0;
width: 100%;
}
.offer-bar__item--offer, .offer-bar__item--subscribe {
width: 50%;
}
.offer-bar__item--login, .offer-bar__item--code, .offer-bar__item--offer:last-child {
width: 100%;
}
.offer-bar__item--login {
border-bottom: 1px solid #dadada;
text-align: left;
font-size: 15px;
padding: 0;
}
.offer-bar__link {
display: block;
vertical-align: middle;
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
font-size: 13px;
line-height: 51px;
text-align: center;
padding: 0 15px;
}
.offer-bar__link--offer.is-logged {
background-color: #3f3f41;
color: #fff;
}
.offer-bar__link i {
position: relative;
top: -2px;
margin-right: 10px;
}
.offer-bar__link--subscribe {
background-color: #e94e1b;
color: #fff;
}
.offer-bar__link--subscribe:hover, .offer-bar__link--subscribe:focus {
color: #eaeaea;
}
.offer-bar__link--login:hover, .offer-bar__link--login:focus, .offer-bar__link--code:hover, .offer-bar__link--code:focus {
color: #7d7d7d;
}
@media only screen and (min-width: 987px) {
.offer-bar {
position: static;
width: auto;
display: block;
border-bottom: 1px solid #e5e5e5;
}
.offer-bar__content {
padding: 0 12px;
position: relative;
max-width: 972px;
margin: 0 auto;
text-align: right;
}
.offer-bar__item {
width: auto;
}
.offer-bar__item:last-child .offer-bar__link {
padding: 0 15px;
}
.offer-bar__item:last-child .offer-bar__link.is-logged {
width: 130px;
}
.offer-bar__item--login {
width: auto;
border-bottom: 0;
}
.offer-bar__item--offer:last-child {
width: auto;
}
.offer-bar__link {
display: inline-block;
line-height: 26px;
}
.offer-bar__link--login {
border-right: 1px solid #e5e5e5;
}
}
.has-link-wrapper {
position: relative;
}
.has-link-wrapper a, .has-link-wrapper button {
position: relative;
z-index: 2;
}
.u-link-wrapper {
position: static !important;
}
.u-link-wrapper:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(255, 255, 255, 0);
}
.user-zone__checkbox {
display: none;
}
.header {
display: table-row;
}
.header__checkbox {
display: none;
}
.header__logo {
display: inline-block;
width: 219px;
text-indent: -9999px;
background: url("/bundles/udgweb/img/logo_academie_du_gout_simple.png") no-repeat 0 50%;
}
.header__menu-icon {
display: block;
font-family: sans-serif;
font-size: 36px;
left: 5px;
top: 10px;
line-height: 36px;
width: 100%;
text-align: center;
}
.header__zone--button-subscribe {
display: none;
}
@media only screen and (max-width: 986px) {
.js-feature-header-button-subscribe .header__zone--button-subscribe {
display: block;
}
.js-feature-header-button-subscribe .header__zone--button-subscribe .button-simple {
font-size: 13px;
line-height: 26px;
}
}
@media only screen and (max-width: 986px) and (max-width: 359px) {
.js-feature-header-button-subscribe .header__zone--button-subscribe .button-simple {
font-size: 12px;
}
}
@media only screen and (max-width: 986px) {
.js-feature-header-button-subscribe .header__menu-icon {
line-height: 45px;
}
.js-feature-header-button-subscribe .header__content {
height: 50px;
}
.js-feature-header-button-subscribe .header__zone--menu .icon-hamburger {
width: 20px;
height: 20px;
}
.js-feature-header-button-subscribe .header__zone--logo .logo {
width: 130px;
height: 35px;
margin: 7px 0;
}
.js-feature-header-button-subscribe .header__zone--logo .logo-link {
margin-right: 15vw;
}
}
@media only screen and (max-width: 986px) and (max-width: 501px) {
.js-feature-header-button-subscribe .header__zone--logo .logo-link {
margin-right: 25vw;
}
}
@media only screen and (max-width: 986px) and (max-width: 320px) {
.js-feature-header-button-subscribe .header__zone--logo .logo-link {
margin-right: 31vw;
}
}
@media only screen and (max-width: 986px) {
.header {
position: relative;
}
.header__menu-icon {
height: 49px;
line-height: 49px;
}
.header__logo {
height: 49px;
}
.header.is-fixed {
height: 50px;
}
.header.is-fixed .header__content {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 3;
}
.header__zone--logo {
text-align: center;
line-height: 0;
}
.header__zone--menu {
width: 50px;
position: absolute;
top: 0;
left: 0;
}
.header__zone--button-subscribe {
position: absolute;
top: 10px;
right: 10px;
}
.header__search {
border-top: 1px solid #dadada;
border-bottom: 1px solid #dadada;
line-height: 69px;
width: 100%;
padding-left: 22px;
}
.header__search:hover {
background-color: #dadada;
}
.header__search-label {
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
color: #313131;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
display: inline-block;
padding-right: 10px;
}
.header__sidebar {
display: block;
bottom: 0;
left: -230px;
position: fixed;
width: 230px;
z-index: 1;
background-color: #f5f5f5;
border-right: 1px solid #e5e5e5;
overflow-y: auto;
top: 102px;
}
.header__sidebar--2 {
top: 154px;
}
.header__content {
border-bottom: 1px solid #e5e5e5;
}
.header__checkbox:checked {
display: block;
position: fixed;
z-index: 3;
width: 100%;
height: 100%;
opacity: 0;
border: 0;
padding: 0;
margin: 0;
}
.header__checkbox:checked ~ .header__modal {
background-color: #000;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 2;
}
.header__checkbox:checked ~ .wrapper .header {
left: 230px;
height: 50px;
}
.header__checkbox:checked ~ .wrapper .header .header__content {
background-color: #fff;
left: 230px;
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
.header__checkbox:checked ~ .wrapper .content .section, .header__checkbox:checked ~ .wrapper .content .landing {
position: relative;
left: 230px;
}
.header__checkbox:checked ~ .wrapper .search {
left: 230px;
}
.header__checkbox:checked ~ .wrapper .header__sidebar {
left: 0;
}
.user-zone__label {
display: none;
padding-top: 20px;
padding-left: 43px;
}
.user-zone__login {
display: block;
height: 70px;
line-height: 69px;
color: #856400;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
vertical-align: middle;
text-align: left;
border-bottom: 1px solid #dadada;
padding-left: 22px;
}
.user-zone__login:hover {
background-color: #dadada;
}
.user-zone__menu-link {
display: block;
line-height: 39px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
color: #313131;
width: 100%;
background-color: transparent;
border: 0;
text-align: left;
padding: 0;
}
.user-zone__menu-link .icon {
margin: 0 12px;
}
.user-zone__menu-link:hover {
color: #7d7d7d;
}
.user-zone .icon-arrow_up,
.user-zone .icon-arrow_down {
display: none;
}
.main-nav {
padding-bottom: 10px;
}
.main-nav__link {
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
color: #313131;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
padding: 10px 5px 10px 22px;
display: block;
}
.main-nav__link .icon {
margin: 0 12px;
}
.is-active .main-nav__link, .main-nav__link:hover {
color: #7d7d7d;
}
.main-nav__link--paques {
margin-bottom: -10px;
background-image: url("/bundles/udgweb/img/paques/tab-mobile.jpg");
background-position: 50%;
font-weight: 700;
}
}
@media only screen and (min-width: 987px) {
.header {
background-color: #fff;
}
.header:after {
display: block;
content: '';
border-bottom: 1px solid #e5e5e5;
}
.header__menu-icon {
height: 79px;
line-height: 79px;
}
.header__logo {
height: 79px;
}
.header__content {
display: table;
table-layout: fixed;
width: 948px;
border-collapse: collapse;
margin: 0 auto;
}
.header__sidebar {
display: table;
width: 100%;
}
.header__zone {
display: table-cell;
vertical-align: middle;
}
.header__zone--menu {
display: none;
}
.header__zone--logo {
width: 218px;
border-right: 1px solid #e5e5e5;
line-height: 0;
}
.header__zone--nav {
width: auto;
}
.header__zone--search {
width: 100px;
border: 1px solid #e5e5e5;
border-width: 0 1px 0 1px;
}
.header__zone--user {
width: 130px;
border-right: 1px solid #e5e5e5;
}
.header__search {
width: 100%;
text-align: center;
height: 79px;
padding-top: 22px;
}
.header__search:hover, .search__checkbox:checked ~ .wrapper .header .header__search {
background-color: #f5f5f5;
}
.header__search-label {
font-size: 13px;
font-family: 'Roboto Condensed', sans-serif;
display: block;
text-transform: uppercase;
}
.user-zone {
position: relative;
}
.user-zone__checkbox {
display: none;
}
.user-zone__label {
display: block;
width: 100%;
line-height: 79px;
padding-right: 30px;
text-align: right;
}
.user-zone__label img {
vertical-align: middle;
width: 30px;
height: 30px;
margin-left: 10px;
}
.user-zone__label:hover, .user-zone__checkbox:checked ~ .user-zone__label {
background-color: #f5f5f5;
}
.user-zone .icon-arrow_up {
position: absolute;
height: 0;
overflow: hidden;
}
.user-zone__checkbox:checked ~ .user-zone__label .icon-arrow_up {
position: static;
height: 18px;
overflow: visible;
}
.user-zone__checkbox:checked ~ .user-zone__label .icon-arrow_down {
position: absolute;
height: 0;
overflow: hidden;
}
.user-zone__menu {
display: none;
}
.user-zone__checkbox:checked ~ .user-zone__menu {
display: block;
position: absolute;
right: 0;
top: 100%;
z-index: 3;
}
.user-zone__menu {
background: #fff;
border: 1px solid #dadada;
width: 230px;
-moz-box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.4);
-webkit-box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.4);
box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.4);
}
.user-zone__menu-item + .user-zone__menu-item {
border-top: 1px solid #dadada;
}
.user-zone__menu-link {
display: block;
line-height: 39px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 14px;
color: #313131;
width: 100%;
background-color: transparent;
border: 0;
text-align: left;
padding: 0;
}
.user-zone__menu-link .icon {
margin: 0 12px;
}
.user-zone__menu-link:hover {
background-color: #f5f5f5;
}
.user-zone__login {
display: block;
height: 79px;
line-height: 79px;
color: #856400;
text-decoration: none;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
vertical-align: middle;
text-align: center;
}
.user-zone__login:hover, .user-zone__login:active {
background-color: #f5f5f5;
}
.main-nav {
text-align: center;
}
.main-nav__items {
display: flex;
justify-content: space-between;
}
.main-nav__item {
display: inline-block;
}
.main-nav__link {
display: inline-block;
font-family: 'Roboto Condensed', sans-serif;
font-size: 13px;
color: #313131;
letter-spacing: 0;
text-transform: uppercase;
margin: 0;
padding: 0 8px;
line-height: 79px;
vertical-align: middle;
}
.is-active .main-nav__link, .main-nav__link:hover {
color: #7d7d7d;
}
.main-nav__link--paques {
position: relative;
padding: 0 13px;
background-image: url("/bundles/udgweb/img/paques/tab-desktop.jpg");
background-repeat: no-repeat;
background-size: 220%;
background-position: 50%;
font-weight: 700;
transition: .2s background-size ease-in-out;
}
.main-nav__link--paques:hover {
background-size: 250%;
color: #313131;
}
}
.header-simple__title {
color: #7f7f81;
font-size: 28px;
font-weight: 400;
}
.header-simple__info {
padding-right: 12px;
padding-bottom: 12px;
margin-top: 10px;
}
.header-simple__logo {
display: block;
background: url("/bundles/udgweb/img/logo_academie_du_gout_simple.png") no-repeat 50% 50%;
color: transparent;
}
.header-simple__content {
line-height: 0;
}
@media only screen and (max-width: 500px) {
.header-simple {
background-color: #fff;
border-bottom: 1px solid #dadada;
}
.header-simple__content {
text-align: center;
}
.header-simple__title {
text-align: right;
}
}
@media only screen and (min-width: 501px) {
.header-simple {
background-color: #fff;
}
.header-simple:after {
display: block;
content: ' ';
border-bottom: 1px solid #dadada;
}
.header-simple__title {
text-align: center;
}
.header-simple__content {
display: block;
max-width: 948px;
margin: 0 auto;
position: relative;
}
.header-simple__info {
float: right;
}
}
@media only screen and (min-width: 987px) {
.header-simple {
display: table-row;
}
.header-simple__logo {
width: 180px;
height: 79px;
position: absolute;
}
.header-simple__content {
text-align: left;
}
.header-simple__info {
margin-top: 20px;
}
}
.landing-subscription .cta-noel_2017 .section__content {
padding: 0;
}
.landing-subscription .cta-noel_2017 .mod-cta-bizo {
padding: 0;
}
.landing {
position: relative;
padding-bottom: 14px;
background-size: cover;
}
.landing__bg {
height: 180px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
@media only screen and (min-width: 501px) {
.landing__bg {
height: 420px;
}
}
@media only screen and (min-width: 987px) {
.landing__bg {
height: 550px;
}
}
.landing__bg--1 {
background-image: url("/bundles/udgweb/img/landing/homepage/background-1.jpg");
}
.landing__bg--2 {
background-image: url("/bundles/udgweb/img/landing/homepage/background-2.jpg");
}
.landing__bg--3 {
background-image: url("/bundles/udgweb/img/landing/homepage/background-3.jpg");
}
.landing__bg--4 {
background-image: url("/bundles/udgweb/img/landing/homepage/background-4.jpg");
}
.landing__bg--5 {
background-image: url("/bundles/udgweb/img/landing/homepage/background-5.jpg");
}
.landing__cover {
position: absolute;
height: 180px;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
overflow: hidden;
}
@media only screen and (min-width: 501px) {
.landing__cover {
height: 420px;
}
}
@media only screen and (min-width: 987px) {
.landing__cover {
height: 550px;
}
}
.landing__cover-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
cursor: pointer;
}
.landing__cover-user {
display: none;
position: relative;
background: rgba(255, 255, 255, 0.9);
margin-top: 40px;
padding: 10px;
}
.landing__cover-user:after {
content: "";
display: table;
clear: both;
}
@media only screen and (min-width: 501px) {
.landing__cover-user {
display: block;
}
}
@media only screen and (min-width: 987px) {
.landing__cover-user {
display: inline-block;
}
}
.landing__cover-user-avatar {
float: left;
margin: 0 10px 0 0;
}
.landing__cover-user-text {
margin-left: 100px;
}
@media only screen and (min-width: 987px) {
.landing__cover-user-text {
max-width: 300px;
}
}
.landing__cover-user-button {
position: absolute;
bottom: 10px;
right: 10px;
}
@media only screen and (min-width: 501px) {
.landing {
padding-bottom: 24px;
}
}
@media only screen and (min-width: 987px) {
.landing {
padding-bottom: 0;
background-size: auto auto;
}
}
.landing__inside {
margin: 0 auto;
position: relative;
}
@media only screen and (min-width: 501px) {
.landing__inside {
max-width: 486px;
margin: 0 auto;
}
}
@media only screen and (min-width: 655px) {
.landing__inside {
max-width: 640px;
margin: 0 auto;
}
}
@media only screen and (min-width: 987px) {
.landing__inside {
max-width: 972px;
}
}
.landing__content {
padding: 0;
text-align: center;
position: absolute;
margin-left: 50%;
margin-top: 40px;
transform: translate(-50%, 0);
z-index: 1;
}
@media only screen and (min-width: 501px) {
.landing__content {
margin-top: 150px;
}
}
@media only screen and (min-width: 987px) {
.landing__content {
margin-top: 180px;
}
}
.landing__items {
padding: 12px 12px 0 12px;
}
@media only screen and (min-width: 501px) {
.landing__items {
padding: 24px 24px 0 24px;
margin-top: -50px;
background-color: #fff;
}
}
@media only screen and (min-width: 987px) {
.landing__items {
margin-top: -74px;
}
}
.landing__title {
font-size: 26px;
line-height: 30px;
color: #fff;
text-shadow: 1px 0px 10px #969696;
}
@media only screen and (min-width: 501px) {
.landing__title {
margin-top: 70px;
text-align: center;
font-size: 32px;
line-height: 40px;
}
}
@media only screen and (min-width: 987px) {
.landing__title {
margin-top: 130px;
font-size: 36px;
line-height: 46px;
}
}
.landing__author {
display: block;
margin-top: 10px;
color: #fff;
}
.landing .landing__input-wrapper {
margin: 25px auto 0 auto;
width: 100%;
margin-bottom: 15px;
position: relative;
}
@media only screen and (min-width: 987px) {
.landing .landing__input-wrapper {
width: 460px;
}
}
.landing .landing__suggest-list {
background-color: #fff;
}
.landing__link {
border: 1px solid #d3d3d3;
display: block;
position: relative;
padding-top: 15px;
background-color: #fff;
text-align: center;
font-family: 'Roboto Condensed', sans-serif;
text-transform: uppercase;
font-size: 16px;
font-weight: 400;
height: 140px;
}
.landing__link:hover {
color: #7f7f81;
}
.landing__link--strong {
background-color: #bca351;
}
.landing__link--strong:hover {
background-color: #7f7f81;
}
.landing__label {
bottom: 10px;
width: 100%;
text-align: center;
display: block;
position: absolute;
}
.landing__label--strong {
color: #fff;
position: relative;
font-size: 21px;
padding-top: 10px;
}
@media only screen and (min-width: 987px) {
.landing__label--strong {
font-size: 25px;
padding-top: 5px;
}
}
.landing__label-center {
display: block;
height: 140px;
font-size: 21px;
color: #fff;
margin-top: -15px;
white-space: nowrap;
}
.landing__label-center:before {
display: inline-block;
content: "";
height: 100%;
width: 1px;
vertical-align: middle;
}
.landing__label-center-inner {
display: inline-block;
vertical-align: middle;
}
.landing-julie-andrieu-offer-section img {
position: absolute;
top: -20px;
right: -130px;
width: 70px;
}
@media screen and (max-width: 320px) {
.landing-julie-andrieu-offer-section img {
top: -5px;
right: -90px;
}
}
@media only screen and (min-width: 987px) {
.landing-julie-andrieu-offer-section img {
top: -35px;
right: -170px;
width: auto;
}
}
.landing-subscription {
margin-top: 0 !important;
margin-bottom: 0 !important;
height: 100%;
text-align: center;
background: #f6f8f7 url(/bundles/udgweb/img/landing/subscription/bg.jpg) no-repeat 100% 0%;
padding-bottom: 50px;
}
@media only screen and (min-width: 501px) {
.landing-subscription {
background-size: cover;
background-position: 50% 100%;
}
}
.landing-subscription__header-top {
padding: 30px 0;
}
.landing-subscription__header-button {
margin-top: -30px;
}
.landing-subscription__title {
margin-bottom: 10px;
}
.landing-subscription__title + h2 {
font-size: 16px;
}
@media only screen and (min-width: 501px) {
.landing-subscription__title + h2 {
font-size: 1.5em;
}
}
.landing-subscription__soldes-ete {
position: relative;
background: none;
}
.landing-subscription__soldes-ete:before {
content: '';
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url("/bundles/udgweb/img/soldes-ete-2018/landing_background.jpg");
background-repeat: no-repeat;
background-position: 50% 15%;
background-size: 150%;
opacity: .5;
z-index: -1;
}
@media only screen and (min-width: 501px) {
.landing-subscription__soldes-ete:before {
background-position: 50%;
background-size: 100%;
}
}
@media only screen and (min-width: 501px) {
.landing-subscription__title-sucres-sales {
display: inline-block;
line-height: 40px;
border-top: 1px solid;
border-bottom: 1px solid;
}
}
@media only screen and (min-width: 987px) {
.landing-subscription__title-sucres-sales {
line-height: 56px;
border-width: 2px 0;
}
}
.landing-subscription__title-sucres-sales del {
color: #666;
}
.landing-subscription__subtitle {
margin: 15px 0 30px;
}
.landing-subscription__header-cta {
padding: 16px;
font-size: 18px;
color: #fff;
background: #3f3f41;
}
@media only screen and (min-width: 501px) {
.landing-subscription__header-cta {
font-size: 24px;
}
}
.landing-subscription__new {
border-bottom: 0;
font-weight: 700;
color: #e94e1b;
text-transform: uppercase;
}
.landing-subscription__orange {
color: #e94e1b;
}
.landing-subscription__cta {
padding: 0 0 20px;
font-family: 'Roboto Condensed', sans-serif;
background: rgba(255, 255, 255, 0.9);
}
.landing-subscription__cta--border {
border: 1px solid #3f3f41;
}
.landing-subscription__cta-title {
position: relative;
margin: 0 0 25px;
padding: 10px;
font-size: 22px;
font-weight: normal;
color: #fff;
background: #3f3f41;
}
.landing-subscription__cta-title:after {
content: "";
position: absolute;
display: block;
bottom: -9px;
left: 50%;
margin-left: -124px;
border-style: solid;
border-width: 9px 124px 0;
border-color: #3f3f41 transparent transparent;
}
.landing-subscription__cta-title--gold {
background: #bca351;
text-transform: uppercase;
font-size: 18px;
}
.landing-subscription__cta-title--gold:after {
border-top-color: #bca351;
}
.landing-subscription__cta-content {
position: relative;
padding: 0 30px;
margin: 0 0 20px;
text-align: left;
}
.landing-subscription__cta-pastille {
position: absolute;
top: 80px;
right: 10px;
width: 100px;
height: 100px;
background-color: #fe6262;
border-radius: 50%;
color: #fff;
font-size: 30px;
}
@media only screen and (min-width: 501px) {
.landing-subscription__cta-pastille {
right: -50px;
}
}
.landing-subscription__cta-pastille:before {
content: '';
position: absolute;
top: 3px;
right: 3px;
bottom: 3px;
left: 3px;
border: 1px solid #fff;
border-radius: 50%;
}
.landing-subscription__badge {
top: 15%;
left: 72%;
}
@media only screen and (min-width: 501px) {
.landing-subscription__badge {
left: 80%;
}
}
.landing-subscription__cta-price {
font-size: 13px;
}
.landing-subscription__cta-price strong {
display: inline-block;
min-width: 30%;
font-size: 20px;
}
.landing-subscription__cta-price ins {
display: inline-block;
min-width: 30%;
font-size: 35px;
font-weight: 700;
border: 0;
}
.landing-subscription__cta-mention {
display: block;
text-align: center;
font-size: 13px;
margin: 0 -10px;
}
.landing-subscription__cta-mention:before {
content: "";
display: block;
border-top: 1px solid #bca351;
width: 80%;
margin: 10px auto;
height: 0;
}
.landing-subscription__steps {
position: relative;
padding: 20px;
font-family: 'Roboto Condensed', sans-serif;
background: rgba(255, 255, 255, 0.8);
}
.landing-subscription__steps--bordered {
border: 1px solid #c9b574;
}
.landing-subscription__steps-title {
position: relative;
margin-bottom: 22px;
font-size: 24px;
text-transform: uppercase;
}
.landing-subscription__steps-title:after {
content: "";
display: block;
border-top: 1px solid #3f3f41;
width: 250px;
margin: 10px auto 0;
height: 0;
}
.landing-subscription__steps-title:before {
content: "";
display: block;
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-right: 1px solid #3f3f41;
border-bottom: 1px solid #3f3f41;
transform: rotate(45deg);
bottom: -3px;
left: 50%;
transform-origin: 0 0;
}
.landing-subscription__steps-item {
position: relative;
padding: 0 0 10px;
list-style-position: inside;
font-size: 16px;
}
.landing-subscription__steps-item .icon-checked {
position: absolute;
bottom: 12px;
left: 50%;
margin-left: -8px;
background: #fff;
border: 1px solid #bca351;
border-radius: 50%;
padding: 3px;
}
.landing-subscription__steps-item-sep {
display: block;
border-top: 2px solid #bca351;
width: 155px;
margin: 20px auto 10px;
height: 0;
}
.landing-subscription__steps-item-media {
display: inline-block;
border: 1px solid #bca351;
width: 30px;
height: 30px;
text-align: center;
}
.landing-subscription__steps-item-media .icon {
fill: #bca351;
}
.landing-subscription__steps-txt {
text-align: left;
}
.landing-subscription__content {
margin-top: 30px;
}
.landing-subscription__hr {
position: relative;
display: block;
width: 65%;
margin: 30px auto;
padding: 60px 0 0;
border-bottom: 1px solid #808080;
}
.landing-subscription__hr .icon {
position: absolute;
width: 90px;
padding: 10px;
height: auto;
left: 50%;
margin-left: -45px;
bottom: -30px;
background: #fff;
}
.landing-subscription__assets {
margin-top: 30px;
font-family: 'Roboto Condensed', sans-serif;
}
.landing-subscription__asset-title {
display: inline-block;
width: 155px;
margin: 0 auto;
padding: 40px 0;
font-size: 18px;
font-weight: normal;
color: #fff;
background: #3f3f41;
vertical-align: middle;
}
.landing-subscription__asset-title:after {
content: "";
display: block;
border-top: 1px solid #fff;
width: 35px;
margin: 10px auto 0;
}
.landing-subscription__asset-title--gold {
background: #bca351;
}
.landing-subscription__asset-title strong {
display: block;
font-size: 27px;
font-weight: normal;
text-transform: uppercase;
}
@media only screen and (min-width: 501px) {
.landing-subscription__asset-title {
position: relative;
}
.landing-subscription__asset-title:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
right: -18px;
top: 50%;
margin-top: -11px;
border-style: solid;
border-width: 11px 0 11px 11px;
border-color: transparent transparent transparent #3f3f41;
}
.landing-subscription__asset-title--gold:before {
border-left-color: #bca351;
}
}
.landing-subscription__assets {
position: relative;
text-align: center;
z-index: 1;
}
.landing-subscription__asset-item {
position: relative;
display: inline-block;
width: 100%;
max-width: 300px;
margin: auto;
padding: 20px 30px;
height: 175px;
font-size: 18px;
color: #fff;
background: rgba(50, 50, 50, 0.7) no-repeat 50% 50%;
}
.landing-subscription__asset-item--gold {
text-transform: uppercase;
background: #bca351;
}
.landing-subscription__asset-item .icon {
display: block;
margin: 0 auto 20px;
}
.landing-subscription__asset-item:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: no-repeat 50% 50%;
background-size: cover;
z-index: -1;
}
.landing-subscription__asset-item--1:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-1.jpg");
}
.landing-subscription__asset-item--2:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-2.jpg");
}
.landing-subscription__asset-item--3:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-3.jpg");
}
.landing-subscription__asset-item--4:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-4.jpg");
}
.landing-subscription__asset-item--5:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-5.jpg");
}
.landing-subscription__asset-item--6:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-6.jpg");
}
.landing-subscription__asset-item--entree:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-entree.jpg");
}
.landing-subscription__asset-item--plat:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-plat.jpg");
}
.landing-subscription__asset-item--dessert:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-dessert.jpg");
}
.landing-subscription__asset-item--petit-dejeuner:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-petit-dejeuner-brunch.jpg");
}
.landing-subscription__asset-item--bases:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-bases.jpg");
}
.landing-subscription__asset-item--aperitif:after {
background-image: url("/bundles/udgweb/img/landing/subscription/asset-aperitif.jpg");
}
.landing-subscription__asset-item--bigger {
height: 222px;
}
.landing-presentation .button-circle {
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -30px;
background: rgba(255, 255, 255, 0.7);
}
.landing-presentation .section {
position: relative;
margin: 0 !important;
padding: 0;
}
.landing-presentation__intro {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
}
.landing-presentation__intro-title {
margin-bottom: 50px;
}
.landing-presentation__intro-video-container {
width: 85%;
max-width: 656px;
margin: 0 auto 25px;
}
.landing-presentation__intro-video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background: url("/bundles/udgweb/img/landing/presentation/ipad.png") no-repeat;
background-size: contain;
}
.landing-presentation__intro-video > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #a3a3a3;
border-radius: 4px;
}
@media only screen and (min-width: 501px) {
.landing-presentation__intro-video > * {
top: 7.8%;
left: 10.8%;
width: 77.9%;
height: 77.86%;
}
}
.landing-presentation__intro-txt {
margin-bottom: 15px;
}
.landing-presentation__chef {
padding-bottom: 40px;
}
.landing-presentation__chef-content {
display: block;
background: #fff;
padding: 90px 40px;
text-align: center;
}
@media only screen and (min-width: 987px) {
.landing-presentation__chef-content {
padding: 100px 40px;
}
}
.landing-presentation__video-container {
position: relative;
background: url("/bundles/udgweb/img/landing/presentation/bg-video.jpg") no-repeat 50%;
background-size: cover;
}
.landing-presentation__video-container:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(63, 63, 65, 0.7);
}
.landing-presentation__video {
padding: 50px 0;
}
.landing-presentation__video-title {
margin-bottom: 25px;
color: #fff;
text-align: center;
}
@media only screen and (min-width: 987px) {
.landing-presentation__video-title {
text-align: left;
}
}
.landing-presentation__video-content {
text-align: center;
}
.landing-presentation__video-media-container {
margin: 0 auto 35px;
}
.landing-presentation__video-media {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
}
.landing-presentation__video-media iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.landing-presentation__ingredient {
padding-top: 40px;
margin-bottom: 0;
text-align: center;
}
.landing-presentation__ingredient-subtitle {
margin-bottom: 40px;
}
.landing-presentation__ingredient-figure {
margin-bottom: 40px;
}
.landing-presentation__ingredient-figcaption {
position: relative;
display: inline-block;
padding-top: 12px;
border-top: 1px solid #4e4e4e;
text-transform: uppercase;
}
.landing-presentation__ingredient-figcaption:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
margin-left: -4px;
display: block;
width: 15px;
height: 15px;
border-top: 1px solid #4e4e4e;
border-right: 1px solid #4e4e4e;
background: #fff;
transform: rotate(-45deg);
}
.landing-presentation__ingredient-deco img {
display: block;
margin: auto;
}
.landing-presentation__ingredient-button {
margin-bottom: 30px;
}
.landing-presentation__places-container {
background: url("/bundles/udgweb/img/landing/presentation/bg-places.jpg") no-repeat 50%;
background-size: cover;
}
.landing-presentation__places {
padding: 110px 0;
}
@media only screen and (min-width: 501px) {
.landing-presentation__places {
padding: 125px 0;
}
}
@media only screen and (min-width: 987px) {
.landing-presentation__places {
padding: 150px 0;
}
}
.landing-presentation__places-content {
max-width: 600px;
margin: auto;
padding: 35px 40px;
background: rgba(255, 255, 255, 0.9);
}
.landing-presentation__places-title {
margin-bottom: 10px;
}
.landing-presentation__places-txt {
margin-bottom: 25px;
}
.landing-presentation__places-submit {
text-align: center;
}
.landing-presentation__places-marker {
margin-bottom: 10px;
}
.landing-presentation__places-marker .icon {
width: 25px;
height: 25px;
fill: #bca351;
}
.landing-presentation__newsletter {
padding-top: 40px;
padding-bottom: 40px;
}
.landing-presentation__newsletter-title {
margin: 0 0 15px;
}
.landing-presentation__newsletter-label {
position: relative;
display: block;
margin: 0 0 35px;
}
.landing-presentation__newsletter-label:after {
content: "";
display: block;
margin: 25px auto 0;
width: 265px;
border-top: 1px solid #bca351;
}
.landing-presentation__newsletter-label:before {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -4px;
display: block;
width: 15px;
height: 15px;
border-bottom: 1px solid #bca351;
border-left: 1px solid #bca351;
background: #fff;
transform: rotate(-45deg);
}
.landing-presentation__newsletter-inputs {
margin-bottom: 30px;
display: table;
width: 100%;
border-collapse: separate;
}
.landing-presentation__newsletter-email {
display: table-cell;
}
.landing-presentation__newsletter-submit {
display: table-cell;
padding-left: 10px;
width: 1%;
vertical-align: middle;
}
.landing-presentation__newsletter-deco {
text-align: center;
}
.landing-presentation__newsletter-deco img {
box-shadow: 0 5px 21px rgba(0, 0, 0, 0.22);
}
.landing-presentation__subscription {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}
.landing-presentation__subscription-content {
margin: auto;
}
.landing-offer__title {
color: #bca351;
margin: 2em 0 1em 0;
text-align: center;
}
.landing-offer__section {
padding: 20px 0;
}
.landing-offer__section--gray {
background: #f5f5f5;
border-top: solid 1px #eee;
border-bottom: solid 1px #eee;
}
.landing-offer__section-title {
margin-bottom: 1em;
}
.landing-offer__illustration {
width: 100%;
margin-top: 10px;
}
@media only screen and (min-width: 987px) {
.landing-offer__illustration {
margin-top: 0;
}
}
.landing-offer__illustration--bordered {
border: solid 1px #eee;
}
.landing-offer__illustration--height-200 {
width: auto;
height: 200px;
}
.landing-offer__illustration--height-200-cover {
object-fit: cover;
width: 100%;
height: 200px;
}
@media only screen and (min-width: 501px) and (max-width: 986px) {
.landing-offer__illustration--height-200-cover {
height: 350px;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__illustration--height-200-cover {
height: 200px;
}
}
.landing-offer__illustration--height-300 {
width: auto;
height: 300px;
}
.landing-offer__illustration--height-300-cover {
object-fit: cover;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 501px) and (max-width: 986px) {
.landing-offer__illustration--height-300-cover {
height: 400px;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__illustration--height-300-cover {
height: 300px;
}
}
.landing-offer__illustration--height-300-contain {
object-fit: contain;
width: 100%;
height: 300px;
}
@media only screen and (min-width: 501px) and (max-width: 986px) {
.landing-offer__illustration--height-300-contain {
height: 400px;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__illustration--height-300-contain {
height: 300px;
}
}
.landing-offer__paragraph-title--center {
text-align: center;
}
.landing-offer__paragraph {
margin: .5em 0;
}
.landing-offer__paragraph--center {
text-align: center;
}
.landing-offer__paragraph--cta {
margin: 20px 0;
}
.landing-offer__paragraph--extra {
font-size: 12px;
}
@media only screen and (min-width: 501px) {
.landing-offer__paragraph--extra {
font-size: 14px;
}
}
.landing-offer__box {
border: 1px solid #d3d3d3;
padding: 20px 30px 30px 30px;
}
.landing-offer__highlight {
color: #ff0000;
font-weight: 700;
}
.landing-offer__header, .landing-offer__content {
font-family: 'Roboto Condensed', sans-serif;
}
.landing-offer__header {
margin: -15px 0 30px 0;
}
.landing-offer__header h1,
.landing-offer__header h2 {
text-transform: uppercase;
}
.landing-offer__header h1 {
font-size: 22px;
font-weight: 700;
}
@media only screen and (min-width: 501px) {
.landing-offer__header h1 {
font-size: 34px;
}
}
.landing-offer__header h2 {
padding: 0 30px;
font-size: 14px;
font-weight: 400;
}
@media only screen and (min-width: 501px) {
.landing-offer__header h2 {
margin: 0 auto;
}
.landing-offer__header h2 br {
display: none;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__header h2 {
font-size: 16px;
}
}
@media only screen and (min-width: 501px) {
.landing-offer__section {
max-width: 501px;
margin: 0 auto;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__section {
max-width: 987px;
}
}
.landing-offer__ope--is-selected picture:before {
background-color: rgba(255, 255, 255, 0) !important;
}
.landing-offer__ope--is-selected img {
outline-color: #bca351 !important;
}
.landing-offer__ope li.grid__item {
position: relative;
transition: background-color .2s ease-out;
}
.landing-offer__ope li.grid__item picture {
pointer-events: none;
}
.landing-offer__ope li.grid__item picture:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 27px;
left: 0;
background-color: rgba(255, 255, 255, 0.3);
transition: background-color .2s ease-out;
}
.landing-offer__ope li.grid__item img {
outline: 2px solid transparent;
transition: outline-color .4s ease-out;
}
.landing-offer__ope li.grid__item:hover picture:before {
background-color: rgba(255, 255, 255, 0) !important;
}
.landing-offer__ope li.grid__item:hover img {
outline-color: #bca351;
}
.landing-offer__content section {
margin-bottom: 30px;
}
.landing-offer__content section header {
position: relative;
margin: 0 24px;
}
.landing-offer__content section header:before {
content: '';
position: absolute;
top: 14px;
right: 0;
left: 0;
height: 1px;
border-top: 1px solid #000;
z-index: -1;
}
.landing-offer__content section h3 {
display: inline-block;
padding: 0 15px;
font-size: 18px;
font-weight: 400;
text-transform: uppercase;
background-color: #fff;
}
.landing-offer__content form {
position: relative;
padding-bottom: 60px;
}
.landing-offer__content .grid__item {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.landing-offer__content .grid__item input[type="radio"] {
visibility: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.landing-offer__content .grid__item input[type="radio"]:checked + .landing__link {
background-color: #bca351;
}
.landing-offer__content .grid__item input[type="radio"]:checked + .landing__link:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid #8e7a37;
}
.landing-offer__content .grid__item input[type="radio"]:checked + .landing__link span {
color: #fff;
}
.landing-offer__content .grid__item input[type="radio"]:checked + .landing__link svg {
fill: #fff;
}
.landing-offer__content .grid__item .landing__link {
padding: 0;
background-color: #f5f5f5;
-moz-transition: background-color 0.2s ease-out;
-o-transition: background-color 0.2s ease-out;
-webkit-transition: background-color 0.2s ease-out;
transition: background-color 0.2s ease-out;
}
.landing-offer__content .grid__item .landing__link:hover {
background-color: #bca351;
}
.landing-offer__content .grid__item .landing__link:hover:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid #8e7a37;
}
.landing-offer__content .grid__item .landing__link:hover span {
color: #fff;
}
.landing-offer__content .grid__item .landing__link:hover svg {
fill: #fff;
}
.landing-offer__content .grid__item small {
display: block;
margin-top: 5px;
font-size: 14px;
text-transform: uppercase;
}
.landing-offer__presentation {
position: relative;
margin: 0 20px 40px 10px;
}
@media only screen and (min-width: 501px) {
.landing-offer__presentation {
margin: 0 auto 40px;
width: 80%;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation {
width: 750px;
min-height: 500px;
margin-top: 80px;
}
}
.landing-offer__presentation .grid__item {
display: table;
cursor: default;
}
.landing-offer__presentation picture {
float: left;
padding-right: 20px;
line-height: 0;
}
.landing-offer__presentation picture img {
max-width: 120px;
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation picture img {
max-width: none;
}
}
.landing-offer__presentation p {
display: table-cell;
vertical-align: middle;
font-size: 15px;
}
@media only screen and (min-width: 501px) {
.landing-offer__presentation p {
width: 80%;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation p {
text-align: center;
line-height: 20px;
}
}
.landing-offer__presentation p svg {
display: none;
width: 100px;
height: 110px;
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation p svg {
display: block;
}
}
.landing-offer__presentation p strong {
font-size: 17px;
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation p strong {
display: block;
font-size: 24px;
line-height: 26px;
}
}
.landing-offer__presentation p br {
display: none;
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation p br {
display: inline;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation--recipe picture img,
.landing-offer__presentation--recipe p, .landing-offer__presentation--video picture img,
.landing-offer__presentation--video p, .landing-offer__presentation--chief picture img,
.landing-offer__presentation--chief p {
position: absolute;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation--recipe picture img {
top: 0;
left: 0;
right: 0;
width: 665px;
margin: 0 auto;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation--recipe p {
width: 180px;
top: -20px;
right: -100px;
}
}
.landing-offer__presentation--recipe p svg {
margin: -10px 0 0 -80px;
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation--video picture img {
top: 200px;
left: -30px;
width: 365px;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation--video p {
top: 100px;
left: -175px;
width: 200px;
}
}
.landing-offer__presentation--video p svg {
margin: 10px 0 0 85px;
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation--chief picture img {
top: 235px;
right: 35px;
width: 115px;
}
}
@media only screen and (min-width: 987px) {
.landing-offer__presentation--chief p {
width: 160px;
right: -130px;
bottom: 210px;
}
}
.landing-offer__presentation--chief p svg {
position: absolute;
margin: -10px 0 0 -20px;
}
.landing-offer__plan .grid {
margin: 20px 20px 0 0;
}
.landing-offer__plan .grid__item {
position: relative;
}
.landing-offer__plan--label {
top: 20px;
color: #bca351;
}
.landing-offer__plan--label,
.landing-offer__plan .icon {
position: absolute;
left: 0;
right: 0;
}
.landing-offer__plan .icon {
bottom: 10px;
fill: #bca351;
}
.landing-offer__plan .icon-small, .landing-offer__plan .icon-fat {
width: 100%;
}
.landing-offer__plan .icon-small {
height: 50px;
}
.landing-offer__plan .icon-fat {
height: 80px;
}
.landing-offer__gift .grid {
margin: 20px 20px 0 0;
}
.landing-offer__gift .grid__item {
position: relative;
}
.landing-offer__gift picture img {
width: 100%;
height: 100%;
padding: 10px;
object-fit: contain;
}
.landing-offer__footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px 0;
height: 60px;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
transition: transform .4s ease-out;
}
@media only screen and (min-width: 987px) {
.landing-offer__footer {
position: static;
font-size: 16px;
height: auto;
}
}
.landing-offer__footer--is-fixed {
position: fixed;
border-top: 3px solid #fff;
background-color: #bca351;
color: #fff;
transform: translateY(0);
}
.landing-offer__footer--is-fixed button {
font-weight: 700 !important;
}
.landing-offer__footer--is-hidden {
transform: translateY(100px);
}
.landing-offer__footer strong {
font-size: 1.6em;
line-height: 22px;
}
@media only screen and (min-width: 987px) {
.landing-offer__footer strong {
line-height: 52px;
}
}
.landing-offer__footer button {
margin-top: -40px;
font-size: 17px !important;
font-weight: 400;
padding: 0em 2em !important;
line-height: 38px !important;
border: 3px solid #fff !important;
}
@media only screen and (min-width: 987px) {
.landing-offer__footer button {
margin-top: 0;
line-height: 42px !important;
font-size: 27px !important;
border: 0 !important;
}
}
.mod-pedia {
position: relative;
}
.mod-pedia__media {
line-height: 0;
display: none;
}
@media only screen and (min-width: 501px) {
.mod-pedia__media {
display: block;
}
}
.mod-pedia__bg {
display: none;
}
@media only screen and (min-width: 501px) {
.mod-pedia__bg {
display: block;
background-color: rgba(0, 0, 0, 0.04);
box-shadow: inset 0 0 10px #dddddd;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
a:hover .mod-pedia__bg {
background-color: rgba(0, 0, 0, 0.1);
}
}
.mod-pedia__title:first-letter {
text-transform: uppercase;
}
.mod-pedia__body:first-letter {
text-transform: uppercase;
}
@media only screen and (min-width: 501px) {
.mod-pedia--oncol {
position: relative;
padding-bottom: 28px;
max-width: 138px;
margin: 0 auto;
}
}
@media only screen and (min-width: 501px) {
.mod-pedia__body--oncol {
min-height: 23px;
position: absolute;
bottom: 5px;
width: 100%;
text-align: center;
}
}
.mod-pedia__title--oncol {
display: block;
}
@media only screen and (min-width: 501px) {
.mod-pedia__title--oncol {
margin: 0 10px;
border-top: 1px solid #e5e5e5;
background-color: #f6f6f6;
}
a:hover .mod-pedia__title--oncol {
border-top: 1px solid #d8d8d8;
background-color: #e5e5e5;
}
}
.mod-pedia__media--oncol {
padding: 15px 24px 4px 24px;
}
@media only screen and (min-width: 501px) {
.mod-pedia__media--oncol {
text-align: center;
}
}
.mod-pedia__media--oncol img {
max-height: 90px;
}
.mod-pedia--onrow {
display: table;
width: 100%;
padding: 15px;
}
.mod-pedia__media--onrow {
display: table-cell;
vertical-align: middle;
}
.mod-pedia__media--onrow img {
max-width: 74px;
max-height: 65px;
}
.mod-pedia__body--onrow {
display: table-cell;
vertical-align: middle;
width: 100%;
padding-left: 15px;
}
.ingredients-family__title {
margin-bottom: 15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.ingredients-family__title--bordered {
padding-bottom: 10px;
border-bottom: 1px solid;
}
.ingredients-family__media {
line-height: 0;
margin-bottom: 15px;
}
.ingredients-family__list {
-webkit-column-gap: 24px;
-moz-column-gap: 24px;
-ms-column-gap: 24px;
-o-column-gap: 24px;
column-gap: 24px;
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2;
}
.ingredients-family__item {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
padding: 3px 0;
}
@media only screen and (min-width: 501px) {
.ingredients-family__item {
padding: 4px 0;
}
}
@media only screen and (min-width: 987px) {
.ingredients-family__item {
padding: 5px 0;
}
}
.ingredients-family__readmore {
margin-top: 15px;
}
.variete__media {
float: left;
}
.variete__media img {
max-width: 100px;
}
.variete__body {
overflow: hidden;
padding-left: 20px;
}
.pedia-header {
position: relative;
}
.pedia-header__media {
line-height: 0;
text-align: center;
background-color: #fff;
position: relative;
}
.pedia-header__media:after {
content: ' ';
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.04);
}
@media only screen and (min-width: 501px) {
.pedia-header__media {
position: relative;
float: left;
margin-right: 32px;
width: 39.03%;
}
}
.pedia-header__media-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.pedia-header__media-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
.pedia-header__body {
margin-top: 12px;
}
@media only screen and (min-width: 501px) {
.pedia-header__body {
overflow: hidden;
margin-top: 0;
}
}
.figure2 {
max-width: 138px;
}
.figure2__media {
display: none;
line-height: 0;
float: left;
margin-right: 12px;
}
.figure2__media img {
max-width: 40px;
}
@media only screen and (min-width: 501px) {
.figure2__media {
position: relative;
display: block;
text-align: center;
float: none;
margin-right: 0;
}
.figure2__media img {
max-width: 100%;
}
}
.figure2__title {
overflow: hidden;
}
@media only screen and (min-width: 501px) {
.figure2__title {
text-align: center;
}
}
.figure2__icon {
display: none;
}
@media only screen and (min-width: 501px) {
.figure2__icon {
position: absolute;
display: block;
bottom: 10px;
left: 10px;
}
}
.lexicon__link {
display: inline-block;
width: 7.69%;
text-align: center;
padding: 5px 0;
}
.lexicon__link:hover {
background-color: #f5f5f5;
}
@media only screen and (min-width: 501px) {
.lexicon__link {
width: 3.83%;
}
}
.lexicon__link--disabled {
color: #ccc;
}
.lexicon__link--disabled:hover {
background-color: #fff;
}
.lexicon__letter {
border-bottom: 1px solid #dadada;
margin-top: 12px;
margin-bottom: 12px;
}
@media only screen and (min-width: 501px) {
.lexicon__letter {
margin-top: 50px;
margin-bottom: 29px;
}
}
/**
* Tout ce qui concerne les articles (news, etc)
*/
.mod-edito:after {
content: "";
display: table;
clear: both;
}
.mod-edito__media {
position: relative;
line-height: 0;
}
.mod-edito__media--bg:after {
content: ' ';
display: block;
position: absolute;
background-color: rgba(0, 0, 0, 0.04);
box-shadow: inset 0 0 10px #dddddd;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
a:hover .mod-edito__media--bg:after {
background-color: rgba(0, 0, 0, 0.1);
}
.mod-edito__media--shadow:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-moz-box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
-webkit-box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
}
.mod-edito__title a:hover {
color: #78787a;
}
.mod-edito__ribbon {
left: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
top: -8px;
}
@media only screen and (min-width: 501px) {
.mod-edito__ribbon {
top: -10px;
}
}
.mod-edito__picvid {
display: block;
position: absolute;
bottom: 15px;
left: 15px;
}
.mod-edito__title--swiper {
margin-bottom: 10px;
}
@media only screen and (min-width: 501px) {
.mod-edito__media--swiper {
float: none;
position: relative;
line-height: 0;
padding-right: 0;
}
.mod-edito__media--swiper img {
max-width: 100%;
}
.mod-edito__body--swiper {
margin-top: 10px;
}
}
@media only screen and (min-width: 987px) {
.mod-edito--swiper {
cursor: pointer;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
opacity: 1;
padding-bottom: 20px;
}
.mod-edito--swiper.blured {
opacity: 0.5;
}
.mod-edito__media--swiper {
max-width: 76px;
float: left;
margin-right: 10px;
}
.mod-edito__media--swiper img {
max-width: 76px;
}
.mod-edito__ribbon--swiper {
display: none;
}
.mod-edito__picvid--swiper {
display: none;
}
.mod-edito__body--swiper {
overflow: hidden;
margin-top: 0;
}
.mod-edito__content--swiper {
display: none;
}
.mod-edito__title--swiper {
font-size: 13px;
line-height: 18px;
margin-bottom: 0;
}
}
@media only screen and (min-width: 987px) {
.mod-edito--headline {
display: table;
width: 100%;
}
}
.mod-edito--headline-bordered {
border: 1px solid #e5e5e5;
}
.mod-edito__media--headline {
float: none;
padding-right: 0;
}
.mod-edito__media--headline img {
max-width: 100%;
}
@media only screen and (min-width: 987px) {
.mod-edito__media--headline {
display: table-cell;
width: 66.666%;
float: none;
padding-right: 0;
}
.mod-edito__media--headline img {
width: 100%;
max-width: 100%;
}
}
.mod-edito__body--headline {
overflow: auto;
}
@media only screen and (min-width: 987px) {
.mod-edito__body--headline {
display: table-cell;
width: 33.333%;
vertical-align: middle;
padding: 10px;
padding: 10px 30px;
}
}
.mod-edito__title--headline {
margin-bottom: 10px;
}
@media only screen and (min-width: 987px) {
.mod-edito__ribbon--headline {
display: none;
}
}
.mod-edito__title--default {
margin-bottom: 10px;
}
.mod-edito__media--default {
float: left;
margin-right: 12px;
}
.mod-edito__media--default img {
max-width: 120px;
}
@media only screen and (min-width: 501px) {
.mod-edito__media--default {
float: none;
position: relative;
line-height: 0;
padding-right: 0;
margin-right: 0;
}
.mod-edito__media--default img {
max-width: 100%;
}
.mod-edito__title--default {
margin-bottom: 10px;
}
.mod-edito__body--default {
margin-top: 10px;
}
}
.mod-edito__title {
margin-top: 10px;
margin-bottom: 10px;
}
.article__title {
margin-top: 30px;
margin-bottom: 15px;
}
.editos {
position: relative;
margin-bottom: 19px;
}
.editos__scroller {
display: none;
}
@media only screen and (min-width: 987px) {
.editos__scroller {
display: block;
height: 1px;
background: #e5e5e5;
overflow: hidden;
margin-left: 24px;
margin-bottom: 60px;
}
.editos__scroller-bar {
display: inline-block;
vertical-align: top;
height: 1px;
width: 219px;
background: #3e3e41;
-moz-transition: margin-left 0.2s ease;
-o-transition: margin-left 0.2s ease;
-webkit-transition: margin-left 0.2s ease;
transition: margin-left 0.2s ease;
}
.editos__scroller-bar.pos-0 {
margin-left: 0;
}
.editos__scroller-bar.pos-1 {
margin-left: 243px;
}
.editos__scroller-bar.pos-2 {
margin-left: 486px;
}
.editos__scroller-bar.pos-3 {
margin-left: 729px;
}
}
@media only screen and (min-width: 987px) {
.edito-swiper {
position: relative;
overflow: hidden;
border: 1px solid #e5e5e5;
height: 419px;
/*
.swiper-slide{
float: left;
position: relative;
}
.swiper-slide--off{
display: none;
}
.swiper-slide--on{
display: block;
position: absolute;
top: 0;
left: 0;
}
*/
}
.edito-swiper .swiper-wrapper {
position: relative;
}
.edito-swiper__prev, .edito-swiper__next {
height: 100%;
width: 70px;
position: absolute;
top: 0;
z-index: 2;
cursor: pointer;
-moz-user-select: -moz-none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.edito-swiper__prev-icon, .edito-swiper__next-icon {
display: block;
position: absolute;
background-repeat: no-repeat;
background-color: #fff;
width: 100%;
height: 70px;
top: 37%;
border-radius: 40px;
}
.edito-swiper__prev {
left: -45px;
}
.edito-swiper__prev-icon {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAeCAMAAAASJ24jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALdQTFRFpqam+vr6gYGB9/f3fn5+f39/+fn5fX19paWlpKSkq6urgoKC+Pj4ra2t9fX1urq6tLS0vb29gICAqqqqu7u7s7Oz9PT0lJSUm5ubqampsrKyubm5yMjIe3t7nZ2dqKiosbGxycnJlpaWsLCw8/Pz3t7efHx8xsbGr6+vnJycp6enwcHB8fHxenp6vr6+g4ODrq6un5+fx8fHl5eXysrKtra29vb2o6Oj+/v7/Pz8/f39/v7+////ZA2kKwAAAQZJREFUeNpMkdeaAyEIhdHpNT3ba7K9dxXe/7kWNGPGO853gP8g0PCQyNDJKQy1JYP0k62iIG/6sqIoOKLJ7dTgyDHRC0cuCrhsKuSxUZilYGlwOKTXAhJSwWFZWupyzSSKHU54Zm/nPY9BLoAN9il7+JU+0diBn+nhlvIAwxzmrvlaB3LuILDf2UHvgwUcuCqun31WJ3mR4FL/9b6w/gIEeFxUCSt2l5HXbuZly7XaDeVhXQo5Q/pJvBYd1im0EQxlYCfRwh52CMR9dpEIHLeg36AW+kjiq/2BQFdO3FEwdcNusvsj56V+NKMjk0WY1y2Nfs7mcPY+cjCq+9Dd+OcQsbz5F2AASWRcHNp7Em8AAAAASUVORK5CYII=');
background-position: 33px 50%;
border-right: 1px solid #E5E5E5;
}
.edito-swiper__next {
right: -45px;
}
.edito-swiper__next-icon {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAeCAMAAAASJ24jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALdQTFRF+vr6f39/9/f3fn5+paWlpKSkp6enpqam+fn5qampgYGBe3t7fX199vb2vLy8goKCqKio9fX1u7u7gICAxsbGsLCwtbW1srKyoqKiqqqqra2tg4ODtra2r6+vlpaWuLi4urq6rq6unJycvb299PT0rKysfHx8o6OjysrKtLS03d3dm5ubycnJubm5x8fHsbGxs7Oz8vLyl5eXk5OT+Pj4n5+foKCgwcHB+/v7/Pz8/f39/v7+////tlzO/QAAAQ5JREFUeNpUUQlygzAQs4FACJCjuZO26X3fp9e7/39XtYYEimeYsUZaaWXzMPYkIizNZ07iH/FCcgBoXiTGA9sD0l/blF3LEHG5TToSIDTe5h0JsVBvm7WAw4ny6drBCkoYOFhEaTmn/VDWVFFSnjMJe8OaEb9+L96wYzFcZzLgTDdwhAQI62xwXgMjLAa5VLfxkgODw50kWtk3Uy+OOezl/fTmyTRFYDuefNq7MBRBHGyqj8GMNFhje3URvyBDPQP66NH+anPK0LDV92ioXEQXJU2ywVFIE9Y38pXGQ6mbNqSdZ+VltyC/CvwGQKLr0Rl3Wnf3xa69o8JlcfzvKRd2oa20wOxZ7Q7PIn8CDAC6J1zhSIuQGgAAAABJRU5ErkJggg==');
background-position: 21px 50%;
border-left: 1px solid #E5E5E5;
}
}
.figure__caption {
font-size: 12px;
font-style: italic;
}
.card-part {
padding-bottom: 15px;
}
@media only screen and (min-width: 501px) {
.card-part {
padding-bottom: 35px;
}
}
.card-part--content {
margin-top: 30px;
font-size: 16px;
font-size: 1.06667rem;
}
@media print {
.card-part--content {
font-size: 9pt;
}
}
.card-part__title {
margin-bottom: 20px;
}
.card-part__media {
line-height: 0;
}
.card-part__media--left-25 {
float: left;
max-width: 50%;
margin-right: 24px;
}
@media only screen and (min-width: 501px) {
.card-part__media--left-25 {
max-width: 25%;
}
}
.card-part__media--left-50 {
float: left;
max-width: 50%;
margin-right: 24px;
}
.card-part__media--right-25 {
float: right;
max-width: 50%;
margin-left: 24px;
}
@media only screen and (min-width: 501px) {
.card-part__media--right-25 {
max-width: 25%;
}
}
.card-part__media--right-50 {
float: right;
max-width: 50%;
margin-left: 24px;
}
.card-part__body {
font-size: 16px;
font-size: 1.06667rem;
}
@media print {
.card-part__body {
font-size: 9pt;
}
}
.card-part--decorated {
padding-bottom: 0;
}
@media only screen and (min-width: 501px) {
.card-part--decorated {
padding-bottom: 35px;
}
.card-part--decorated:last-child {
padding-bottom: 0;
}
}
.card-part--decorated2 {
border-top: 1px dashed #dadada;
padding-top: 30px;
margin-top: 30px;
padding-bottom: 0;
}
.card-part__body + .card-part__media {
margin-top: 20px;
}
.card-part__media + .card-part__body {
margin-top: 20px;
}
.card-part__title--decorated {
margin-bottom: 0px;
}
@media only screen and (min-width: 501px) {
.card-part__title-label {
cursor: default;
}
}
.card-part__title-label-open {
float: right;
display: none;
}
.card-part__title-label-close {
float: right;
display: none;
}
.card-part--decorated .card-part__checkbox:checked ~ .card-part__title .card-part__title-label-open {
display: none;
}
.card-part--decorated .card-part__checkbox:checked ~ .card-part__title .card-part__title-label-close {
display: block;
}
.card-part--decorated .card-part__title-label-open {
display: block;
}
@media only screen and (min-width: 501px) {
.card-part--decorated .card-part__title-label-open, .card-part--decorated .card-part__title-label-close {
display: none;
}
}
.card-part__title-label--decorated {
display: block;
padding-top: 12px;
padding-bottom: 12px;
}
@media only screen and (min-width: 501px) {
.card-part__title-label--decorated {
padding-top: 40px;
}
}
.card-part + .card-part--decorated {
border-top: 1px dashed #dadada;
}
.card-part__checkbox {
display: none;
}
.card-part__checkbox ~ .card-part__body--decorated {
display: none;
-moz-transition: max-height 0.3s ease;
-o-transition: max-height 0.3s ease;
-webkit-transition: max-height 0.3s ease;
transition: max-height 0.3s ease;
}
.card-part__checkbox:checked ~ .card-part__body--decorated {
display: block;
margin-bottom: 15px;
}
@media only screen and (min-width: 501px) {
.card-part__checkbox:checked ~ .card-part__body--decorated {
margin-bottom: 0;
}
}
@media only screen and (min-width: 501px) {
.card-part__checkbox ~ .card-part__body {
display: block;
}
}
.card-part__media-figure {
position: relative;
}
.article-header {
border-bottom: 1px dashed #dadada;
margin-bottom: 10px;
padding-bottom: 15px;
}
@media only screen and (min-width: 501px) {
.article-header {
margin-bottom: 15px;
padding-bottom: 20px;
}
}
@media only screen and (min-width: 987px) {
.article-header {
margin-bottom: 20px;
padding-bottom: 30px;
}
}
.article-header__title {
margin-bottom: 10px;
}
@media only screen and (min-width: 987px) {
.article-header__title {
margin-bottom: 20px;
}
}
.article-header__title--uppercase {
text-transform: uppercase;
}
.article-header__author {
display: inline-block;
vertical-align: middle;
}
.article-header__ctas {
vertical-align: middle;
margin-top: 10px;
}
@media only screen and (min-width: 987px) {
.article-header__ctas {
display: inline-block;
}
}
.article-header__tags {
margin-top: 10px;
}
.article-header__tag + .article-header__tag {
margin-left: 15px;
}
.article-header__media {
line-height: 0;
margin-top: 15px;
position: relative;
}
@media only screen and (min-width: 987px) {
.article-header__media {
margin-top: 30px;
}
}
.article-header__chapo {
margin-top: 10px;
}
@media only screen and (min-width: 501px) {
.article-header__chapo {
margin-top: 17px;
}
}
/**
* Module d'un article
*/
.mod-article {
position: relative;
}
.mod-article__media {
line-height: 0;
position: relative;
float: left;
max-width: 120px;
margin-right: 8px;
}
.mod-article__media:after {
content: ' ';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-moz-box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
-webkit-box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
box-shadow: inset 0px 0px 40px 0px rgba(0, 0, 0, 0.09);
}
@media only screen and (min-width: 501px) {
.mod-article__media--col {
float: none;
max-width: 100%;
margin-right: 0;
margin-bottom: 12px;
}
}
@media only screen and (min-width: 987px) {
.mod-article__media--row {
margin-right: 24px;
max-width: 50%;
}
}
@media only screen and (min-width: 501px) {
.mod-article__title {
margin-bottom: 5px;
}
}
.mod-article__picvid {
display: block;
position: absolute;
bottom: 5px;
left: 5px;
}
@media only screen and (min-width: 501px) {
.mod-article__picvid {
bottom: 15px;
left: 15px;
}
}
.mod-article__badge {
position: absolute;
z-index: 2;
top: -10px;
left: 10px;
max-width: 30%;
}
.mod-article__badge--premium {
top: auto;
right: 5px;
bottom: 5px;
left: auto;
text-align: right;
}
.mod-generic--has-badge-right .mod-article__badge {
left: auto;
right: 10px;
}
.mod-article__badge img {
max-width: 100%;
}
.form__checkboxes {
margin-top: -15px;
}
.form__checkbox {
display: inline-block;
line-height: 20px;
margin-top: 15px;
}
.form__checkbox input {
position: absolute;
left: -999em;
opacity: 0;
}
.form__checkbox input:checked ~ label:before {
content: '×';
}
.form__checkbox input:hover ~ label:before,
.form__checkbox input:focus ~ label:before {
border-color: #ddd3a2;
}
.form__checkbox label {
vertical-align: middle;
}
.form__checkbox label:before {
content: ' ';
display: inline-block;
vertical-align: middle;
background-color: #fff;
border: 1px solid #dadada;
width: 20px;
height: 20px;
margin-right: 10px;
text-align: center;
font-size: 100%;
line-height: 15px;
font-size: 30px;
}
.form__checkbox label a {
color: #856400;
}
.form__checkbox-tooltip {
display: none;
margin-left: 30px;
}
.form__checkbox-tooltip a {
color: #856400;
}
.form__checkbox input:checked ~ .form__checkbox-tooltip {
display: block;
}
.form__radio {
line-height: 20px;
margin-top: 15px;
}
.form__radio input {
position: absolute;
left: -999em;
opacity: 0;
}
.form__radio input:checked ~ label:before {
content: '•';
color: #000;
}
.form__radio input:hover ~ label:before,
.form__radio input:focus ~ label:before {
border-color: #bca351;
}
.form__radio label {
position: relative;
vertical-align: middle;
}
.form__radio label:before {
content: ' ';
display: inline-block;
vertical-align: middle;
background-color: #fff;
border: 1px solid #dadada;
width: 20px;
height: 20px;
border-radius: 10px;
margin-right: 10px;
text-align: center;
font-size: 20px;
line-height: 20px;
font-size: 30px;
}
.has-error .form__radio label:before {
border: 1px solid red;
}
.form__radio label a {
color: #856400;
}
.form__input, .ui-iws__input {
border: 1px solid #dadada;
padding: 10px;
resize: none;
color: #666;
background-color: #fff;
min-height: 30px;
overflow: hidden;
cursor: text;
}
.form__input:focus, .ui-iws__input:focus {
outline: 1px solid #bca351;
border: 1px solid #ddd3a2;
}
.form__input.has-error, .has-error.ui-iws__input {
border: 2px solid #f62b00;
}
.form__input--forceheight {
max-height: 40px;
}
.form__input--area {
min-height: 115px;
max-height: none;
}
.form__input-icon {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 100%;
background-color: #f5f5f5;
border: 1px solid #d3d3d3;
line-height: 40px;
text-align: center;
}
.form__input-icon + .form__input, .form__input-icon + .ui-iws__input {
padding-left: 50px;
}
.md-editor {
position: relative;
}
.md-editor > .btn-toolbar {
opacity: 0;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
-webkit-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
position: absolute;
top: -36px;
}
.md-editor.active > .btn-toolbar, .md-editor:hover > .btn-toolbar {
opacity: 1;
}
.md-editor > .md-preview {
padding: 10px;
}
.form__search {
display: table;
border-collapse: separate;
position: relative;
text-align: left;
background: #fff;
width: 100%;
margin-bottom: 10px;
}
.form__search-field {
display: block;
width: 100%;
float: left;
z-index: 2;
position: relative;
border: 0;
font-size: 14px;
line-height: 20px;
height: 40px;
padding: 0 5px 0 5px;
border: 1px solid #dadada;
cursor: text;
border-radius: 0;
}
@media only screen and (min-width: 501px) {
.form__search-field {
height: 50px;
font-size: 15px;
padding: 0 10px 0 10px;
}
}
@media only screen and (min-width: 987px) {
.form__search-field {
height: 60px;
font-size: 16px;
padding: 0 15px 0 15px;
}
}
.form__search-field:focus {
outline: none;
outline-offset: 0;
border: 1px solid #bca351;
}
.form__search-field.form__search-field-shadow {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
z-index: -1;
color: #dadada;
}
.form__search-button {
border-left: 1px solid #dadada;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 40px;
border: 1px solid #dadada;
border-left: 0;
}
@media only screen and (min-width: 501px) {
.form__search-button {
width: 50px;
}
}
@media only screen and (min-width: 987px) {
.form__search-button {
width: 60px;
}
}
.form__search-button button {
background-color: transparent;
border: 0 none;
height: 38px;
padding: 0;
width: 100%;
}
@media only screen and (min-width: 501px) {
.form__search-button button {
height: 48px;
}
}
@media only screen and (min-width: 987px) {
.form__search-button button {
height: 58px;
}
}
.form__search-button button:active {
background-color: #dadada;
}
.form__search-filters {
display: none;
}
.form__row {
display: inline-block;
}
.form__row--center {
text-align: center;
}
.form__row--right {
text-align: right;
}
.form__row--left {
text-align: left;
}
.form__row + .form__row {
margin-top: 20px;
}
@media only screen and (min-width: 501px) {
.form__row + .form__row--submit {
margin-top: 40px;
}
}
.form__row-label {
vertical-align: middle;
display: block;
}
@media only screen and (min-width: 501px) {
.form__row-label {
display: inline-block;
}
}
.form__row-label-top {
margin-top: 20px;
margin-bottom: 5px;
}
.form__row-body {
display: inline-block;
vertical-align: top;
position: relative;
}
.form__row-label-opt {
color: #999;
font-size: 11px;
line-height: 16px;
display: block;
font-family: arial;
}
.form__row-separator {
margin-top: 20px;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.form__row-separator:before, .form__row-separator:after {
content: "";
display: table-cell;
width: 100%;
border-bottom: 1px solid #dadada;
transform: translateY(-40%);
}
.form__row-separator--bottom {
margin-top: 20px;
margin-bottom: 20px;
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.form__row-separator--bottom:before, .form__row-separator--bottom:after {
content: "";
display: table-cell;
width: 100%;
border-bottom: 1px solid #dadada;
transform: translateY(-40%);
}
.form__row-separator-label {
display: table-cell;
white-space: nowrap;
width: 40px;
}
.label--is-required:after {
content: " *";
}
/*
.form__select{
display: inline-block;
border: 1px solid #dadada;
color: #666;
background-color: #fff;
min-height: 30px;
background-image: url("/bundles/udgweb/img/ui/select-arrow.png");
background-repeat: no-repeat;
background-position: right 10px top 50%;
padding-right: 30px;
//width: 100%;
overflow: hidden;
& + &{
padding-left: 12px;
}
& select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 100%;
height: 100%;
padding: 10px;
border: 0;
background: transparent;
}
}
*/
.form__select {
position: relative;
display: block;
padding: 0;
border: 1px solid #dadada;
background-color: #fff;
/* ------------------------------------ */
/* START OF UGLY BROWSER-SPECIFIC HACKS */
/* ---------------------------------- */
}
.has-error .form__select, .form__select.has-error {
border: 2px solid #f62b00;
}
.form__select select {
width: 100%;
margin: 0;
background: none;
border: 1px solid transparent;
outline: none;
appearance: none;
-webkit-appearance: none;
color: #666666;
height: 40px;
padding: 8px;
line-height: 1.3;
}
.form__select select:focus {
outline: 1px solid #bca351;
border: 1px solid #ddd3a2;
}
.form__select::after {
content: "";
position: absolute;
width: 9px;
height: 8px;
top: 50%;
right: 1em;
background-image: url(/bundles/udgweb/img/ui/select-arrow.png);
background-repeat: no-repeat;
background-size: 100%;
z-index: 2;
pointer-events: none;
}
.form__select x:-o-prefocus, .form__select::after {
display: none;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.form__select select::-ms-expand {
display: none;
}
.form__select select:focus::-ms-value {
background: transparent;
color: #222;
}
}
@-moz-document url-prefix() {
.form__select {
overflow: hidden;
}
.form__select select {
width: 120%;
width: -moz-calc(100% + 3em);
width: calc(100% + em);
}
}
.form__select select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
/* ------------------------------------ */
/* END OF UGLY BROWSER-SPECIFIC HACKS */
/* ------------------------------------ */
.one-eighth + .seven-eighths {
margin-left: 1%;
width: 86%;
}
.some-error {
color: red;
padding: 5px 0;
}
.form__msg {
padding: 20px 0;
}
.form__error {
color: #f62b00;
font-size: 12px;
padding: 5px 0;
display: block;
}
.rct__container {
max-width: 790px;
margin: 0 auto;
padding-bottom: 30px;
}
.rct__fieldset:nth-child(n+3) {
border-top: 1px dashed #dadada;
padding-top: 19px;
margin-top: 19px;
}
@media only screen and (min-width: 501px) {
.rct__fieldset:nth-child(n+3) {
padding-top: 29px;
margin-top: 29px;
}
}
@media only screen and (min-width: 987px) {
.rct__fieldset:nth-child(n+3) {
padding-top: 39px;
margin-top: 39px;
}
}
.rct__input--height1 {
min-height: 100px;
}
.rct__selectbox {
background-color: #fff;
color: #666;
border: 1px solid #dadada;
width: 100%;
padding: 10px 0 10px 10px;
vertical-align: middle;
width: 100%;
}
.rct__time {
display: inline-block;
}
.rct__time-row + .rct__time-row {
margin-top: 20px;
}
.rct__time-label {
padding: 0 8px;
}
.rct__mul-txt-cont {
border: 1px solid #dadada;
background: #fff;
}
.rct__mul-txt-cont input {
padding: 10px;
width: 100%;
border: 0;
}
.rct__mul-txt-cont input + input {
border-top: 1px dashed #dadada;
}
.rct__add-instr, .rct__add-step {
margin-top: 15px;
margin-bottom: 15px;
}
.rct__add-instr:hover, .rct__add-step:hover {
cursor: pointer;
}
.rct__step-title {
margin-top: 20px;
margin-bottom: 20px;
}
* + .rct__step-title {
padding-top: 29px;
border-top: 1px dashed #dadada;
}
.rct__step-title input {
font-weight: bold;
}
.rct__step-label, .rct__step-ingr-label {
display: inline-block;
text-align: right;
padding-right: 10px;
}
.rct__step-ingr-field {
width: 80%;
display: inline-block;
vertical-align: middle;
}
.rct__step-field {
display: inline-block;
vertical-align: middle;
}
.rct__step-rank {
margin-right: 2%;
padding-left: 0;
padding-right: 0;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.rct__instr {
margin-top: 20px;
}
.admin-mode .rct__instr {
margin-top: 40px;
}
.rct__instr .md-preview {
line-height: 1.3em;
}
.rct__instr-field {
display: inline-block;
width: 100%;
vertical-align: top;
}
@media only screen and (min-width: 501px) {
.rct__instr-field {
width: 80%;
}
}
.rct__instr-media {
display: inline-block;
width: 100%;
margin: 0 auto;
padding-right: 0;
}
@media only screen and (min-width: 501px) {
.rct__instr-media {
width: 20%;
margin: 0;
padding-right: 10px;
}
}
.rct__instr-body {
display: inline-block;
width: 80%;
color: #666;
line-height: 23px;
vertical-align: top;
padding-left: 10px;
}
.rct__instr-suppr {
position: relative;
line-height: 20px;
color: #856400;
font-size: 12px;
cursor: pointer;
float: right;
padding: 2px 15px 2px 10px;
border: 1px solid #DADADA;
margin-top: -1px;
}
.rct__instr-suppr-label {
padding-left: 10px;
vertical-align: middle;
}
.rct__split {
opacity: 0;
font-size: 20px;
line-height: 0;
vertical-align: middle;
height: 0;
padding-bottom: 20px;
margin-bottom: -20px;
border-top: 1px dashed #DADADA;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-webkit-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
.rct__split:hover {
opacity: 1;
cursor: pointer;
}
.rct__ingr {
color: #666;
font-size: 14px;
line-height: 30px;
}
.rct__step-ingredients .rct__ingr {
margin-left: 20%;
}
.rct__ingr-label {
vertical-align: middle;
}
.rct__ingr-label.is-linked {
border-bottom: 1px dotted #666;
}
.rct__ingr-suppr {
cursor: pointer;
margin-left: 8px;
}
.rct__error {
position: absolute;
top: -25px;
color: #f62b00;
}
.rct__right {
float: right;
margin-left: 20px;
}
.rct__delete-all_ingrs {
cursor: pointer;
color: #856400;
font-size: 10px;
line-height: 10px;
text-decoration: none;
text-transform: lowercase;
display: none;
}
.form__row-label:hover .rct__delete-all_ingrs, .rct__step-ingr-label:hover .rct__delete-all_ingrs {
display: inline;
}
.ui-iws {
display: inline-block;
position: relative;
vertical-align: middle;
}
.ui-iws__input {
background-image: url("/bundles/udgweb/img/ui/select-arrow.png");
background-repeat: no-repeat;
background-position: right 10px top 50%;
padding-right: 30px;
width: 100%;
margin-left: 5px;
}
.ui-iws__input:focus {
background-image: none;
padding-right: 0;
}
.ui-iws__input:focus + .ui-iws__suggestions {
display: none;
}
.ui-iws__suggestions {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';
opacity: 0;
width: 100%;
height: 100%;
border: 0;
position: absolute;
top: 0;
left: 0;
}
.js-edit-ingredient:hover {
cursor: text;
}
.js-ingr-link {
display: none;
cursor: pointer;
}
.rct__ingr:hover .js-ingr-link {
display: inline;
}
.js-edit-ingredient-input:focus ~ .js-ingr-suppr, .js-edit-ingredient-input:focus ~ .js-ingr-link {
display: none;
}
.js-imgpicker__button {
margin: 40px 0 20px;
}
.js-imgpicker.filled .js-imgpicker__button {
margin: 0;
}
/*------------------------------------*\
$MEDIA
\*------------------------------------*/
/**
* Place any image- and text-like content side-by-side, as per:
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
* E.g.:
*
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.