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

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

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

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

a {
    text-decoration: none;
    color: #000;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.ar .meganav,
body.ar #productpage,
body.ar .catalog .headband,
body.ar .catalog .contentlist,
.directionrtl{
    direction:rtl;
}

/********************/
/*  RESET CSS FORM  */
/********************/
input, label, select, button, textarea {
    margin: 0;
    border: 0;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    background: none;
    line-height: 1;
    font-size: 13px;
    font-family: Arial;
}

input:focus {
    outline: 0;
}

input, textarea {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

button, input[type=reset], input[type=button], input[type=submit], input[type=checkbox], input[type=radio], select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=range], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week] {
}

input[type=checkbox], input[type=radio] {
    width: 13px;
    height: 13px;
}

input[type=file] {
}

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
}

::-webkit-search-decoration {
    display: none;
}

button, input[type="reset"], input[type="button"], input[type="submit"] {
    overflow: visible;
    width: auto;
}

::-webkit-file-upload-button {
    padding: 0;
    border: 0;
    background: none;
}

textarea {
    vertical-align: top;
    overflow: auto;
}

select {
}

select[multiple] {
    vertical-align: top;
}

/********************/
/*     BXSLIDER     */
/********************/
.bx-wrapper {
    position: relative;
    margin-bottom: 60px;
    padding: 0;
    *zoom: 1;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

.bxslider {
    margin: 0;
    padding: 0;
}

ul.bxslider {
    list-style: none;
}

.bx-viewport {
    -webkit-transform: translatez(0);
}

.bx-wrapper {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    border: 5px solid #fff;
    background: #fff;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: #ffffff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #666;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #000;
}

.bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    vertical-align: bottom;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager-item {
    font-size: 0;
    line-height: 0;
}

.bx-wrapper .bx-prev {
    left: 10px;
}

.bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus {
    background-position: 0 0;
}

.bx-wrapper .bx-next {
    right: 10px;
}

.bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:focus {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:focus {
    background-position: -86px -33px;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    display: block;
    font-size: .85em;
    padding: 10px;
}

.bx-wrapper {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    background: none;
    margin-bottom: 35px;
}

/********************/
/*  ANIMATE V3.7.0  */
/********************/
@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        -webkit-transform: translateZ(0);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0)
    }
    40%, 43% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -30px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        -webkit-transform: translate3d(0, -15px, 0);
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    -webkit-animation-name: bounce;
    -webkit-transform-origin: center bottom;
    animation-name: bounce;
    transform-origin: center bottom
}

@-webkit-keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    0%, 50%, to {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

.flash {
    -webkit-animation-name: flash;
    animation-name: flash
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse
}

@-webkit-keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes rubberBand {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    30% {
        -webkit-transform: scale3d(1.25, .75, 1);
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        -webkit-transform: scale3d(.75, 1.25, 1);
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        -webkit-transform: scale3d(1.15, .85, 1);
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        -webkit-transform: scale3d(.95, 1.05, 1);
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        -webkit-transform: scale3d(1.05, .95, 1);
        transform: scale3d(1.05, .95, 1)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand
}

@-webkit-keyframes shake {
    0%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

@keyframes shake {
    0%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    -webkit-animation-name: shake;
    animation-name: shake
}

@-webkit-keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes headShake {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
    6.5% {
        -webkit-transform: translateX(-6px) rotateY(-9deg);
        transform: translateX(-6px) rotateY(-9deg)
    }
    18.5% {
        -webkit-transform: translateX(5px) rotateY(7deg);
        transform: translateX(5px) rotateY(7deg)
    }
    31.5% {
        -webkit-transform: translateX(-3px) rotateY(-5deg);
        transform: translateX(-3px) rotateY(-5deg)
    }
    43.5% {
        -webkit-transform: translateX(2px) rotateY(3deg);
        transform: translateX(2px) rotateY(3deg)
    }
    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.headShake {
    -webkit-animation-name: headShake;
    -webkit-animation-timing-function: ease-in-out;
    animation-name: headShake;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.swing {
    -webkit-animation-name: swing;
    -webkit-transform-origin: top center;
    animation-name: swing;
    transform-origin: top center
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate(-3deg);
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }
    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }
    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }
    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }
    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }
    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble
}

@-webkit-keyframes jello {
    0%, 11.1%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

@keyframes jello {
    0%, 11.1%, to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    22.2% {
        -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }
    33.3% {
        -webkit-transform: skewX(6.25deg) skewY(6.25deg);
        transform: skewX(6.25deg) skewY(6.25deg)
    }
    44.4% {
        -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }
    55.5% {
        -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }
    66.6% {
        -webkit-transform: skewX(-.78125deg) skewY(-.78125deg);
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }
    77.7% {
        -webkit-transform: skewX(.390625deg) skewY(.390625deg);
        transform: skewX(.390625deg) skewY(.390625deg)
    }
    88.8% {
        -webkit-transform: skewX(-.1953125deg) skewY(-.1953125deg);
        transform: skewX(-.1953125deg) skewY(-.1953125deg)
    }
}

.jello {
    -webkit-animation-name: jello;
    -webkit-transform-origin: center;
    animation-name: jello;
    transform-origin: center
}

@-webkit-keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes heartBeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    28% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }
    70% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.heartBeat {
    -webkit-animation-duration: 1.3s;
    -webkit-animation-name: heartBeat;
    -webkit-animation-timing-function: ease-in-out;
    animation-duration: 1.3s;
    animation-name: heartBeat;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        -webkit-transform: scaleX(1);
        opacity: 1;
        transform: scaleX(1)
    }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    60% {
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97)
    }
    to {
        -webkit-transform: scaleX(1);
        opacity: 1;
        transform: scaleX(1)
    }
}

.bounceIn {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: bounceIn;
    animation-duration: .75s;
    animation-name: bounceIn
}

@-webkit-keyframes bounceInDown {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(0, -3000px, 0);
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        -webkit-transform: translate3d(0, 25px, 0);
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInDown {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(0, -3000px, 0);
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }
    60% {
        -webkit-transform: translate3d(0, 25px, 0);
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, 5px, 0);
        transform: translate3d(0, 5px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown
}

@-webkit-keyframes bounceInLeft {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(-3000px, 0, 0);
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        -webkit-transform: translate3d(25px, 0, 0);
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInLeft {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(-3000px, 0, 0);
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        -webkit-transform: translate3d(25px, 0, 0);
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft
}

@-webkit-keyframes bounceInRight {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(3000px, 0, 0);
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        -webkit-transform: translate3d(-25px, 0, 0);
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInRight {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(3000px, 0, 0);
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        -webkit-transform: translate3d(-25px, 0, 0);
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}

@-webkit-keyframes bounceInUp {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(0, 3000px, 0);
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes bounceInUp {
    0%, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        -webkit-transform: translate3d(0, 3000px, 0);
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }
    60% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    75% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    90% {
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.bounceInUp {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp
}

@-webkit-keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%, 55% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

@keyframes bounceOut {
    20% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9)
    }
    50%, 55% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }
    to {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: bounceOut;
    animation-duration: .75s;
    animation-name: bounceOut
}

@-webkit-keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes bounceOutDown {
    20% {
        -webkit-transform: translate3d(0, 10px, 0);
        transform: translate3d(0, 10px, 0)
    }
    40%, 45% {
        -webkit-transform: translate3d(0, -20px, 0);
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }
    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown
}

@-webkit-keyframes bounceOutLeft {
    20% {
        -webkit-transform: translate3d(20px, 0, 0);
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }
    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes bounceOutLeft {
    20% {
        -webkit-transform: translate3d(20px, 0, 0);
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }
    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft
}

@-webkit-keyframes bounceOutRight {
    20% {
        -webkit-transform: translate3d(-20px, 0, 0);
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }
    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes bounceOutRight {
    20% {
        -webkit-transform: translate3d(-20px, 0, 0);
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }
    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight
}

@-webkit-keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        -webkit-transform: translate3d(0, 20px, 0);
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }
    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes bounceOutUp {
    20% {
        -webkit-transform: translate3d(0, -10px, 0);
        transform: translate3d(0, -10px, 0)
    }
    40%, 45% {
        -webkit-transform: translate3d(0, 20px, 0);
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }
    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@-webkit-keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeInDownBig {
    0% {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

@-webkit-keyframes fadeInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight
}

@-webkit-keyframes fadeInRightBig {
    0% {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInRightBig {
    0% {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig
}

@-webkit-keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInUpBig {
    0% {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes fadeInUpBig {
    0% {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, 2000px, 0);
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft
}

@-webkit-keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(-2000px, 0, 0);
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.fadeOutLeftBig {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig
}

@-webkit-keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight
}

@-webkit-keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(2000px, 0, 0);
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.fadeOutRightBig {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, -100%, 0);
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(0, -2000px, 0);
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.fadeOutUpBig {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig
}

@-webkit-keyframes flip {
    0% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)
    }
    40% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
    }
    50% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)
    }
    80% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg)
    }
    to {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)
    }
}

@keyframes flip {
    0% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn)
    }
    40% {
        -webkit-animation-timing-function: ease-out;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg)
    }
    50% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg)
    }
    80% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scale3d(.95, .95, .95) translateZ(0) rotateY(0deg)
    }
    to {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0deg)
    }
}

.animated.flip {
    -webkit-animation-name: flip;
    -webkit-backface-visibility: visible;
    animation-name: flip;
    backface-visibility: visible
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateX(-20deg)
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
        transform: perspective(400px) rotateX(10deg)
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateX(-20deg)
    }
    60% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
        transform: perspective(400px) rotateX(10deg)
    }
    80% {
        -webkit-transform: perspective(400px) rotateX(-5deg);
        transform: perspective(400px) rotateX(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-animation-name: flipInX;
    -webkit-backface-visibility: visible;
    animation-name: flipInX;
    backface-visibility: visible
}

@-webkit-keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }
    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateY(-20deg)
    }
    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        opacity: 1;
        transform: perspective(400px) rotateY(10deg)
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

@keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }
    40% {
        -webkit-animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in;
        transform: perspective(400px) rotateY(-20deg)
    }
    60% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        opacity: 1;
        transform: perspective(400px) rotateY(10deg)
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg)
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-animation-name: flipInY;
    -webkit-backface-visibility: visible;
    animation-name: flipInY;
    backface-visibility: visible
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        opacity: 1;
        transform: perspective(400px) rotateX(-20deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateX(-20deg);
        opacity: 1;
        transform: perspective(400px) rotateX(-20deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
        transform: perspective(400px) rotateX(90deg)
    }
}

.flipOutX {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: flipOutX;
    -webkit-backface-visibility: visible;
    animation-duration: .75s;
    animation-name: flipOutX;
    backface-visibility: visible
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        opacity: 1;
        transform: perspective(400px) rotateY(-15deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px)
    }
    30% {
        -webkit-transform: perspective(400px) rotateY(-15deg);
        opacity: 1;
        transform: perspective(400px) rotateY(-15deg)
    }
    to {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0;
        transform: perspective(400px) rotateY(90deg)
    }
}

.flipOutY {
    -webkit-animation-duration: .75s;
    -webkit-animation-name: flipOutY;
    -webkit-backface-visibility: visible;
    animation-duration: .75s;
    animation-name: flipOutY;
    backface-visibility: visible
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(-30deg)
    }
    60% {
        -webkit-transform: skewX(20deg);
        opacity: 1;
        transform: skewX(20deg)
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(-30deg)
    }
    60% {
        -webkit-transform: skewX(20deg);
        opacity: 1;
        transform: skewX(20deg)
    }
    80% {
        -webkit-transform: skewX(-5deg);
        transform: skewX(-5deg)
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}

@-webkit-keyframes lightSpeedOut {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(30deg)
    }
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) skewX(30deg)
    }
}

.lightSpeedOut {
    -webkit-animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: center;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: center
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(-200deg);
        transform-origin: center
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: center;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: center
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: right bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: right bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: left bottom
    }
}

.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-90deg);
        transform-origin: right bottom
    }
    to {
        -webkit-transform: translateZ(0);
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform: translateZ(0);
        transform-origin: right bottom
    }
}

.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        opacity: 1;
        transform-origin: center
    }
    to {
        -webkit-transform: rotate(200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(200deg);
        transform-origin: center
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform-origin: center;
        opacity: 1;
        transform-origin: center
    }
    to {
        -webkit-transform: rotate(200deg);
        -webkit-transform-origin: center;
        opacity: 0;
        transform: rotate(200deg);
        transform-origin: center
    }
}

.rotateOut {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }
    to {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }
    to {
        -webkit-transform: rotate(45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(45deg);
        transform-origin: left bottom
    }
}

.rotateOutDownLeft {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }
    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: right bottom
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }
    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: right bottom
    }
}

.rotateOutDownRight {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }
    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform-origin: left bottom;
        opacity: 1;
        transform-origin: left bottom
    }
    to {
        -webkit-transform: rotate(-45deg);
        -webkit-transform-origin: left bottom;
        opacity: 0;
        transform: rotate(-45deg);
        transform-origin: left bottom
    }
}

.rotateOutUpLeft {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }
    to {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform-origin: right bottom;
        opacity: 1;
        transform-origin: right bottom
    }
    to {
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        opacity: 0;
        transform: rotate(90deg);
        transform-origin: right bottom
    }
}

.rotateOutUpRight {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight
}

@-webkit-keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform-origin: top left
    }
    20%, 60% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
        transform-origin: top left
    }
    40%, 80% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg);
        transform-origin: top left
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        opacity: 0;
        transform: translate3d(0, 700px, 0)
    }
}

@keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform-origin: top left
    }
    20%, 60% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
        transform-origin: top left
    }
    40%, 80% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        -webkit-transform-origin: top left;
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg);
        transform-origin: top left
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        opacity: 0;
        transform: translate3d(0, 700px, 0)
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-duration: 2s;
    animation-name: hinge
}

@-webkit-keyframes jackInTheBox {
    0% {
        -webkit-transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes jackInTheBox {
    0% {
        -webkit-transform: scale(.1) rotate(30deg);
        -webkit-transform-origin: center bottom;
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }
    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }
    70% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
        transform: scale(1)
    }
}

.jackInTheBox {
    -webkit-animation-name: jackInTheBox;
    animation-name: jackInTheBox
}

@-webkit-keyframes rollIn {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

@keyframes rollIn {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg);
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}

.rollIn {
    -webkit-animation-name: rollIn;
    animation-name: rollIn
}

@-webkit-keyframes rollOut {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

@keyframes rollOut {
    0% {
        opacity: 1
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0) rotate(120deg);
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

.rollOut {
    -webkit-animation-name: rollOut;
    animation-name: rollOut
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    50% {
        opacity: 1
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn
}

@-webkit-keyframes zoomInDown {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }
}

@keyframes zoomInDown {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }
}

.zoomInDown {
    -webkit-animation-name: zoomInDown;
    animation-name: zoomInDown
}

@-webkit-keyframes zoomInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0)
    }
}

@keyframes zoomInLeft {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0)
    }
}

.zoomInLeft {
    -webkit-animation-name: zoomInLeft;
    animation-name: zoomInLeft
}

@-webkit-keyframes zoomInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
    }
}

@keyframes zoomInRight {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0)
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight
}

@-webkit-keyframes zoomInUp {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }
}

@keyframes zoomInUp {
    0% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0)
    }
    60% {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }
}

.zoomInUp {
    -webkit-animation-name: zoomInUp;
    animation-name: zoomInUp
}

@-webkit-keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }
    50% {
        -webkit-transform: scale3d(.3, .3, .3);
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    to {
        opacity: 0
    }
}

.zoomOut {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut
}

@-webkit-keyframes zoomOutDown {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }
    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom
    }
}

@keyframes zoomOutDown {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0)
    }
    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom
    }
}

.zoomOutDown {
    -webkit-animation-name: zoomOutDown;
    animation-name: zoomOutDown
}

@-webkit-keyframes zoomOutLeft {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }
    to {
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}

@keyframes zoomOutLeft {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }
    to {
        -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
        -webkit-transform-origin: left center;
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}

.zoomOutLeft {
    -webkit-animation-name: zoomOutLeft;
    animation-name: zoomOutLeft
}

@-webkit-keyframes zoomOutRight {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    to {
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}

@keyframes zoomOutRight {
    40% {
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }
    to {
        -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
        -webkit-transform-origin: right center;
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}

.zoomOutRight {
    -webkit-animation-name: zoomOutRight;
    animation-name: zoomOutRight
}

@-webkit-keyframes zoomOutUp {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }
    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom
    }
}

@keyframes zoomOutUp {
    40% {
        -webkit-animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19);
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0)
    }
    to {
        -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        -webkit-transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1);
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom
    }
}

.zoomOutUp {
    -webkit-animation-name: zoomOutUp;
    animation-name: zoomOutUp
}

@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInLeft {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: hidden
    }
}

@keyframes slideOutDown {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: hidden
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: hidden
    }
}

@keyframes slideOutLeft {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        visibility: hidden
    }
}

.slideOutLeft {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft
}

@-webkit-keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: hidden
    }
}

@keyframes slideOutRight {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        visibility: hidden
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: hidden
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
    to {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: hidden
    }
}

.slideOutUp {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp
}

.animated {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-duration: 1s;
    animation-fill-mode: both
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s
}

.animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s
}

.animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.animated.fast {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.animated.faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s
}

@media (prefers-reduced-motion) {
    .animated {
        -webkit-animation: unset;
        -webkit-transition: none;
        animation: unset;
        transition: none
    }
}

/***************************/
/**********ICOMOON**********/
/***************************/
@font-face {
    font-family: 'icomoon';
    src: url('icomoon/icomoon.eot?cplp22');
    src: url('icomoon/icomoon.eot?cplp22#iefix') format('embedded-opentype'),
    url('icomoon/icomoon.ttf?cplp22') format('truetype'),
    url('icomoon/icomoon.woff?cplp22') format('woff'),
    url('icomoon/icomoon.svg?cplp22#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow_line:before {
    content: "\e91c";
    color: #979797;
}

.icon-euro:before {
    content: "\e91d";
}

.icon-truck:before {
    content: "\e91e";
    color: #aeaeae;
}

.icon-idea:before {
    content: "\e91f";
    color: #aeaeae;
}

.icon-gif:before {
    content: "\e920";
}

.icon-jpg:before {
    content: "\e921";
}

.icon-png:before {
    content: "\e922";
}

.icon-zip:before {
    content: "\e923";
}

.icon-psd:before {
    content: "\e924";
}

.icon-marque:before {
    content: "\e91b";
    color: #fff;
}

.icon-info_produit:before {
    content: "\e919";
}

.icon-delivery:before {
    content: "\e91a";
}

.icon-localisation:before {
    content: "\e918";
}

.icon-chronopost:before {
    content: "\e90f";
}

.icon-colissimo:before {
    content: "\e910";
}

.icon-mastercard .path1:before {
    content: "\e911";
    color: rgb(0, 0, 0);
}

.icon-mastercard .path2:before {
    content: "\e912";
    margin-left: -1.28515625em;
    color: rgb(247, 148, 16);
}

.icon-mastercard .path3:before {
    content: "\e913";
    margin-left: -1.28515625em;
    color: rgb(68, 68, 68);
}

.icon-mastercard .path4:before {
    content: "\e914";
    margin-left: -1.28515625em;
    color: rgb(81, 81, 81);
}

.icon-mastercard .path5:before {
    content: "\e915";
    margin-left: -1.28515625em;
    color: rgb(81, 81, 81);
}

.icon-paypal:before {
    content: "\e916";
}

.icon-visa:before {
    content: "\e917";
}

.icon-star:before {
    content: "\e90e";
    color: #d2d5de;
}

.icon-card:before {
    content: "\e90d";
}

.icon-checked:before {
    content: "\e90c";
}

.icon-arrow-left:before {
    content: "\e90a";
}

.icon-arrow-right:before {
    content: "\e90b";
}

.icon-panier:before {
    content: "\e904";
}

.icon-compte:before {
    content: "\e905";
}

.icon-favoris:before {
    content: "\e906";
}

.icon-newsletter:before {
    content: "\e907";
}

.icon-location:before {
    content: "\e908";
}

.icon-search:before {
    content: "\e909";
}

.icon-youtube:before {
    content: "\e900";
    color: #f61c0d;
}

.icon-instagram:before {
    content: "\e901";
    color: #8e99a8;
}

.icon-facebook:before {
    content: "\e902";
    color: #8e99a8;
}

.icon-wordpress:before {
    content: "\e903";
    color: #8e99a8;
}

/********************/
/*       FONTS      */
/********************/
@font-face {
    font-family: 'PlayfairDisplay';
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Regular.eot');
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Regular.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf?17swly') format('truetype'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Regular.woff?17swly') format('woff'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Regular.svg?17swly#PlayfairDisplay-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.playfairdisplay {
    font-family: 'PlayfairDisplay';
}

@font-face {
    font-family: 'PlayfairDisplay';
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Italic.eot');
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Italic.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Italic.ttf?17swly') format('truetype'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Italic.woff?17swly') format('woff'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Italic.svg?17swly#PlayfairDisplay-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'PlayfairDisplay';
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.eot');
    src: url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf?17swly') format('truetype'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.woff?17swly') format('woff'),
    url('../fonts/PlayfairDisplay/PlayfairDisplay-Bold.svg?17swly#PlayfairDisplay-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'GillSans';
    src: url('../fonts/GillSans/GillSans.eot');
    src: url('../fonts/GillSans/GillSans.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/GillSans/GillSans.ttf?17swly') format('truetype'),
    url('../fonts/GillSans/GillSans.woff?17swly') format('woff'),
    url('../fonts/GillSans/GillSans.svg?17swly#GillSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

.gillsans_r {
    font-family: 'GillSans';
}

@font-face {
    font-family: 'GillSans';
    src: url('../fonts/GillSans/GillSans_b.eot');
    src: url('../fonts/GillSans/GillSans_b.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/GillSans/GillSans_b.ttf?17swly') format('truetype'),
    url('../fonts/GillSans/GillSans_b.woff?17swly') format('woff'),
    url('../fonts/GillSans/GillSans_b.svg?17swly#GillSans_b') format('svg');
    font-weight: 700;
    font-style: normal;
}

.gillsans_b {
    font-family: 'GillSans';
    font-weight: 700;
}

@font-face {
    font-family: 'GillSans';
    src: url('../fonts/GillSans/GillSans-SemiBold.eot');
    src: url('../fonts/GillSans/GillSans-SemiBold.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/GillSans/GillSans-SemiBold.ttf?17swly') format('truetype'),
    url('../fonts/GillSans/GillSans-SemiBold.woff?17swly') format('woff'),
    url('../fonts/GillSans/GillSans-SemiBold.svg?17swly#GillSans-SemiBold') format('svg');
    font-weight: 600;
    font-style: normal;
}

.gillsans_sb {
    font-family: 'GillSans';
    font-weight: 600;
}

@font-face {
    font-family: 'GillSans';
    src: url('../fonts/GillSans/GillSans-Light.eot');
    src: url('../fonts/GillSans/GillSans-Light.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/GillSans/GillSans-Light.ttf?17swly') format('truetype'),
    url('../fonts/GillSans/GillSans-Light.woff?17swly') format('woff'),
    url('../fonts/GillSans/GillSans-Light.svg?17swly#GillSans-Light') format('svg');
    font-weight: 100;
    font-style: normal;
}

.gillsans_l {
    font-family: 'GillSans';
    font-weight: 100;
}


@font-face {
    font-family: 'AmericanTypewriter';
    src: url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Lt.eot');
    src: url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Lt.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Lt.ttf?17swly') format('truetype'),
    url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Lt.woff?17swly') format('woff'),
    url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Lt.svg?17swly#AmericanTypewriterITCW02-Lt') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'AmericanTypewriter_cond';
    src: url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Md.eot');
    src: url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Md.eot?17swly#iefix') format('embedded-opentype'),
    url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Md.ttf?17swly') format('truetype'),
    url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Md.woff?17swly') format('woff'),
    url('../fonts/AmericanTypewritter/AmericanTypewriterITCW02-Md.svg?17swly#AmericanTypewriterITCW02-Md') format('svg');
    font-weight: 600;
    font-style: normal;
}

.americantw {
    font-family: 'AmericanTypewriter';
}


/********************/
/*       ARROW      */
/********************/
/* Arrow <i class="arrow up|right|left|down"> // FOR SIZE JUSTE PLAY WITH padding:3px <= MORE OR LESS */
.arrow {
    border: solid #000;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    -webkit-transition: 300ms ease all;
    -moz-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
}

.arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.arrow.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.arrow.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.arrow.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

/***************************/
/*******CLOSE BUTTON********/
/***************************/
/* Close Button */
[class*='close-'] {
    color: #fff;
    font: 14px/100% arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.close-classic:after {
    content: 'X';
}

.close-thin:after {
    content: '×';
}

.close-thik:after {
    content: '✖';
}

/**************************/
/*     TRIANGLE BULLE     */
/**************************/
.triangle-bulle:before {
    content: " ";
    top: -24px;
    right: 1px;
    position: absolute;
    border: solid transparent;
    border-bottom-color: #cccccc;
    border-width: 12px;
    margin-left: -10px;
}

.triangle-bulle:after {
    content: " ";
    width: 0;
    height: 0;
    top: -24px;
    right: 0;
    position: absolute;
    border: solid transparent;
    border-bottom-color: #fff;
    border-width: 13px;
    margin-left: -10px;
}

/********************/
/*     CLEARFIX     */
/********************/
.cf:before, .cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/********************/
/*     SELECTBOX    */
/********************/
.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.selectbox {
    position: relative;
    height: 38px;
    cursor: pointer;
    display: inline-block
}

.selectbox:hover {
    -webkit-box-shadow: 0 0 0 0 #313131;
    -moz-box-shadow: 0 0 0 0 #313131;
    box-shadow: 0 0 0 0 #313131
}

.selectbox:after {
    content: ' ';
    border: solid #4b4853;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 4px;
    -webkit-transition: .3s ease all;
    -moz-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: 13px;
    right: 10px
}

.selectbox.open:after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    top: 15px
}

.selectbox ul {
    position: absolute;
    top: 38px;
    left: -1px;
    z-index: 10;
    display: none;
    max-height: 150px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.selectbox.open ul {
    display: block
}

.selectbox, .selectbox ul {
    width: 100%;
    border: 1px solid #cfcfcf;
    background-color: #fff
}

.selectbox span, .selectbox ul li {
    overflow: hidden;
    width: 100%;
    padding-left: 15px;
    display: block;
    line-height: 40px;
    height: 42px;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box
}

.selectbox ul li.active, .selectbox ul li:hover {
    background-color: rgba(230, 230, 230, .5)
}

.selectbox, .selectbox * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

/********************/
/*     MESSENGER    */
/********************/
.messenger {
    display: none;
    z-index: 10000;
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: #56A160;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.25px;
    text-align: center;
}

.messenger .container_msg {
    padding: 15px 20px 0 20px;
    letter-spacing: 1px;
}

.messenger .container_msg a {
    color: #fff;
    float: right;
    cursor: pointer;
    font-size: 17px;
    margin-top: -2px;
}

.messenger_error {
    background-color: #D0021B;
}


/**
 * --------------------------------------------------------------------------------------------------------------------------------------------------------------------
 *
 *  PopIt/LoadIt
 *
 * --------------------------------------------------------------------------------------------------------------------------------------------------------------------
 */
.popit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    z-index: 9999;
}

.popitlight {
    background-color: rgba(255, 255, 255, 0.50);
}

.popit .box {
    position: fixed;
    width: 915px;
    top: -3000px;
    left: 50%;
    margin-left: -457.5px;
    background-color: #fff;
}

.popit.w440 .box {
    width: 440px;
    top: -3000px;
    left: 50%;
    margin-left: -220px;
}

.popit.w560 .box {
    width: 560px;
    top: -3000px;
    left: 50%;
    margin-left: -280px;
}

.popit.w790 .box {
    width: 790px;
    top: -3000px;
    left: 50%;
    margin-left: -395px;
}

.popit.absoluteposition .box {
    position: absolute;
}

.popitshort .box {
    width: 610px;
    margin-left: -305px;
}

.popit_addgift .box {
    width: 430px;
    margin-left: -215px;
}

.popit_addlook .box {
    width: 850px;
    margin-left: -425px;
}

.popit_addlook .box .conditionpromo p {
    font-size: 13px;
    text-align: center;
}

.popit .box .popitcloser {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 35px;
    color: #4b4853;
}

.popit .box .popitcontent {
    display: inline-block;
    width: 96%;
    padding: 25px 0 35px 2%;
    font-size: 13px;
}

.popit .box .popitcontent p.title_1 {
    font-size: 24px;
    font-weight: 600;
    color: #4e1f5b;
    letter-spacing: 0.50px;
    padding-bottom: 35px;
}

.popit .box .popitcontent b {
    font-weight: 700;
}

.nsloader {
    color: #4e1f5b;
    margin-top: -24px;
    position: absolute;
    text-align: center;
    top: 1200px;
    width: 100%;
    z-index: 1000;
}

.popit_addbasket p,
.popit_addgift p {
    font-size: 13px;
    color: #4e1f5b;
    font-weight: 400;
    letter-spacing: 0.50px;
}

.popit_addbasket p b {
    font-weight: 700;
}

.popit_addgift p b span,
.popit_addbasket p b span {
    color: #eb0b5f;
}

.popit_addbasket p.title {
    font-size: 22px;
    color: #4e1f5b;
    font-weight: 300;
    letter-spacing: 1px;
}

.popit_addgift p.title {
    font-size: 22px;
    line-height: 24px;
    color: #4e1f5b;
    font-weight: 300;
    letter-spacing: 1px;
    text-align: center;
}

.popit_addgift .justaddedproduct {
    text-align: center;
}

.popit_addgift .justaddedproduct img {
    height: 190px;
    border: 1px solid #e0e0e0;
}

.popit_addgift .justaddedproduct p {
    color: #4e1f5b;
    font-weight: 700;
    padding: 10px 0;
}

.popit_addgift .justaddedproduct p.description {
    color: #3d3c3c;
    font-weight: normal;
    padding: 10px 0;
    width: 80%;
    margin: 0 auto;
}

.popit_addbasket .justaddedproduct .packshot {
    float: left;
    width: 225px;
    margin-right: 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.popit_addbasket .justaddedproduct .packshot a {
    display: inline-block;
}

.popit_addbasket .packshot img {
}

.popit_addbasket .justaddedproduct .productpreview {
    float: left;
    width: 630px;
    height: auto;
    border: none;
    text-align: left;
}

.popit_addbasket .justaddedproduct .productpreview .commerce {
    height: 90px;
}

.popit_addbasket .justaddedproduct .productpreview .popaddabsketmessenger {
    position: absolute;
    right: 65px;
    top: 116px;
}

.popit_addbasket .justaddedproduct_cta {
    margin-top: -48px;
    width: 630px;
    padding: 0 0 0 245px;
}

.popit_addbasket ul.title {
    margin-bottom: 0;
}

.popit_addbasket ul.title li {
    font-size: 18px;
}

.popit_addbasket ul.advicespushproducts li {
    float: left;
    width: 50%;
}

.popit_addbasket ul.advicespushproducts li .packshot {
    float: left;
    width: 165px;
    margin-right: 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
}

.popit_addbasket ul.advicespushproducts li .packshot img {
    height: 130px !important;
    width: auto !important;
}

.popit_addbasket ul.advicespushproducts li .productpreview {
    float: left;
    width: 230px;
    height: auto;
    border: none;
    text-align: left;
}

.popit_addbasket ul.advicespushproducts li .commerce {
    height: auto;
}

.popit.w560 .box {
    width: 560px;
    top: -3000px;
    left: 50%;
    margin-left: -280px;
}

.popConnexion .box {
    background-color: #fff;
}

.popConnexion .box .bg_pink {
    background-color: #fff;
}

.popConnexion .content_create {
    padding: 0 5%;
}

.popConnexion .content_login {
    padding: 0 20%;
}

.popRateproduct textarea {
    height: 150px;
}

.popinAddbasket .product {
    width: 210px !important;
    margin-left: 30px;
    display: inline-block;
    vertical-align: top;
}

.popinAddbasket .product .cta-grey {
    width: 100%;
}

.popinAddbasket .ctaAdd {
    padding-left: 30px;
    padding-right: 30px;
}

.popinAddbasket img {
    width: 170px;
}

.pop_newsletter .offert {
    text-transform: uppercase;
    font-size: 15px;
    line-height: 33px;
}

.pop_newsletter .offert b {
    font-size: 40px;
}

.pop_newsletter .offert span {
    font-size: 30px;
}

.pop_newsletter .offert hr {
    width: 45%;
    border: 0;
    height: 1px;
    background-color: black;
}

.pop_newsletter li {
    width: 33%;
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
    box-sizing: border-box;
}

.pop_newsletter li span {
    height: 60px;
    display: block;
    color: #AEAEAE;
}

.pop_newsletter li:nth-child(1) span {
    font-size: 60px;
}

.pop_newsletter li:nth-child(2) span {
    font-size: 40px;
    padding-top: 10px;
    box-sizing: border-box;
}

.pop_newsletter li:nth-child(3) span {
    font-size: 50px;
}

.pop_newsletter form .icon-arrow_line {
    top: 14px;
    right: 10px;
}

.pop_newsletter .visuel {
    height: 100%;
    object-fit: cover;
}

.pop_fidelity .box {
    max-height: 90vh;
    overflow-y: scroll;
}

.pop_fidelity .headerpopin {
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 20px 0;
}

.pop_fidelity .popitcontent {
    padding: 0 !important;
    width: 100% !important;
}

.pop_fidelity .description {
    font-size: 15px;
    letter-spacing: 0.5px;
    padding: 15px 10px;
    line-height: 20px;
}

.pop_fidelity h2 {
    padding: 15px 10px;
    display: inline-block;
    padding-bottom: 3px;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 15px;
}

.pop_fidelity h2::after {
    height: 3px;
    width: 80px;
    background-color: #F1D3CB;
}

.pop_fidelity form {
    padding: 0 10px 30px;
}

.pop_fidelity form .inputcheck {
    margin-top: 4px;
}

.pop_fidelity form li {
    margin-top: 15px;
}

.pop_fidelity form li p {
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.pop_fidelity form li p i {
    font-size: 12px;
}

/********************/
/*    PARAMETRES    */
/********************/
html, body {
    font-family: 'GillSans', sans-serif;
    font-size: 12px;
}

textarea {
    resize: none;
    outline: none;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    float: left;
}

.col-0 {
    width: 4.15555%;
}

.col-1 {
    width: 8.33333%;
}

.col-2 {
    width: 16.66666%;
}

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.33333%;
}

.col-5 {
    width: 41.66666%;
}

.col-6 {
    width: 50%;
}

.col-7 {
    width: 58.33333%;
}

.col-8 {
    width: 66.66666%;
}

.col-9 {
    width: 75%;
}

.col-10 {
    width: 83.33333%;
}

.col-11 {
    width: 91.66666%;
}

.col-12 {
    width: 100%;
}

.col-mar-0 {
    margin-left: 4.15555%;
}

.col-mar-1 {
    margin-left: 8.33333%;
}

.col-mar-2 {
    margin-left: 16.66666%;
}

.col-mar-3 {
    margin-left: 25%;
}

.col-mar-4 {
    margin-left: 33.33333%;
}

.col-mar-5 {
    margin-left: 41.66666%;
}

.col-mar-6 {
    margin-left: 50%;
}

.col-mar-7 {
    margin-left: 58.33333%;
}

.col-mar-8 {
    margin-left: 66.66666%;
}

.col-mar-9 {
    margin-left: 75%;
}

.col-mar-10 {
    margin-left: 83.33333%;
}

.col-mar-11 {
    margin-left: 91.66666%;
}

.col-mar-lr-0-real {
    margin-left: 0;
    margin-right: 0;
}

.col-mar-lr-0 {
    margin-left: 4.15555%;
    margin-right: 4.15555%;
}

.col-mar-lr-1 {
    margin-left: 8.33333%;
    margin-right: 8.33333%;
}

.col-mar-lr-2 {
    margin-left: 16.66666%;
    margin-right: 16.66666%;
}

.col-mar-lr-3 {
    margin-left: 25%;
    margin-right: 25%;
}

.col-mar-lr-4 {
    margin-left: 33.33333%;
    margin-right: 33.33333%;
}

.col-mar-lr-5 {
    margin-left: 41.66666%;
    margin-right: 41.66666%;
}

.col-mar-lr-6 {
    margin-left: 50%;
    margin-right: 50%;
}

.col-mar-lr-7 {
    margin-left: 58.33333%;
    margin-right: 58.33333%;
}

.col-mar-lr-8 {
    margin-left: 66.66666%;
    margin-right: 66.66666%;
}

.col-mar-9-lr {
    margin-left: 75%;
    margin-right: 75%;
}

.col-mar-10-lr {
    margin-left: 83.33333%;
    margin-right: 83.33333%;
}

.col-mar-11-lr {
    margin-left: 91.66666%;
    margin-right: 91.66666%;
}

.col-pad-lr-0 {
    padding-left: 4.15555%;
    padding-right: 4.15555%;
}

.col-pad-lr-1 {
    padding-left: 8.33333%;
    padding-right: 8.33333%;
}

.col-pad-lr-2 {
    padding-left: 16.66666%;
    padding-right: 16.66666%;
}

.col-pad-lr-3 {
    padding-left: 25%;
    padding-right: 25%;
}

.col-pad-lr-4 {
    padding-left: 33.33333%;
    padding-right: 33.33333%;
}

.col-pad-lr-5 {
    padding-left: 41.66666%;
    padding-right: 41.66666%;
}

.col-pad-lr-6 {
    padding-left: 50%;
    padding-right: 50%;
}

.col-pad-lr-7 {
    padding-left: 58.33333%;
    padding-right: 58.33333%;
}

.col-pad-lr-8 {
    padding-left: 66.66666%;
    padding-right: 66.66666%;
}

.col-pad-9-lr {
    padding-left: 75%;
    padding-right: 75%;
}

.col-pad-10-lr {
    padding-left: 83.33333%;
    padding-right: 83.33333%;
}

.col-pad-11-lr {
    padding-left: 91.66666%;
    padding-right: 91.66666%;
}

.col-pad-10px {
    padding-left: 10px;
    padding-right: 10px;
}

.col-left-pad-10px {
    padding-left: 10px;
}

.col-right-pad-10px {
    padding-right: 10px;
}

.col-pad-20px {
    padding-left: 20px;
    padding-right: 20px;
}

.col-left-pad-20px {
    padding-left: 20px;
}

.col-right-pad-20px {
    padding-right: 20px;
}

.col-pad-full-40px {
    padding: 40px;
}

.col-pad-40px {
    padding-left: 40px;
    padding-right: 40px;
}

.col-left-pad-40px {
    padding-left: 40px;
}

.col-right-pad-40px {
    padding-right: 40px;
}

.col-pad-full-10px-0px {
    padding: 10px 0;
}

.col-pad-full-10px-10px {
    padding: 10px 10px;
}

.col-pad-full-15px-10px {
    padding: 15px 10px;
}

.col-pad-full-15px-40px {
    padding: 15px 40px;
}

.col-pad-full-25px-15px {
    padding: 25px 15px;
}

.col-pad-full-30px-40px {
    padding: 30px 40px;
}

.col-pad-full-35px-40px {
    padding: 35px 40px;
}

.col-pad-full-35px-20px {
    padding: 35px 20px;
}

.col-pad-full-35px-25px {
    padding: 35px 25px;
}

.col-pad-full-35px-40px {
    padding: 35px 40px;
}

.col-pad-full-40px-0px {
    padding: 40px 0;
}

.col-pad-full-15px-60px {
    padding: 15px 60px;
}

.col-pad-full-20px-40px {
    padding: 20px 40px;
}

.col-pad-full-20px-30px {
    padding: 20px 30px;
}

.col-pad-full-25px-40px {
    padding: 25px 40px;
}

.col-pad-full-25px-30px {
    padding: 25px 30px;
}

.col-pad-full-35px-30px {
    padding: 35px 30px;
}

.col-pad-full-20px-30px {
    padding: 20px 30px;
}

.col-pad-full-40px-40px {
    padding: 40px 40px;
}

.col-pad-full-45px-60px {
    padding: 45px 60px;
}

.col-pad-full-50px-40px {
    padding: 50px 40px;
}

.col-pad-full-60px-35px {
    padding: 60px 35px;
}

.mt-5, .mt5 {
    margin-top: 5px;
}

.mt-10, .mt10 {
    margin-top: 10px;
}

.mt-15, .mt15 {
    margin-top: 15px;
}

.mt-20, .mt20 {
    margin-top: 20px;
}

.mt-25, .mt25 {
    margin-top: 25px;
}

.mt-30, .mt30 {
    margin-top: 30px;
}

.mt-35, .mt35 {
    margin-top: 35px;
}

.mt-40, .mt40 {
    margin-top: 40px;
}

.mt-45, .mt45 {
    margin-top: 45px;
}

.mt-50, .mt50 {
    margin-top: 50px;
}

.mt-55, .mt55 {
    margin-top: 55px;
}

.mt-60, .mt60 {
    margin-top: 60px;
}

.mt-65, .mt65 {
    margin-top: 65px;
}

.mt-70, .mt70 {
    margin-top: 70px;
}

.mt-75, .mt75 {
    margin-top: 75px;
}

.mt-80, .mt80 {
    margin-top: 80px;
}

.mt-85, .mt85 {
    margin-top: 85px;
}

.mt-90, .mt90 {
    margin-top: 90px;
}

.mt-95, .mt95 {
    margin-top: 95px;
}

.mt-100, .mt100 {
    margin-top: 100px;
}

.mt-125, .mt125 {
    margin-top: 125px;
}

.mt-128, .mt128 {
    margin-top: 128px;
}

.mt-130, .mt130 {
    margin-top: 130px;
}

.mb-0, .mb0 {
    margin-bottom: 0;
}

.mb-5, .mb5 {
    margin-bottom: 5px;
}

.mb-10, .mb10 {
    margin-bottom: 10px;
}

.mb-15, .mb15 {
    margin-bottom: 15px;
}

.mb-20, .mb20 {
    margin-bottom: 20px;
}

.mb-25, .mb25 {
    margin-bottom: 25px;
}

.mb-30, .mb30 {
    margin-bottom: 30px;
}

.mb-35, .mb35 {
    margin-bottom: 35px;
}

.mb-40, .mb40 {
    margin-bottom: 40px;
}

.mb-45, .mb45 {
    margin-bottom: 45px;
}

.mb-50, .mb50 {
    margin-bottom: 50px;
}

.mb-55, .mb55 {
    margin-bottom: 55px;
}

.mb-60, .mb60 {
    margin-bottom: 60px;
}

.mb-65, .mb65 {
    margin-bottom: 65px;
}

.mb-70, .mb70 {
    margin-bottom: 70px;
}

.mb-75, .mb75 {
    margin-bottom: 75px;
}

.mb-80, .mb80 {
    margin-bottom: 80px;
}

.mb-82, .mb82 {
    margin-bottom: 82px;
}

.mb-85, .mb85 {
    margin-bottom: 85px;
}

.mb-90, .mb90 {
    margin-bottom: 90px;
}

.mb-95, .mb95 {
    margin-bottom: 95px;
}

.mb-100, .mb100 {
    margin-bottom: 100px;
}

.mb-186, .mb186 {
    margin-bottom: 186px;
}

.mb-190, .mb190 {
    margin-bottom: 190px;
}

.ml-0, .ml0 {
    margin-left: 0;
}

.ml-5, .ml5 {
    margin-left: 5px;
}

.ml-10, .ml10 {
    margin-left: 10px;
}

.ml-13, .ml13 {
    margin-left: 13px;
}

.ml-15, .ml15 {
    margin-left: 15px;
}

.ml-20, .ml20 {
    margin-left: 20px;
}

.ml-25, .ml25 {
    margin-left: 25px;
}

.ml-30, .ml30 {
    margin-left: 30px;
}

.ml-35, .ml35 {
    margin-left: 35px;
}

.ml-40, .ml40 {
    margin-left: 40px;
}

.ml-45, .ml45 {
    margin-left: 45px;
}

.ml-50, .ml50 {
    margin-left: 50px;
}

.ml-60, .ml60 {
    margin-left: 60px;
}

.ml-70, .ml70 {
    margin-left: 70px;
}

.ml-80, .ml80 {
    margin-left: 80px;
}

.ml-90, .ml90 {
    margin-left: 90px;
}

.ml-100, .ml100 {
    margin-left: 100px;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-15 {
    margin-right: 15px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-25 {
    margin-right: 25px;
}

.mr-30 {
    margin-right: 30px;
}

.mr-50 {
    margin-right: 50px;
}

.mr-60 {
    margin-right: 60px;
}

.pad10, .pad-10 {
    padding: 10px
}

.pad15, .pad-15 {
    padding: 15px
}

.pad25, .pad-25 {
    padding: 25px
}

.pad5-30, .pad-5-30 {
    padding: 5px 30px
}

.pad15-25, .pad-15-25 {
    padding: 15px 25px
}

.pad15-40, .pad-15-40 {
    padding: 15px 40px
}

.pad25-20, .pad-25-20 {
    padding: 25px 20px
}

.pad30-20, .pad-30-20 {
    padding: 30px 20px
}

.pb-5, .pb5 {
    padding-bottom: 5px;
}

.pb-10, .pb10 {
    padding-bottom: 10px;
}

.pb-15, .pb15 {
    padding-bottom: 15px;
}

.pb-20, .pb20 {
    padding-bottom: 20px;
}

.pb-30, .pb30 {
    padding-bottom: 30px;
}

.pb-35, .pb35 {
    padding-bottom: 35px;
}

.pb-40, .pb40 {
    padding-bottom: 40px;
}

.pb-50, .pb50 {
    padding-bottom: 50px;
}

.pb-60, .pb60 {
    padding-bottom: 60px;
}

.pb-65, .pb65 {
    padding-bottom: 65px;
}

.pb-70, .pb70 {
    padding-bottom: 70px;
}

.pb-80, .pb80 {
    padding-bottom: 80px;
}

.pb-90, .pb90 {
    padding-bottom: 90px;
}

.pb-100, .pb100 {
    padding-bottom: 100px;
}

.pt-0, .pt0 {
    padding-top: 0;
}

.pt-5, .pt5 {
    padding-top: 5px;
}

.pt-10, .pt10 {
    padding-top: 10px;
}

.pt-15, .pt15 {
    padding-top: 15px;
}

.pt-20, .pt20 {
    padding-top: 20px;
}

.pt-25, .pt25 {
    padding-top: 25px;
}

.pt-30, .pt30 {
    padding-top: 30px;
}

.pt-35, .pt35 {
    padding-top: 35px;
}

.pt-40, .pt40 {
    padding-top: 40px;
}

.pt-45, .pt45 {
    padding-top: 45px;
}

.pt-50, .pt50 {
    padding-top: 50px;
}

.pt-60, .pt60 {
    padding-top: 60px;
}

.pt-70, .pt70 {
    padding-top: 70px;
}

.pt-80, .pt80 {
    padding-top: 80px;
}

.pt-90, .pt90 {
    padding-top: 90px;
}

.pt-100, .pt100 {
    padding-top: 100px;
}

.pt-130, .pt130 {
    padding-top: 130px;
}

.pl-10, .pl10 {
    padding-left: 10px;
}

.pl-15, .pl15 {
    padding-left: 15px;
}

.pl-20, .pl20 {
    padding-left: 20px;
}

.pl-25, .pl25 {
    padding-left: 25px;
}

.pl-30, .pl30 {
    padding-left: 30px;
}

.pl-40, .pl40 {
    padding-left: 40px;
}

.pl-50, .pl50 {
    padding-left: 50px;
}

.pl-100, .pl100 {
    padding-left: 100px;
}

.pr-25, .pr25 {
    padding-right: 25px;
}

.pr-40, .pr40 {
    padding-right: 40px;
}

.pr-50, .pr50 {
    padding-right: 50px;
}

.pr-60, .pr60 {
    padding-right: 60px;
}

.pr-100, .pr100 {
    padding-right: 100px;
}

.plr-10, .plr10 {
    padding-left: 10px;
    padding-right: 10px
}

.plr-45, .plr45 {
    padding-left: 45px;
    padding-right: 45px
}

.ptb-15, .ptb15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.ptb-25, .ptb25 {
    padding-top: 25px;
    padding-bottom: 25px;
}

.ptb-30, .ptb30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.ptb-40, .ptb40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.f-0, .f0 {
    font-size: 0;
}

.f-8, .f8 {
    font-size: 8px;
}

.f-9, .f9 {
    font-size: 9px;
}

.f-10, .f10 {
    font-size: 10px;
}

.f-11, .f11 {
    font-size: 11px;
}

.f-12, .f12 {
    font-size: 12px;
}

.f-13, .f13 {
    font-size: 13px;
}

.f-14, .f14 {
    font-size: 14px;
}

.f-15, .f15 {
    font-size: 15px;
}

.f15important {
    font-size: 15px !important;
}

.f-16, .f16 {
    font-size: 16px;
}

.f-17, .f17 {
    font-size: 17px;
}

.f-18, .f18 {
    font-size: 18px;
}

.f-19, .f19 {
    font-size: 19px;
}

.f-20, .f20 {
    font-size: 20px;
}

.f-21, .f21 {
    font-size: 21px;
}

.f-22, .f22 {
    font-size: 22px;
}

.f-23, .f23 {
    font-size: 23px;
}

.f-24, .f24 {
    font-size: 24px;
}

.f-25, .f25 {
    font-size: 25px;
}

.f-26, .f26 {
    font-size: 26px;
}

.f-27, .f27 {
    font-size: 27px;
}

.f-28, .f28 {
    font-size: 28px;
}

.f-29, .f29 {
    font-size: 29px;
}

.f-30, .f30 {
    font-size: 30px;
}

.f-32, .f32 {
    font-size: 32px;
}

.f-35, .f35 {
    font-size: 35px;
}

.f-36, .f36 {
    font-size: 36px;
}

.f-40, .f40 {
    font-size: 40px;
}

.f-45, .f45 {
    font-size: 45px;
}

.f-60, .f60 {
    font-size: 60px;
}

.lp0-5, .lp-0-5 {
    letter-spacing: 0.5px;
}

.lp1, .lp-1 {
    letter-spacing: 1px;
}

.lp1-1, .lp-1-1 {
    letter-spacing: 1.1px;
}

.lp1-5, .lp-1-5 {
    letter-spacing: 1.5px;
}

.lp2, .lp-2 {
    letter-spacing: 2px;
}

.lp3, .lp-3 {
    letter-spacing: 3px;
}

.lp7, .lp-7 {
    letter-spacing: 7px;
}

.flexbox {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flexbox.flexend {
    justify-content: flex-end;
}
.flexbox.flexbetween {
    justify-content: space-between;
}

.itemcenter {
    align-items: center;
}

.alignleft {
    text-align: left;
}

.alignright {
    text-align: right;
}

.aligncenter {
    text-align: center;
}

.alignjustify {
    text-align: justify;
}

.lh13, .lh-13 {
    line-height: 13px;
}

.lh15, .lh-15 {
    line-height: 15px;
}

.lh17, .lh-17 {
    line-height: 17px;
}

.lh18, .lh-18 {
    line-height: 18px;
}

.lh20, .lh-20 {
    line-height: 20px;
}

.lh22, .lh-22 {
    line-height: 22px;
}

.lh24, .lh-24 {
    line-height: 24px;
}

.lh25, .lh-25 {
    line-height: 25px;
}

.lh26, .lh-26 {
    line-height: 26px;
}

.lh30, .lh-30 {
    line-height: 30px;
}

.lh33, .lh-33 {
    line-height: 33px;
}

.lh35, .lh-35 {
    line-height: 35px;
}

.lh36, .lh-36 {
    line-height: 36px;
}

.lh40, .lh-40 {
    line-height: 40px;
}

.lh45, .lh-45 {
    line-height: 45px;
}

.colr-999 {
    color: #999;
}

.dibt {
    display: inline-block;
    *display: inline;
    vertical-align: top;
}

.dibm {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
}

.dibb {
    display: inline-block;
    *display: inline;
    vertical-align: bottom;
}

.lthrough {
    text-decoration: line-through;
}

.left {
    float: left;
}

.right {
    float: right;
}

.rightiportant {
    float: right !important;
}

.underline {
    text-decoration: underline;
}

.nounderline {
    text-decoration: none;
}

.inlineblock {
    display: inline-block;
    float: none;
}

.inline {
    display: inline;
}

.displayblock {
    display: block;
}

.displaynone {
    display: none;
}

.marginauto {
    margin-left: auto;
    margin-right: auto;
}

.initial {
    display: initial;
}

.valignmiddle {
    vertical-align: middle;
}

.valigntop {
    vertical-align: top;
}

.valignsub {
    vertical-align: sub;
}

.lineheightauto {
    line-height: normal;
}
.lineheight18 {
    line-height: 18px;
}
.lineheight22 {
    line-height: 22px
}

.lineheight24 {
    line-height: 24px
}

.pointer {
    cursor: pointer;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.borderbox {
    box-sizing: border-box;
}

.upper {
    text-transform: uppercase;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.w10pc {
    width: 10%;
}

.w20pc {
    width: 20%;
}

.w30pc {
    width: 30%;
}

.w33pc {
    width: 33.3333%;
}

.w40pc {
    width: 40%;
}

.w45pc {
    width: 45%;
}

.w50pc {
    width: 50%;
}

.w55pc {
    width: 55%;
}

.w60pc {
    width: 60%;
}
.w65pc {
    width: 65%;
}

.w70pc {
    width: 70%;
}

.w80pc {
    width: 80%;
}

.w85pc {
    width: 85%;
}

.w90pc {
    width: 90%;
}

.w98pc {
    width: 98%;
}

.w100pc {
    width: 100%;
}

.w550 {
    width: 550px;
}

.order1 {
    order: 1
}

.order2 {
    order: 2
}

.order3 {
    order: 3
}

.order4 {
    order: 4
}

.order5 {
    order: 5
}

.order6 {
    order: 6
}

.container {
    letter-spacing: 1px;
}

.content735 {
    width: 735px;
    margin: auto;
}

.content875 {
    width: 875px;
    margin: auto;
}

.content920 {
    width: 920px;
    margin: auto;
}

.content1030 {
    width: 1030px;
    margin: auto;
}

.overflowhidden {
    overflow: hidden;
}

.jc-spbw {
    justify-content: space-between;
}

/***************************/
/***********THEMES**********/
/***************************/
.textwhite {
    color: #fff;
}

.textblack {
    color: #000;
}

.textgrey {
    color: #333333;
}

.textmidgrey {
    color: #000;
}

.textlightgrey {
    color: #a6a6a6;
}

.textblue {
    color: #165f9a;
}

.textpink {
    color: #d9b9b1;
}

.textdarkpink {
    color: #c59285;
}

.light {
    font-weight: 100;
}

.regular {
    font-weight: 500;
}

.semibold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

.bg_white {
    background-color: #fff;
}

.bg_pink {
    background-color: #F3E4DD;
}

.bg_purple {
    background-color: #f1f2f7;
}

.bg_darkgrey {
    background-color: #4b4853;
}

.bg_grey {
    background-color: #e7e3e2;
}

.bg_grey_pink {
    background-color: #F9F7F7;
}

.bg_black {
    background-color: #000;
}

.border_darkgrey {
    border: 1px solid #979797
}

.border_grey {
    border: 1px solid #cccccc
}

.border_pink {
    border: 1px solid #d9b9b1
}

.border-b_grey {
    border-bottom: 1px solid #cccccc
}

.bt_grey {
    border-top: 1px solid #cccccc
}

.bb_grey {
    border-bottom: 1px solid #cccccc
}

.bb_black {
    border-bottom: 1px solid #000
}

.hoverdarkpink:hover {
    color: #c59285
}

/***************************/
/**********SPRITE**********/
/***************************/
.sprite {
    background-image: url('../images/ui/sprite.png');
    background-repeat: no-repeat;
}

.sprite.map {
    background-position: 0 0;
    background-size: 160px;
}

.sprite.paypal {
    background-position: -129px 2px;
    background-size: 300px;
}

.sprite.francais {
    background-position: -180px -34px;
    background-size: 238px;
}

.sprite.spain {
    background-position: -209px -34px;
    background-size: 238px;
}

.sprite.anglais {
    background-position: -147px -34px;
    background-size: 238px;
}

.sprite.russe {
    background-position: -116px -34px;
    background-size: 238px;
}

.sprite.chinois {
    background-position: -81px -34px;;
    background-size: 238px;
}

/***************************/
/**********LOADER***********/
/***************************/
.lds-ellipsis {
    width: 60px;
    height: 100%;
    position: relative;
    margin: auto;
    top: 50%;
}

.lds-ellipsis div {
    position: absolute;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 6px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 6px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 26px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 45px;
    animation: lds-ellipsis3 0.6s infinite;
}

.waiting {
    position: relative;
}

.waiting::before {
    content: ' ';
    background-color: rgba(255, 255, 255, .8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    z-index: 10;
}

.waiting .lds-ellipsis {
    position: absolute;
    top: 50%;
    left: calc(50% - 30px);
    z-index: 11;
}

.cta-transparent .lds-ellipsis div {
    background: #000;
}

.waiting .lds-ellipsis div {
    background: #000;
}

/* Box recapitulative */
.lds-ellipsis {
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -30px;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(19px, 0);
    }
}

.cta-submit:not(.active) .lds-ellipsis {
    display: none;
}

.cta-submit.active {
    font-size: 0;
    opacity: 0.7;
    cursor: auto;
}

/***************************/
/*******INPUT CHECK*********/
/***************************/
.inputcheck {
    width: 15px;
    height: 15px;
    border: 1px solid #E0E0E0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    cursor: pointer;
    margin-bottom: 2px;
    box-sizing: border-box;
}

.inputcheck.active {
    border: 1px solid #333333;
    background-color: #333333;
    text-align: left;
}

.inputcheck.active .arrow {
    border-width: 0 2px 2px 0;
    border-color: #f9f1ef;
    margin-left: 4px;
    margin-top: 1px;
    vertical-align: top;
    padding: 1px 2px 6px 1px;
}

.txtcheck {
    max-width: 90%;
}

/******************************************************/
/* FORMS */
/******************************************************/
.f_el input[type="text"],
.f_el input[type="email"],
.f_el input[type="tel"],
.f_el input[type="password"],
.f_el input[type="number"] {
    width: 100%;
    padding: 0 0 0 20px;
    height: 40px;
    background-color: #fff;
    font-size: 12px;
    display: block;
    float: none;
    letter-spacing: 1.5px;
    border: 1px solid #cfcfcf;
    box-sizing: border-box;
}

.f_el textarea {
    width: 100%;
    padding: 15px 20px;
    height: 40px;
    background-color: #fff;
    font-size: 12px;
    display: block;
    float: none;
    letter-spacing: 1.5px;
    border: 1px solid #cfcfcf;
    box-sizing: border-box;
}

.f_el h2, .f_el h3 {
    letter-spacing: 1.5px;
    font-weight: 700;
    font-size: 16px;
}

.f_el h3 {
    font-size: 14px;
}

.f_el label,
.f_el a:not([class^="cta-"]) {
    font-size: 11px;
    color: #4b4853;
    letter-spacing: 1px;
    line-height: 15px;
    font-weight: 100;
    display: block;
}

.f_el label {
    margin-bottom: 10px;
}

.f_el label span.information {
    float: right;
    color: #868686;
    font-weight: 500;
}

.f_el label.civility {
    float: left;
    margin-right: 60px;
    margin-top: 3px;
}

.f_el label.civility.not-mt {
    margin-top: 0;
}

.f_el a:not([class^="cta-"]) {
    text-decoration: underline;
}

.f_el input[type="password"] {
    position: relative;
}

.f_el .viewpassword {
    position: relative;
}

.f_el .viewpassword::after {
    content: 'Afficher';
    position: absolute;
    top: calc(50% - 6px);
    right: 20px;
    display: block;
    text-decoration: underline;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
}

.f_el .viewpassword.showed::after {
    content: 'Masquer';
}

.f_el p.securitypass {
    position: absolute;
    bottom: -38px;
    left: 0;
    font-size: 10px;
    font-weight: bold;
    color: #000;
}

.f_el.invalid input {
    border-color: #D0021B;
}

.f_el .formvalidator_error {
    color: #D0021B;
    margin: 5px 0;
}

#f_payment_cgv.invalid .inputcheck {
    border-color: #D0021B;
}

#f_payment_cgv.invalid .txtcheck {
    color: #D0021B;
    font-weight: bold !important;
}

/***************************/
/*******INPUT RADIO*********/
/***************************/
.radiorounded {
    position: relative;
    float: left;
    margin-right: 10px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border: solid 1px #dedede;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
}

.radiorounded input[type=radio] {
    visibility: hidden;
    width: 15px;
    height: 15px;
    padding: 0;
    margin: 0;
}

.radiorounded input[type=checkbox] {
    visibility: hidden;
    width: 15px;
    height: 15px;
    padding: 0;
    margin: 0;
}

.radiorounded label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.radiorounded label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    left: 0px;
    top: 0px;
    background-color: #d9b9b1;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: 2px solid #fff;
}

.radiorounded:hover {
    border: solid 1px #d9b9b1;
}

.inactive .radiorounded:hover {
    border: solid 1px #dedede;
}

.inactive .radiorounded label:hover::after {
    border: solid 1px #dedede;
}

.radiorounded input[type=radio]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.radiorounded input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.row .invalid .radiorounded {
    border: 1px solid #fc2727;
}

/******************************************************/
/* CTAS */
/******************************************************/
.cta-grey {
    background-color: #000;
    color: #fff;
}

.cta-pink {
    background-color: #E2C2BA;
    color: #fff;
}

.cta-pink2 {
    background-color: #F3E3DD;
    color: #4b4853;
    border: 1px solid #c9c7ce;
    box-sizing: border-box;
}

.cta-transparent {
    background-color: transparent;
    color: #000;
    border: 1px solid #e5e5e5;
}

.cta-transparent-grey {
    background-color: transparent;
    color: #9C9C9C;
    border: 1px solid #9C9C9C;
}

.cta-transparent-grey:hover {
    background-color: #9C9C9C;
    color: #fff;
    border: 1px solid #fff;
}

a[class^="cta-"],
div[class^="cta-"] {
    text-align: center;
    padding: 10px;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 500;
    height: 45px;
    box-sizing: border-box;
    line-height: 25px;
    cursor: pointer;
    position: relative;
    transition: 0.2s;
}

a[class^="cta-"]:hover,
div[class^="cta-"]:hover,
a.cta:hover {
    opacity: 0.7;
}

/***************************************/
/*          PARAMETRES GAMMES          */
/***************************************/
.bgGamme.em {background-color: #f1f2f7;}
.txt.em {color: #0032A0;}

.bgGamme.ro {background-color: #ffdfec;}
.txt.ro {color: #D00070;}

.txt.prog-demaquillage{color: #D00070;}

.txt.prog-hydratation{color: #0032A0;}

.bgGamme.ra {background-color: #fcecff;}
.txt.ra {color: #87189D;}

.bgGamme.ma {background-color: #e5fff5;}
.txt.ma {color: #00AF66;}

.bgGamme.rm {background-color: #f8ffeb;}

.txt.rm {color: #67823A;}

.bgGamme.ah {background-color: #fff7e0;}
.txt.ah {color: #A78C64;}

.bgGamme.mu {background-color: #ffdde9;}
.txt.mu {color: #AC145A;}

.bgGamme.hu {background-color: #F5E0CF;}
.txt.hu {color: #EB586B;}

.bgGamme.ab {background-color: #ffede1;}
.txt.ab {color: #FF8A3D;}

.bgGamme.va {background-color: #F1EECA;}
.txt.va {color: #85431E;}

.bgGamme.pa {background-color: #fde5de;}
.txt.pa {color: #FFA38B;}

.bgGamme.pc {background-color: #fff;}
.txt.pc {color: #001C2B;}

.bgGamme.bu {background-color: #ffb66a;}

.bgGamme.go {background-color: #ffede1;}


.bgGamme.ho {background-color: #F3E3DD;}
.txt.ho {color: #FC5560;}


/*****************************/
/*          GENERAL          */
/*****************************/

.h2_item {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.titleinfoliv {
    font-family: 'PlayfairDisplay';
    width: 45%;
    padding: 15px 8px;
    margin: auto;
}

.theme_title {
    font-size: 32px;
    line-height: 37px;
    letter-spacing: 1px;
    font-family: 'PlayfairDisplay';
    margin-bottom: 25px;
    text-align: center;
    font-weight: 500;
}

.theme_title.wline:before,
.theme_title.wline:after {
    content: '';
    width: 40px;
    height: 1.2px;
    background-color: #000;
    display: inline-block;
    vertical-align: middle;
}

.theme_title.wline:before {
    margin-right: 20px;
}

.theme_title.wline:after {
    margin-left: 20px;
}

.textwithborder {
    font-family: 'PlayfairDisplay';
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #000;
    position: relative;
    line-height: 20px;
    letter-spacing: 1px;
}

.textwithborder:before {
    content: ' ';
    border-top: 1px solid #4b4853;
    position: relative;
    top: 12px;
    display: block;
    width: 100%;
    height: 1px;
    background: none !important;
}

.textwithborder em {
    text-decoration: none;
    font-style: normal;
    display: inline-block;
    position: relative;
    padding: 0 7px;
}

.soulignleft:after {
    content: '';
    width: 55px;
    height: 1px;
    background-color: #000;
    display: block;
    margin-top: 15px;
}

.soulignleft.pink:after {
    height: 3px;
    width: 80px;
    background-color: #F1D3CB;
}

.pastille {
    font-size: 9px;
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    border: 1px solid;
}

.pastille.pink {
    background-color: #d9b9b1;
    border-color: #d9b9b1;
    color: #fff;
}

.addtofav.active p {
    color: #E2C2BA;
}

.addtofav p:active .like {
    font-size: 10px;
    transition: 0.2s;
}

.go-up {
    width: 45px;
    height: 45px;
    line-height: 44px;
    text-align: center;
    color: #000;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(0, 0, 0, 0.4);
    margin-bottom: 25px;
    cursor: pointer;
    position: fixed;
    bottom: 0;
    right: 10px;
    z-index: 100;
    display: block;
}

/***************+++*************/
/*          DOOFINDER          */
/***************+++*************/
#doofindercontainer .df-classic {
    height: auto !important;
    min-height: inherit !important;
    max-height: 485px !important;
    font-size: 13px !important;
    color: #3d3c3c !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: static !important;
    width: 100% !important;
}

#doofindercontainer .df-classic .df-header {
    height: auto !important;
    border: none !important;
}

#doofindercontainer .df-classic .df-header .closedoofinder {
    position: absolute;
    right: 10px;
    top: 5px;
}

#doofindercontainer .df-classic .df-header span[data-role="total"] {
    color: #000 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.75px;
    margin: 20px auto 0;
}

#doofindercontainer .df-classic .df-results ul {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

#doofindercontainer .df-classic .df-results li {
    border-top: 1px solid #f2f2f2;
}

#doofindercontainer .df-classic .df-results li:first-child,
#doofindercontainer .df-classic .df-results li:last-child {
    border-top: 0;
}

#doofindercontainer .df-classic .df-results li a {
    width: 100% !important;
    display: block;
}

#doofindercontainer .df-classic .df-results li a:not(.arrowlink) {
    padding-left: 0;
    padding-right: 0;
}

#doofindercontainer .df-classic .df-results li .packshot {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
}

.df-classic[data-layout="grid"] [data-role="placeholder"] {
    border: 0;
}

#doofindercontainer .df-classic .df-results li .packshot img {
    width: 100%;
}

#doofindercontainer .df-classic .df-results li .description {
    display: inline-block;
    width: 75%;
    vertical-align: middle;
    margin-left: 5%;
}

#doofindercontainer .df-classic .df-results li .description p.gamme .drapeau {
    width: 30px;
    height: 20px;
    display: inline-block;
    vertical-align: top;
}

#doofindercontainer .df-classic .df-results li a.arrowlink {
    color: #fff;
    width: 70% !important;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
}

#doofindercontainer .df-classic .df-results li a.arrowlink .fa {
    font-weight: bold;
    margin-right: 7.50px;
}

#doofindercontainer .commerce {
    color: #a0a0a0;
    font-size: 17px;
    margin-top: 10px;
}

#doofindercontainer .title {
    font-size: 17px;
    font-family: 'AmericanTypewriter';
    margin-top: 10px;
    line-height: 15px;
    text-transform: capitalize;
}

#doofindercontainer .gamme {
    color: #a0a0a0;
    font-size: 12px;
}

/****************************/
/*          HEADER          */
/****************************/
.bandeau_delivery .bx-wrapper,
.bandeau_delivery .bx-viewport {
    width: 300px;
    margin: auto;
}

.bandeau_delivery .bx-wrapper {
    padding: 10px 0;
}

.bandeau_delivery .bx-wrapper .bx-controls-direction a {
    text-indent: 0;
    width: auto;
    height: auto;
    top: 10px;
    margin-top: 0;
}

.bandeau_delivery .bx-wrapper .bx-controls-direction .bx-prev {
    left: 0;
}

.bandeau_delivery .bx-wrapper .bx-controls-direction .bx-next {
    right: 0;
}

header {
    height: 194px;
    position: relative;
}

header .bottom {
    top: -100vh;
    transition: 0.5s;
}

header .bottom.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10;
    background-color: white;
    border-bottom: 1px solid #cccccc;
}

header .topnav {
    background-color: #000;
    padding: 8px 35px;
}

header .topnav .section p span,
header .topnav .section div span {
    padding-right: 5px;
    font-size: 16px;
    vertical-align: sub;
    font-weight: 600;
}

header .topnav .section p span.icon-marque {
    font-weight: 100;
}

header .topnav .section .search {
    width: 25px;
    text-align: center;
}

header .topnav .section .close-thin {
    font-size: 29px;
    line-height: 10px;
    font-weight: 100;
}

header .topnav .section .textwhite:not(.search):hover {
    opacity: 0.7;
}

header .bottom .logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 150px;
}

header .meganav .main {
    justify-content: center;
}

header .meganav .main .mainElement {
    padding: 0 30px;
    height: 35px;
}

header .meganav .main .mainElement:first-child {
    padding: 0 30px 0 0;
}

header .meganav .main .categorie a {
    padding-bottom: 16px;
    display: block;
}

header .meganav .souscategorie {
    display: none;
    background-color: white;
    width: 100%;
    left: 0;
    top: 32px;
    border-top: 1px solid #cccccc;
    z-index: 3;
}

header .meganav .souscateg_content {
    width: 980px;
    margin: auto;
    padding: 25px 0;
}

header .meganav .souscateg_content ul {
    margin-left: 80px;
}

header .meganav .souscateg_content ul:nth-child(2) {
    margin-left: 0;
}

header .meganav .souscateg_content li:not(.titre_souscateg) {
    color: #4b4853;
    font-size: 14px;
    letter-spacing: 0.5px;
    font-weight: 100;
}

header .meganav .souscateg_content .visuel img {
    width: 255px;
}

header .meganav .souscategorie .link_all {
    padding: 10px 0;
    border-top: 1px solid #cccccc;
    letter-spacing: 0.5px;
}

header .meganav .souscategorie .link_all .fleche {
    font-size: 10px;
}

header .meganav .souscategorie .link_all .fleche {
    font-size: 10px;
}

header .openSearch:focus #f_search {
    display: block;
}

header #f_search {
    background-color: #fff;
    position: absolute;
    right: 35px;
    top: 76px;
    width: 530px;
    border: 1px solid #cccccc;
    padding: 40px;
    box-sizing: border-box;
    z-index: 1;
    font-size: 0;
    text-align: left;
    box-shadow: 0 1px 3px #d8d8d8;
    visibility: hidden;
    transition: 0.5s;
    opacity: 0;
}

header #f_search.active {
    opacity: 1;
    visibility: visible;
}

header #f_search input {
    border: 1px solid #cccccc;
    width: 90%;
    border-right: 0;
    padding: 0 20px;
}

header #f_search input,
header #f_search .fa-search {
    height: 45px;
    vertical-align: top;
    box-sizing: border-box;
}

header #f_search .fa-search {
    background-color: #000;
    color: #fff;
    width: 43px;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    cursor: pointer;
}

/****************************/
/*          FOOTER          */
/****************************/
footer {
    z-index: 1;
    position: relative;
}

footer .informations {
    justify-content: space-between;
    flex-wrap: wrap;
}

footer .informations .logo img {
    width: 150px;
}

footer .informations li {
    font-size: 13px;
    letter-spacing: 1px;
}

footer .informations li a:hover {
    text-decoration: underline;
}

footer .informations .title {
    text-transform: uppercase;
    font-weight: 600;
    line-height: 15px;
}

footer .informations ul .title {
    margin-top: 25px;
}

footer .informations li:not(.title) {
    font-family: 'PlayfairDisplay', sans-serif;
}

footer .informations li .map {
    width: 60px;
    height: 60px;
}

footer .newsletter {
    width: 275px;
    border: 1px solid #000;
}

footer .newsletter .description {
    line-height: 15px;
}

footer .newsletter .f_news input[name="email"] {
    border: 0;
    border-bottom: 1px solid #a8a8a8;
    font-style: italic;
    letter-spacing: 0.5px;
    background-color: transparent;
    padding-left: 0;
    height: unset;
    padding-bottom: 5px;
    width: 90%;
    font-family: 'PlayfairDisplay';
    font-size: 13px;
}

footer .newsletter .f_news .icon-arrow_line {
    right: 30px;
    top: 5px;
}

footer .paiement {
    justify-content: center;
    border-bottom: 1px solid #d0cfcf;
}

footer .paiement p {
    justify-content: center;
}

footer .legal {
    justify-content: center;
    border-bottom: 1px solid #d0cfcf;
}

.social {
    justify-content: center;
}

.social .icon:before {
    color: #000;
}

.social a {
    font-size: 25px;
    border-left: 1px solid #d0cfcf;
    padding: 10px;
    display: block;
}

.social a:last-child {
    border-right: 1px solid #d0cfcf;
}

.btndistributeur {
    border: 1px solid #000;
    padding: 10px 20px;
    display: block;
}

.btndistributeur:hover {
    border: 1px solid #000;
    background-color: #000;
}

.btndistributeur:hover a {
    color: #fff;
}

.blockcountries {
    width: 275px;
    margin-right: 46px;
    margin-top: 15px;
}
.blockcountries a{
    display: block;
}

.blockcountries .flag {
    width: 20px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.map-li{
    display: flex;
    flex-direction: column;
}

.footer-map{
    width: 110px;
    margin-top: 20px;
}

/******************************/
/*          HOMEPAGE          */
/******************************/


/*************************************************************/
/*          SLIDER HOMEPAGE PRINCIPAL + SLIDER TEXTE         */
/************************************************************/
.homepage .main-slider-container {
    height: 590px;
    display: block;
    position: relative;
    margin-bottom: -1px;
}


.homepage .slider-image-container,
.homepage .slider-image-container div {
    height: 100%;
}
.homepage .slider-image{
    width: 750px;
    margin-left: calc(19vw + 500px);
    position: relative;
}
.homepage .slider-image-container {
    overflow: hidden;
}
.homepage .slider-image-container .owl-stage-outer{
    overflow: visible;
}
.homepage .slider-image-container .owl-stage {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.homepage .slider-image-container .owl-item {
    width: 750px!important;
    float: none;
}

.homepage .slider-image img {
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
}

.homepage .slider-text-container {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    align-items: center;
    background-color: #fff;
    width: 500px;
    position: absolute;
    top: 0;
    /*left: 180px;*/
    z-index: 2;
    margin-left: 19vw;
    height: 100%;
    user-select: none;
}

.homepage .slider-text {
    height: 100%;
    position: relative;
}

.homepage .slider-text-content {
    padding: 60px;
}

.homepage .slider-text-title {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    text-transform: uppercase;
}

.homepage .slider-text-desc {
    font-weight: 400;
    margin: 30px 0;
    font-size: 18px;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 320px;
}


@media screen and (max-width: 768px) {
    .homepage .main-slider-container {
        height: unset;
        padding: 2.5% 2.5% 0;
    }

    .homepage .main-slider-container .slider-text-container {
        width: 100%;
        position: static;
        margin: 0
    }

    .homepage .slider-image-container .owl-stage {
        margin-left: 0;
    }

    .homepage .slider-text-content {
        padding: 30px;
        text-align: center;
    }

    .homepage .slider-text-title {
        font-size: 5vw;
    }

    .homepage .slider-text-desc {
        font-size: 3.5vw;
        line-height: 6vw;
        margin: 10px 0 30px;
    }

    .homepage .slider-text-content .cta-grey {
        width: 80%;
        margin: 0 auto;
        display: block;
    }
}

/*************************************************************/
/*          OWL SURCHARGE SLIDER PRINCIPAL HOMEPAGE         */
/************************************************************/
.homepage .owl-theme .owl-dots {
    text-align: left;
    padding-left: 60px;
    position: absolute;
    bottom: 0;
}

.homepage .owl-theme .owl-dots .owl-dot {
    outline: none;
}

.homepage .owl-theme .owl-dots .owl-dot.active span, .homepage .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #F3E4DD;
}

.homepage .owl-theme .owl-dots .owl-dot span {
    background-color: #000;
}

.homepage .owl-theme .owl-dots .owl-dot span {
    width: 6px;
    height: 6px;
}

.homepage .owl-carousel .owl-nav button.owl-prev {
    display: none;
}

.homepage .owl-carousel .owl-nav button.owl-next {
    background: #fff;
    border: 1px solid rgba(217, 185, 177, 1);
    border-radius: 50%;
    color: rgba(217, 185, 177, 1);
    cursor: pointer;
    font-size: 1rem;
    height: 2.8em;
    line-height: 1;
    outline: none;
    padding: 0.9em;
    position: absolute;
    top: 50%;
    left: 40vw;
    width: 2.8em;
    -webkit-transition: background .3s, color .3s;
    transition: 0.2s;
}
.homepage .owl-carousel .owl-nav button.owl-next:hover {
    background: rgba(217, 185, 177, 1);
    color: #fff;
}

.homepage .owl-carousel .owl-nav button.owl-next span {
    font-size: 26px;
    line-height: 9px;
}

@media screen and (max-width: 768px) {
    .homepage .owl-theme .owl-nav.disabled + .owl-dots {
        width: 100%;
        padding: 0;
        text-align: center;
    }
}
/******************************/
/*        END SLIDER          */
/******************************/

.homepage .slider_hp .text {
    text-align: center;
    font-family: 'AmericanTypewriter';
    padding: 330px 0 70px;
    font-size: 40px;
    font-weight: 100;
    line-height: 50px;
}

.homepage .slider_hp img {
    margin-left: auto;
    margin-right: auto;
}

.homepage .main_slider {
    margin-top: 1px;
}

.homepage .main_slider .bx-wrapper .bx-pager,
.homepage .main_slider .bx-wrapper .bx-controls-auto {
    bottom: 10px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    padding-top: 3px;
    box-sizing: border-box;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background-color: rgba(0, 0, 0, 0.4);
}

.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a {
    width: 15px;
    height: 15px;
}

.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a,
.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a:hover,
.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a.active,
.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background-color: rgba(255, 255, 255, 0.5);
}

.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a .round,
.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a .round,
.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a .round {
    opacity: 0;
}

.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a:hover .round,
.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a.active .round,
.homepage .main_slider .bx-wrapper .bx-pager.bx-default-pager a:focus .round {
    background-color: #fff;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
    margin: auto;
    opacity: 1;
}

.homepage .main_slider .bx-wrapper {
    margin-bottom: 0;
}

.bandeau_presentation {
    background-color: #fdfaf8;
}

.bandeau_presentation .text {
    font-size: 17px;
    line-height: 20px;
    width: 830px;
    margin: auto;
    letter-spacing: 0.5px;
    font-weight: 100;
}

.allProducts .sliderNav {
    justify-content: space-between;
    width: 600px;
    margin: auto;
}

.allProducts .sliderNav p {
    font-size: 17px;
    letter-spacing: 1px;
    font-family: 'PlayfairDisplay';
    cursor: pointer;
}

.allProducts .sliderNav p.active {
    font-weight: 900;
    padding-bottom: 10px;
}

.allProducts .soulignonglet {
    content: '';
    width: 80px;
    height: 1px;
    background-color: #000;
    display: block;
    margin-top: 5px;
    position: relative;
    transition: 0.5s;
    left: 310px;
}
body.en_EN .allProducts .soulignonglet {
    left: 290px;
}

.allProducts .content_slider_product {
    display: none;
}

.allProducts .content_slider_product[rel="1"] {
    display: block;
}
.allProducts .product {
    width: 250px!important;
}

.homepage .owl-carousel.slider_elements {
    cursor: pointer;
}

.homepage .owl-carousel.slider_elements .owl-item img {
    margin-left: auto;
    margin-right: auto;
}

.bloc_elements .head {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 120px;
}

.bloc_elements .box_element {
    display: none;
}

.bloc_elements .box_element .visuel1 {
    margin-left: -61px;
}

.bloc_elements .box_element .soulignement:after {
    width: 100px;
}

.bloc_elements .box_element .droite {
    margin-top: 53px;
}

.bloc_elements .box_element .droite .bloc3 p {
    top: 40px;
    left: 100px;
}

.bloc_elements .box_element.ra .nom {
    color: #6e3386;
}

.bloc_elements .box_element.em .nom {
    color: #519dc5;
}

.bloc_elements .box_element.ma .nom {
    color: #239F76;
}

.bloc_elements .box_element.ab .nom {
    color: #E9632C;
}

.bloc_elements .box_element.mu .nom {
    color: #A74992;
}

.bloc_elements .box_element.ah .nom {
    color: #AB872A;
}

.bloc_elements .box_element.rm .nom {
    color: #7C9847;
}

.bloc_elements .box_element.ro .nom {
    color: #DF2667;
}

.bloc_elements .box_element.pa .nom {
    color: #F2A08E;
}

.bloc_elements .box_element.hu .nom {
    color: #EA5D6D;
}

.bloc_elements .box_element.va .nom {
    color: #8B3B1C;
}

.bloc_elements .box_element.pc .nom {
    color: #000;
}


.homepage .beautyathome .content920 {
    overflow: hidden;
}

.homepage .beautyathome .bloc {
    height: 295px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.homepage .beautyathome .bloc .visuel {
    background: url(/medias/homepage/beautyathome.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

.homepage .beautyathome .bloc:hover .visuel {
    transform: scale(1.1);
}

.soulignement:after {
    content: '';
    width: 55px;
    height: 1px;
    background-color: #fff;
    display: block;
    margin: 7px auto 0;
    transition: 0.1s;
}

.soulignement.black:after {
    background-color: #000;
}

.soulignement.pink:after {
    background-color: #F1D3CB;
}

.nouvel_imaginaire .philosophie {
    width: 350px;
    height: 558px;
}

.nouvel_imaginaire .philosophie .visuel {
    background: url(/medias/homepage/philosophie.jpg) no-repeat;
    background-size: cover;
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

.nouvel_imaginaire .philosophie:hover .visuel {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.nouvel_imaginaire .carre li {
    width: 250px;
}

.nouvel_imaginaire .content_philosophie {
    width: 350px;
    height: 558px;
}

.nouvel_imaginaire .philosophie a {
    width: 100%;
    height: 100%;
    flex-direction: column;
}

.nouvel_imaginaire .philosophie .txt_philo {
    margin-top: 370px;
    opacity: 0.6;
}

.nouvel_imaginaire .transparence {
    align-self: flex-end;
}

.nouvel_imaginaire .transparence img {
    margin: auto;
    display: block;
}

.nouvel_imaginaire .transparence .knowmore:after {
    background-color: #000;
}

.excellence .visuel {
    background: url(/medias/homepage/excellence.jpg) no-repeat;
    background-size: 100%;
    background-position: center;
}

.excellence .visuel .textblock {
    background-color: #fff;
    width: 315px;
    margin: auto;
    padding: 25px 40px;
    line-height: 20px;
}

.chic_blog .article {
    width: 48%;
}

.chic_blog .article img {
    width: 240px;
    height: 200px;
    object-fit: cover;
}

.chic_blog .article .name {
    padding: 12px 22px;
}

.chic_blog .article:nth-child(1) .name,
.chic_blog .article:nth-child(2) .name {
    top: 20px;
    left: 150px;
}

.chic_blog .article:nth-child(3) .name,
.chic_blog .article:nth-child(4) .name {
    top: 20px;
    right: 150px;
}

.chic_blog .article .text {
    line-height: 16px;
    padding: 0 5px 0 15px;
    height: 100px;
    margin-top: 120px;
}

.chic_blog .flexbox {
    flex-wrap: wrap;
}

.club_ambassadeur .bloc {
    height: 295px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.club_ambassadeur .bloc .visuel {
    background: url(/medias/homepage/club_ambassadeur.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
}

.club_ambassadeur .bloc:hover .visuel {
    transform: scale(1.1);
}

.club_ambassadeur .main {
    text-shadow: 2px 2px 6px #a88171;
}

.product {
    width: 250px;
    text-align: center;
    list-style: none;
    letter-spacing: 0.5px;
    position: relative;
}

.product .soulignement:after {
    background-color: #000;
}

.product .gamme {
    font-size: 14px;
    font-weight: 100;
    text-transform: uppercase;
}

.product .nom {
    font-size: 17px;
    font-family: 'AmericanTypewriter';
    height: 35px;
}

.product .prix {
    font-size: 16px;
    font-weight: 100;
}

.product .description {
    font-size: 15px;
}

.product .gamme,
.product .prix {
    color: #9c9c9c;
}

.product .visuel,
.product .visuelhover {
    margin: auto;
    max-height: 220px;
}

.product .visuelhover {
    opacity: 0;
    transition: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.product .decouvrir {
    font-size: 15px;
    font-weight: 100;
    letter-spacing: 0.5px;
}

.allProducts .bx-wrapper {
    margin: auto;
}

.allProducts .bx-wrapper .bx-controls-direction a {
    text-indent: 0;
    width: auto;
    height: auto;
    top: 40%;
    margin-top: 0;
    font-size: 32px;
    z-index: 1;
}

.allProducts .bx-wrapper .bx-controls-direction .bx-prev {
    left: -30px;
}

.allProducts .bx-viewport {
    height: auto !important;
    padding-bottom: 20px;
}

.allProducts .bx-wrapper .bx-controls-direction .bx-next {
    right: -30px;
}

.nouvel_imaginaire .carre {
    width: 540px;
}

.nouvel_imaginaire .carre li img {
    transition: transform .5s;
}

.nouvel_imaginaire .carre li img:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.nouvel_imaginaire .carre li {
    width: 250px;
}

.instafeed ul {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    flex-wrap: wrap;
}

.instafeed li {
    width: 16.666%;
    height: 16.666vw;
    box-sizing: border-box;
}

.instafeed li img {
    height: 100%;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    transition: 0.2s;
    box-sizing: border-box;
}

.instafeed li:hover img {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
}

.instafeed li:hover {
    border: 5px solid #fff;
}

.reseaux_sociaux .theme_title a:hover {
    color: #d9b9b1;
}

/*************************************/
/*          PAGE CONNECTION          */
/*************************************/
.register .content_register {
    background: url(/medias/account/bg_register.jpg) no-repeat;
    background-position: left;
    background-size: auto 100%;
}

.register .bloc_formulaires {
    width: 625px;
}

.register .head .connexion span {
    border-right: 2px solid #000;
}

.register p.connexion.active,
.register p.inscription.active {
    font-weight: 900;
}

.register p.connexion.active:after,
.register p.inscription.active:after {
    content: '';
    width: 100px;
    height: 1px;
    background-color: #000;
    display: block;
    margin: 10px auto 0;
}

.content_create {
    padding: 0 13%;
}

.content_login {
    padding: 0 25%;
}

/***********************************/
/*          COMPTE CLIENT          */
/***********************************/
.dashboard_g,
.dashboard {
    width: 200px;
}

.account_left {
    width: 720px;
}

.points_count {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #333333;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-family: 'PlayfairDisplay';
    line-height: 41px;
    letter-spacing: 1px;
}

.account .dashboard li {
    padding: 3px 0 3px 10px;
}

.account .dashboard li.active {
    border-left: 1px solid #000;
}

.account_left {
    width: 670px;
    min-height: 300px;
}

.line_order {
    border: 1px solid #e5e5e5;
}

.line_order.encours .statut {
    color: #c59286;
}

.line_order .statut.received {
    color: #089433;
}

.encart_fidelite {
    background: url(/medias/account/programme_fidelite.jpg) no-repeat;
    background-position: center;
    background-size: cover;
}

.account .all_points {
    justify-content: space-between;
}

.account .all_points .carre {
    width: 215px;
}

.account .all_points .carre img {
    width: 100%;
    transition: transform .7s;
}

.account .all_points .carre .description {
    background-color: #333333;
    height: 185px;
    line-height: 17px;
    letter-spacing: 1.3px;
}

.account .all_points .carre .points_count {
    top: 100px;
    right: 10px;
}

.account .question .reponse.displaynone {
    transition: 0.5s;
}

.account .notauthentified .programme .textblock {
    max-width: 440px;
    max-height: 432px;
}

.account .notauthentified .programme .textblock .cta {
    font-size: 13px;
}

.account .notauthentified .all_points .carre {
    width: 235px;
}

.account .history .detailsOrder {
    background-color: #F9F9F9;
    padding: 45px 35px;
    box-sizing: border-box;
    display: none;
}

.account .history .detailsOrder .titre {
    font-family: 'AmericanTypewriter';
    font-size: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid #DCDCDC;
    letter-spacing: 0.5px;
}

.account .history .detailsOrder ul {
    font-size: 0;
    letter-spacing: 0;
}

.account .history .detailsOrder li {
    width: 25%;
    display: inline-block;
    padding: 0 5px;
    margin-top: 20px;
    box-sizing: border-box;
    vertical-align: top;
}

.account .history .detailsOrder li img {
    width: 100%;
}

.account .history .detailsOrder li p {
    font-family: "AmericanTypewriter";
    font-size: 12px;
    text-align: center;
    line-height: 18px;
    margin-top: 10px;
}

.account .history .detailsOrder li p span {
    font-family: "GillSans";
    font-size: 13px;
    color: #9C9C9C;
}

.account .history .detailsOrder .icon-paypal {
    font-size: 20px;
    margin-left: -10px;
}

/****************************/
/*          TUNNEL          */
/****************************/
.form_zeroeuro{
    border: 1px solid #000;
    width: 680px;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 60px;
}
.form_zeroeuro > *:not(h1){
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}
.formtitle{
    display: block;
    width: 100%;
    font-size: 20px;
    text-align: center;
    margin-bottom: 20px;
}
.form_zeroeuro .icon-panier{
    font-size: 40px;
    margin-right: 30px;
}
.form_zeroeuro input[type="text"]{
    border: 1px solid #999999;
    padding: 7px 15px;
}
.form_zeroeuro a{
    width: 50px;
    height: 40px;
    line-height: 20px;
}
.form_zeroeuro .f_el .formvalidator_error{
    font-size: 11px;
    position:absolute;
}
#basket_payment .form_zeroeuro{
    margin-top: 30px;
}
#basket_payment .form_zeroeuro input[type="text"]{
    width: 360px;
}
.basket_steps {
    font-family: 'PlayfairDisplay';
}

.basket_steps .step_number {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #d9b9b1;
    color: #f9f1ef;
    font-size: 15px;
    text-align: center;
}

.basket_steps .step.active .step_number {
    background-color: #4b4853;
    color: #fff;
}

.basket_steps .step p {
    color: #c59285;
    font-size: 15px;
    letter-spacing: 1px;
    margin-left: 5px;
}

.basket_steps .step.active p {
    color: #4b4853;
}

.basket_g {
    width: 880px;
}

.basket_d,
.basket_recap {
    width: 310px;
}

.basket_recap .line img {
    max-width: 80px;
}

.basket_recap .line .textblock {
    width: calc(100% - 90px);
}

.boxfidelite {
    width: 265px;
    margin: 10px auto 0;
}

.f_fidelity input {
    width: 170px !important;
    display: inline-block !important;
    height: 45px !important;
}

.f_fidelity .addVoucher {
    width: 90px;
}

.product_line {
    align-items: center;
}

.product_line .visuel_produit {
    max-width: 80px;
    max-height: 60px;
}

.changeQty {
    width: 125px;
    padding: 11px 20px;
    box-sizing: border-box;
    text-align: center;
}

.changeQty input {
    width: 40px;
}

.f_voucher input {
    width: 220px !important;
    height: 45px !important;
    margin-right: 10px;
}

.f_voucher .addVoucher {
    padding: 7px 0;
}

.onglets .onglet.paypal .sprite {
    width: 125px;
    height: 30px;
    display: block;
}

.onglets .onglet {
    width: 310px;
    border-radius: 5px;
}

.onglets .onglet.active {
    border-color: #d9b9b1;
}

.paypal-button.paypal-button-color-gold {
    background: transparent;
    text-indent: -999999px;
}

.livraison .infos {
    font-weight: 600;
    font-style: italic;
    margin-top: 1px;
    font-size: 13px;
}

.listpoints {
    max-height: 275px;
    overflow-y: scroll;
}

#f_payment_carrier .formvalidator_error {
    position: absolute;
    top: 3px;
    right: 0;
}

.form-container .field-container:first-of-type {
    grid-area: name;
}

.form-container .field-container:nth-of-type(2) {
    grid-area: number;
}

.form-container .field-container:nth-of-type(3) {
    grid-area: expiration;
}

.form-container .field-container:nth-of-type(4) {
    grid-area: security;
}

.field-container input {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.field-container {
    position: relative;
}

.form-container {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 90px 90px 90px;
    grid-template-areas: "name name" "number number" "expiration security";
    max-width: 400px;
    width: 45%;
    padding: 20px;
    color: #707070;
}

.content_card label {
    padding-bottom: 5px;
    font-size: 12px;
}

.content_card input {
    margin-top: 3px;
    padding: 15px;
    font-size: 16px;
    width: 100%;
    border-radius: 3px;
    border: 1px solid #dcdcdc;
}
.content_paypal .infopaypalstep1 img{
    margin: 40px auto 40px;
    display: block;
    width: 250px;
}
.content_paypal .transmissionpart img{
    margin: 40px auto 0;
    display: block;
    width: 290px;
}
.content_paypal .transmissionpart p{
    letter-spacing: 1.5px;
}

.ccicon {
    height: 38px;
    position: absolute;
    right: 1px;
    top: calc(50% - 14px);
    width: 60px;
}

/* CREDIT CARD IMAGE STYLING */
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

.content_card .container {
    margin-top: 30px;
    margin-right: 25px;
    width: 45%;
    max-width: 400px;
    max-height: 251px;
    height: 54vw;
    padding: 20px 0;
}

#ccsingle {
    position: absolute;
    right: 15px;
    top: 20px;
}

#ccsingle svg {
    width: 100px;
    max-height: 60px;
}

.creditcard svg#cardfront,
.creditcard svg#cardback {
    width: 100%;
    border-radius: 22px;
}

#generatecard {
    cursor: pointer;
    float: right;
    font-size: 12px;
    color: #fff;
    padding: 2px 4px;
    background-color: #909090;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

/* CHANGEABLE CARD ELEMENTS */
.creditcard .lightcolor,
.creditcard .darkcolor {
    -webkit-transition: fill .5s;
    transition: fill .5s;
}

.creditcard .lightblue {
    fill: #03A9F4;
}

.creditcard .lightbluedark {
    fill: #0288D1;
}

.creditcard .red {
    fill: #ef5350;
}

.creditcard .reddark {
    fill: #d32f2f;
}

.creditcard .purple {
    fill: #ab47bc;
}

.creditcard .purpledark {
    fill: #7b1fa2;
}

.creditcard .cyan {
    fill: #26c6da;
}

.creditcard .cyandark {
    fill: #0097a7;
}

.creditcard .green {
    fill: #66bb6a;
}

.creditcard .greendark {
    fill: #388e3c;
}

.creditcard .lime {
    fill: #d4e157;
}

.creditcard .limedark {
    fill: #afb42b;
}

.creditcard .yellow {
    fill: #ffeb3b;
}

.creditcard .yellowdark {
    fill: #f9a825;
}

.creditcard .orange {
    fill: #ff9800;
}

.creditcard .orangedark {
    fill: #ef6c00;
}

.creditcard .grey {
    fill: #bdbdbd;
}

.creditcard .greydark {
    fill: #616161;
}

/* FRONT OF CARD */
#svgname {
    text-transform: uppercase;
}

#cardfront .st2 {
    fill: #FFFFFF;
}

#cardfront .st3 {
    font-weight: 600;
}

#cardfront .st4 {
    font-size: 54.7817px;
}

#cardfront .st5 {
    font-weight: 400;
}

#cardfront .st6 {
    font-size: 33.1112px;
}

#cardfront .st7 {
    opacity: 0.6;
    fill: #FFFFFF;
}

#cardfront .st8 {
    font-size: 24px;
}

#cardfront .st9 {
    font-size: 36.5498px;
}

#cardfront .st10 {
    font-weight: 300;
}

#cardfront .st11 {
    font-size: 16.1716px;
}

#cardfront .st12 {
    fill: #4C4C4C;
}

/* BACK OF CARD */
#cardback .st0 {
    fill: none;
    stroke: #0F0F0F;
    stroke-miterlimit: 10;
}

#cardback .st2 {
    fill: #111111;
}

#cardback .st3 {
    fill: #F2F2F2;
}

#cardback .st4 {
    fill: #D8D2DB;
}

#cardback .st5 {
    fill: #C4C4C4;
}

#cardback .st6 {
    font-weight: 400;
}

#cardback .st7 {
    font-size: 27px;
}

#cardback .st8 {
    opacity: 0.6;
}

#cardback .st9 {
    fill: #FFFFFF;
}

#cardback .st10 {
    font-size: 24px;
}

#cardback .st11 {
    fill: #EAEAEA;
}

#cardback .st13 {
    font-size: 37.769px;
}

/* FLIP ANIMATION */
.content_card .container {
    perspective: 1000px;
}

.creditcard {
    width: 100%;
    max-width: 400px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.6s;
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    transition: transform 0.6s, -webkit-transform 0.6s;
    cursor: pointer;
}

.creditcard .front,
.creditcard .back {
    position: absolute;
    width: 100%;
    max-width: 400px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
}

.creditcard .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.creditcard.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/************************************/
/*          PAGE DE MARQUE          */
/************************************/
.pagemarque .heritage .titre {
    background: url(/medias/marque/guillemets_heritage.png) no-repeat center;
    background-size: contain;
    padding: 55px 0;
}

.pagemarque .science .textblock,
.pagemarque .expertise .textblock,
.pagemarque .rigueur .textblock {
    width: 650px;
}

.pagemarque .heritage .textblock {
    width: 610px;
}

.titre_soulignpink:after {
    content: '';
    width: 125px;
    height: 1px;
    background-color: #ffcbbe;
    display: block;
    margin: 7px auto 0;
    position: absolute;
    left: 0;
    bottom: -20px;
    transition: 0.5s;
}

.pagemarque .danslemonde .textblock {
    border: 7px solid #f9f1ef;
    padding: 70px 40px;
}

.pagemarque .distributeur {
    background-color: #f2f1f6;
}

.pagemarque .distributeur .soulignement:after, .pagemarque .transparence .soulignement:after {
    background-color: #000;
}

.pagemarque .beautyathome img {
    max-height: 490px;
}

.basket_confirm .content920 {
    box-shadow: 0 3px 10px #d8d8d8;
    padding-bottom: 120px;
}

.basket_confirm .logo-signature {
    margin-top: 70px;
}
#f_voucher .cta-grey{
    font-size: 29px;line-height: 47px;padding: 0 20px;
}
#f_voucher .cta-grey.remove{
    font-size: 20px;
    padding: 0 10px;
    line-height: 41px;
}
.reassurance{
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.reassurance li{
    font-size: 17px;
}
.reassurance li span{
    width:100%;
    display: block;
    font-size: 15px;
}
.reassurance li img{
    margin-bottom: 20px;
    height: 40px;
}

@media screen and (max-width: 768px) {
    .reassurance li{
        width: 50%;
        margin-bottom: 30px;
        font-size: 16px;
    }
    .reassurance li img{
        height: 30px;
    }
}

/************************************/
/*          BEAUTY AT HOME          */
/************************************/
.beautyathome .intro .textblock {
    width: 420px;
    margin-left: 80px;
    margin-top: -100px;
    position: relative;
    z-index: 1;
    transition: 0.2s;
    cursor: pointer;
}

.beautyathome .intro .textblock:hover {
    background-color: #302e34;
}

.beautyathome .t_coaching:after {
    margin: 15px auto 0;
    background-color: #F1D3CB;
    width: 75px;
    height: 2px;
}

.beautyathome .onglets p {
    cursor: pointer;
}

.beautyathome .onglets p.active {
    color: #000;
}

.beautyathome .soulignonglet {
    content: '';
    width: 110px;
    height: 2px;
    background-color: #F1D3CB;
    display: block;
    margin-top: 15px;
    position: relative;
    transition: 0.5s;
    left: 55px;
}

.beautyathome .contentCoaching[rel="1"] {
    display: block;
}

.beautyathome .contentCoaching {
    display: none;
    position: relative;
    overflow: hidden;
}

.beautyathome .contentCoaching ul {
    transition: 0.5s;
    height: 340px;
}

.beautyathome .contentCoaching ul.inactif {
    transition: 0.5s;
    height: 450px;
}

.beautyathome .contentCoaching ul.inactif {
    margin-left: 100vw;
}

.beautyathome .contentCoaching li {
    width: 315px;
    cursor: pointer;
}

.beautyathome .contentCoaching li img {
    width: 100%;
    height: 265px;
    object-fit: cover;
}

.beautyathome .contentCoaching .name {
    margin-top: 20px;
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
}

.beautyathome .contentCoaching .description {
    margin-top: 15px;
    font-weight: 100;
    font-size: 13px;
    line-height: 18px;
}

.beautyathome .coachingbeaute .download::after {
    width: 200px;
    margin: 12px auto 0;
}

.beautyathome .coachingbeaute .contentvideo {
    /*display: none;*/
    position: absolute;
    top: 0;
    left: -100vw;
    width: 100%;
    height: 450px;
    transition: 0.3s;
}

.beautyathome .coachingbeaute .contentvideo.active {
    left: 0;
}

.beautyathome .coachingbeaute .contentvideo iframe {
    width: 95%;
    height: 100%;
    margin: auto;
    display: block;
}

.beautyathome .coachingbeaute .close {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 35px;
    color: grey;
    cursor: pointer;
}

/**********************************/
/*          PAGE PRODUIT          */
/**********************************/
.productpage .informations .element {
    width: 90px;
}

.productpage .conseils {
    background-size: 100% auto;
    background-position: top left;
    background-repeat: no-repeat;
}

.productpage .conseils .adviceline {
    cursor: pointer;
    user-select: none;
}

.productpage .conseils .adviceline .titre:after {
    width: 5%;
    content: '+';
    font-family: 'Gill Sans';
}

.productpage .conseils .adviceline .titre.active:after {
    content: '-';
}

.productpage .conseils .adviceline:first-child .deroule {
    display: block;
}

.productpage .conseils .adviceline:not(:first-child) {
    margin-top: 35px;
}

.productpage .beautyathome .titre_soulignpink:after {
    width: 50px;
    bottom: -15px;
}

.productpage .beautyathome .videobloc {
    -webkit-box-shadow: 0px 7px 29px -4px rgba(0, 0, 0, 0.62);
    -moz-box-shadow: 0px 7px 29px -4px rgba(0, 0, 0, 0.62);
    box-shadow: 0px 7px 29px -4px rgba(0, 0, 0, 0.62);
    margin: auto;
}

.productpage .beautyathome .social div {
    height: 40px;
}

.productpage .informations .cta-submit {
    width: 145px;
}

.crosssell .bx-wrapper {
    margin: 0 auto;
}

.crosssell .bx-viewport {
    padding-bottom: 10px;
}

.stars_rate li {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.stars_rate li.active:before,
.stars_rate li.hover:before {
    color: #f4e4de;
}

.stars_rate li:not(:first-child) {
    padding-left: 5px;
}

.rate_line:not(:first-child) {
    margin-top: 20px;
}

.flexwrap {
    flex-wrap: wrap;
}

.bordertitle {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

h1.title {
    font-size: 36px;
    border-bottom: 1px solid #4b4853;
    padding-bottom: 10px;
    color: #4b4853;
    letter-spacing: 4.4px;
    margin-bottom: 15px;
    font-weight: 500;
}

h2.title {
    color: #4b4853;
    font-weight: 500;
    font-size: 21px;
    margin-bottom: 10px;
    letter-spacing: 1.4px;
}

.catalog {
    font-family: 'GillSans';
}

.headband {
    align-items: center;
}

.headband .picture {
    text-align: right;
}

.headband img {
    max-width: 100%;
    max-height: 345px;
}

.headband .intro {
    padding: 0 60px;
    box-sizing: border-box;
}

.headband .intro p {
    font-size: 15.5px;
    color: #4b4853;
    letter-spacing: 0.7px;
    line-height: 20px;
    font-weight: 300;
}

.contentlist {
    flex-wrap: wrap;
}

.contentlist nav {
    width: 240px;
    margin-left: 60px;
    margin-right: 20px;
}
body.ar .contentlist nav {
    width: 240px;
    margin-left: 20px;
    margin-right: 60px;
}

.contentlist nav .bordertitle {
    font-size: 17px;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: #4b4853;
}

.contentlist nav h3 {
    font-size: 14px;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: #4b4853;
    margin-bottom: 10px;
}

.contentlist nav h3:not(:first-child) {
    margin-top: 20px;
}

.contentlist nav ul li a {
    margin: 5px 0;
    display: block;
    padding: 7px 0;
    color: #717171;
    font-size: 14px;
    letter-spacing: 0.9px;
}

.contentlist nav ul li a:hover {
    opacity: 0.7;
}

.contentlist section {
    width: calc(100% - 320px - 60px);
}

.pagesearch .contentlist section,
.contentlist.subcategory section {
    width: calc(100% - 60px);
    margin: auto;
}

.contentlist section .headtris {
    text-align: right;
}

.contentlist section .headtris .onglet_tri {
    text-align: left;
    display: inline-block;
}

.contentlist section .headtris .label {
    font-size: 15px;
    color: #4b4853;
    font-weight: 300;
    letter-spacing: 1.7px;
}

.contentlist section .headtris .selectbox {
    width: 170px;
    vertical-align: middle;
    height: 30px;
    font-size: 11px;
}

.contentlist section .headtris .selectbox span,
.contentlist section .headtris .selectbox ul li {
    height: 32px;
    line-height: 30px;
    letter-spacing: 1.3px;
}

.contentlist section .headtris .selectbox::after {
    top: 7px;
}

.contentlist section .headtris .selectbox.open::after {
    top: 12px;
}

.contentlist section .headtris .selectbox ul {
    top: 28px;
}

.listproducts li,
.account .listproducts li {
    height: 405px;
    width: 33.33333%;
    margin: 20px 0;
}

.pagesearch .listproducts li {
    width: 25%;
}

.listproducts .product a[class^="cta-"] {
    width: 180px;
}

.programmes-beaute .img-programmes {
    width: 28%;
    vertical-align: middle;
}

.programmes-beaute li {
    list-style: none;
}

.programmes-beaute .routine-nombre {
    font-size: 6em;
}

.programmes-beaute .programmes-text {
    vertical-align: bottom;
}

.programmes-beaute .step {
    font-size: 27px;
}

.programmes-beaute .cta-decouvre {
    font-size: 15px;
    font-weight: 100;
    letter-spacing: 0.5px;
    color: #919092;
}

.programmes-beaute .cta-decouvre::after {
    content: '';
    width: 55px;
    height: 1.1px;
    background-color: #919092;
    display: block;
    margin: 7px auto 0;
    transition: 0.1s;
}

.programmes-beaute .programmes-price {
    color: #a9a6ad;
    text-align: center;
}

.programmes-conseils-demaquillant {
    background-color: #FFDFEC;
}

.programmes-conseils-hydratation {
    background-color: #CEE0E7;
}

.programmes-conseils-perle-caviar {
    background-color: #393942f0;
    color: white;
}

.programmes .img-product {
    width: 48%;
    margin-right: 70px;
    vertical-align: middle;
}

.programmes .informations {
    width: 42%;
    vertical-align: middle;
}

.programmes .margin-content {
    margin: 50px auto;
}

.programmes .nbr-2 {
    margin: -65px 30px 0 0;
}

.programmes .nbr-2-caviar {
    margin: -65px 0px 0 0;
}

.programmes .nbr-3 {
    text-align: center;
    margin-right: 6em;
}

.programmes .arrow1 {
    margin-right: 30px;
}

.programmes-beaute .texte-2{
    margin-right: -150px;
    width: 100%;
    text-align: center;
}

.programmes-beaute.block2 {
    text-align: right;
}
/********************************/
/*          PAGE GAMME          */
/********************************/
.pagegamme .head .pictoElement {
    width: 180px;
}

.pagegamme .head .visuel .bgGamme {
    height: 40px;
    width: 100%;
    margin-top: -25px;
}

.pagegamme .description {
    width: 830px;
}

.pagegamme .product {
    width: 50%;
    padding: 0 130px;
    box-sizing: border-box;
}

.pagegamme .allproducts li .contentVisuel .bgGamme {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    top: 0;
    left: 0;
}

.pagegamme .allproducts li .contentVisuel img {
    width: 100%;
}

.pagegamme .allproducts li .nom {
    margin-top: 15px;
}

.pagegamme .allproducts li:nth-of-type(2) .contentVisuel .bgGamme,
.pagegamme .allproducts li:nth-of-type(6) .contentVisuel .bgGamme {
    height: 85%;
    top: auto;
    bottom: 0;
}

.pagegamme .allproducts li:nth-of-type(4) .contentVisuel .bgGamme,
.pagegamme .allproducts li:nth-of-type(5) .contentVisuel .bgGamme {
    height: 85%;
    top: 0;
}

.pagegamme .allproducts li:nth-of-type(even):not(.alone) {
    margin-top: 70px;
}

.pagegamme .allproducts .product.plv img {
    width: 240%;
    margin-left: -100%;
}

.pagegamme .allproducts li:nth-child(5) {
    position: relative;
}

.pagegamme .allproducts li:nth-child(5) .contentVisuel {
    z-index: 1;
}

.pagegamme .allproducts li:nth-child(5) .illu_gamme_product {
    width: 60%;
    position: absolute;
    top: 0;
    right: -110px;
    z-index: 0;
}

.pagegamme .allproducts li:nth-child(5) {
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: 140% 10%;
}

.pagegamme .allproducts li img {
    max-height: none;
}

.pagegamme .illu_gamme {
    position: absolute;
    top: 0;
    left: -33vw;
    width: 45%;
}

/*******************************/
/*         PLAN DU SITE        */
/*******************************/
.sitemap .border_darkgrey li {
    width: 33%;
    margin: 5px 0;
}

/*******************************/
/*           CONTACT           */
/*******************************/
.contact .titre:after {
    content: '';
    width: 100px;
    height: 1px;
    background-color: #C1A59E;
    display: block;
    margin: 25px 0 0;
}

.contact .flexbox {
    align-items: flex-start;
}

.contact .box {
    width: 545px;
    box-shadow: 0 3px 5px rgba(218, 218, 218, 0.7);
}

.contact .boxnumber {
    color: #C1A59E;
    border: 1px solid #C1A59E;
}

.contact textarea {
    min-height: 200px;
}

/***************************************/
/*           OU NOUS TROUVER           */
/***************************************/
.ounoustrouver .recherche input {
    width: 865px;
}

.ounoustrouver .recherche .icon-localisation {
    font-size: 25px;
    border-left: 1px solid #cfcfcf;
    padding-left: 5px;
    position: absolute;
    top: 7px;
    right: 10px;
}

.ounoustrouver .recherche .cta-grey {
    height: 40px;
    line-height: 20px;
    margin-left: 20px;
}

.ounoustrouver .map-content .gauche {
    width: 400px;
    height: 550px;
    overflow-x: hidden;
    overflow-y: scroll;
}

.ounoustrouver .map-content .droite {
    width: 610px;
}

.ounoustrouver .map-content .boxadresse {
    padding: 20px 15px;
    box-sizing: border-box;
}

.ounoustrouver .map-content .boxadresse:first-child {
    margin-top: 0;
}

.ounoustrouver .map-content .fiche.boxadresse {
    margin-bottom: 15px;
}

.ounoustrouver .map-content .boxadresse .titre::after {
    content: "+";
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 22px;
}

.ounoustrouver .map-content .boxadresse .titre.active::after {
    content: "-";
}

.ounoustrouver .map-content .boxadresse .cache {
    display: none;
}

/***************************************/
/*          FOIRE AUX QUESTIONS        */
/***************************************/

.faq .h2_services {
    text-transform: uppercase;
    margin-left: 40px;
    font-weight: normal;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}

.faq-list {
    padding: 20px 0px;
    border-bottom: 1px solid #e7e3e2;
    position: relative;
}

.faq-list:after {
    content: '+';
    position: absolute;
    font-size: 27px;
    top: 20px;
    right: 40px;
    font-weight: 100;
}

.faq-list.active:after {
    content: '-';
    right: 45px;
}

.faq-list-item {
    width: 100%;
    padding: 20px 0;
}

.faq-list-item p {
    width: 90%;
    margin-left: 40px;
    font-weight: 100;

}

.faq .main-thematique {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.faq .thematique {
    text-transform: uppercase;
    padding: 50px 0;
    border: 1px solid #DFDFDF;
    text-align: center;
    cursor: pointer;
    width: 185px;
}

.faq .thematique:hover,
.faq .thematique.active {
    border: 1px solid #D9B9B1;
    color: #D9B9B1;
}

.faq .thematique:not(:last-child) {
    margin-right: 20px;
}

.faq .thematique [class^="icon-"] {
    display: block;
    margin-bottom: 20px;
    font-size: 20px;
}

.faq .bloc_questions:not(.general) {
    display: none;
}

.faq table,
.faq td {
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    font-size: 11px;
    color: #000000;
}

/***************************************/
/*           GROUPE PANTHER            */
/***************************************/
.groupe_panther p {
    margin: 40px 0 40px;
}
.groupe_panther .visuel_groupe {
    width: 100%;
}

/*******************************************/
/*           DOSSIERS DE PRESSE            */
/*******************************************/
.presse .dossiers a,
.presse .communiques a,
.presse .publications a {
    margin-top: 20px;
    display: inline-block;
    vertical-align: top;
    width: 210px;
    margin-right: 29px;
}

.presse .dossiers img,
.presse .communiques img,
.presse .publications img {
    width: 100%
}

.presse .dossiers img:hover,
.presse .communiques img:hover,
.presse .publications img:hover {
    opacity: 0.7;
}

.presse .publications .onglets p {
    opacity: 0.6;
}

.presse .publications .onglets p.active {
    opacity: 1;
    border-bottom: 1px solid #F1D3CB;
    padding-bottom: 5px;
}

/***********************************/
/*           NOS ACTIFS            */
/***********************************/
.nosactifs .actif_element {
    border: 1px solid #F8F2F1;
    position: relative;
}

.nosactifs .actif_hover,
.actif_page .actif_hover {
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(217, 185, 177, 0.9);
    width: 100%;
    height: 100%;
    color: #fff;
    justify-content: center;
    align-items: center;
    transition: 0.25s;
    opacity: 0;
}

.nosactifs .actif_element:hover .actif_hover,
.actif_page .slider_others .product:hover .actif_hover {
    opacity: 1;
}

.nosactifs .actif_element p::after {
    width: 80%;
}

.actif_page .slider_others .product p::after {
    width: 80%;
    background-color: #fff;
}

.actif_page .benefices {
    padding: 30px 0 75px;
}

.actif_page .bx-wrapper .bx-controls-direction a {
    text-indent: 0;
    font-size: 32px;
}

.actif_page .slider_others img {
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
}

.actif_page .content_slider_product .bx-wrapper {
    margin-left: auto;
    margin-right: auto;
}

.actif_page .content_slider_product .bx-wrapper .bx-prev {
    left: -60px;
}

.actif_page .content_slider_product .bx-wrapper .bx-next {
    right: -80px;
}

.actif_page .bandeau {
    width: 100%;
}

.actif_page .benefices li {
    line-height: 18px;
    font-size: 15px;
    margin-top: 25px;
}

.actif_page .benefices li::before {
    content: '•';
    color: #D9B9B1;
    display: inline-block;
    font-size: 26px;
    vertical-align: bottom;
    margin-right: 10px;
}

/*Buriti*/
.actif_page.bu .benefices {
    background-color: #ffb66a;
}

/*Acides hyaluroniques*/
.actif_page.ah .benefices {
    background: #fff7e0;
    background-position: 72% bottom;
}

/*Eau de rose*/
.actif_page.ro .benefices {
    background: #F9F1EF;
    background-position: 80% bottom;
}

/*Abricot*/
.actif_page.ab .benefices {
    background: #ffede1;
    background-position: 72% bottom;
}

/*Goji*/
.actif_page.go .benefices {
    background-color: #ffede1;
}

/*Eau marine*/
.actif_page.em .benefices {
    background: #f1f2f7;
    background-position: 72% bottom;
}

/*Huiles*/
.actif_page.hu .benefices {
    background: #F5E0CF;
    background-position: 85% bottom;
}

/*Pamplemousse*/
.actif_page.pa .benefices {
    background: #fde5de;
    background-position: 80% bottom;
}

/*Mate*/
.actif_page.ma .benefices {
    background: #e5fff5;
    background-position: 72% bottom;
}

/*Raisin*/
.actif_page.ra .benefices {
    background: #fcecff;
    background-position: 87% bottom;
}

/*Vanille*/
.actif_page.va .benefices {
    background: #F1EECA;
    background-position: 95% bottom;
}

/*Romarin*/
.actif_page.rm .benefices {
    background: #f8ffeb;
    background-position: 72% bottom;
}

/*Mûres*/
.actif_page.mu .benefices {
    background: #ffdde9;
    background-position: 72% bottom;
}

/*Perle et caviar*/
.actif_page.pc .benefices {
    background: #f2f2f2;
    background-position: 92% 0px;
    background-size: 80%;
}

/*******************************************/
/*           ESPACE DISTRIBUTEUR           */
/*******************************************/
.distributeurs .container .onglet {
    width: 100%;
    background-color: #fff;
    padding: 10px 3% 9px;
    box-sizing: border-box;
    font-size: 20px;
    position: relative;
    cursor: pointer;
    letter-spacing: 1px;
    border: 1px solid #CCCCCC;
}

.distributeurs .container .onglet.active {
    background-color: #F5F5F5;
}

.distributeurs .container .onglet .arrow {
    position: absolute;
    right: 20px;
    padding: 5px;
    transform: rotate(45deg);
}

.distributeurs .container .onglet.active .arrow {
    top: 14px;
    transform: rotate(225deg);
}

.distributeurs .boxcontainer {
    display: none;
}

.distributeurs .boxcontainer .container {
    margin-top: 20px;
}

.distributeurs .showcontainer {
    display: block;
    text-align: center;
    font-size: 29px;
    margin-top: 20px;
}

.distributeurs .inside {
    margin: 5px 0 30px;
    display: none;
}

.distributeurs .inside .block {
    border: 1px solid #aaaaaa;
    width: 210px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    margin: 10px 3px 0 2px;
    padding: 15px 0;
    box-sizing: border-box;
}

.distributeurs .inside img {
    max-width: 100%;
}

.distributeurs .inside .cta-transparent {
    font-size: 17px;
    letter-spacing: 2px;
}

.distributeurs .inside .block .flag {
    color: #000;
    font-size: 35px;
    margin-top: 10px;
    margin-bottom: 0;
}

.distributeurs .inside .block .filename {
    width: 95%;
    display: block;
    font-size: 13px;
    margin: 13px auto;
    word-wrap: break-word;
    text-transform: uppercase;
    font-weight: 100;
}

.distributeurs .bx-wrapper .bx-controls-direction a {
    text-indent: 0;
    font-size: 32px;
}

.distributeurs .bx-wrapper .bx-controls-direction .bx-prev {
    left: -50px
}

.distributeurs .bx-wrapper .bx-controls-direction .bx-next {
    right: -50px
}

/*******************************************/
/*           TOTALE TRANSPARENCE           */
/*******************************************/
.transparence .bandeau {
    background-color: #F5E5DF;
    padding: 25px 0;
}

.transparence .h2_item::after {
    margin: 17px auto 0;
    width: 10%;
    height: 3px;
}

.transparence .h2_item:hover:after {
    -webkit-transform: translate(0, 0px);
    transform: translate(0, 0px);
}

.transparence .onglets p {
    cursor: pointer;
}

.transparence .onglets p.active {
    color: #000;
}

.transparence .soulignonglet {
    content: '';
    width: 110px;
    height: 2px;
    background-color: #F1D3CB;
    display: block;
    margin-top: 15px;
    position: relative;
    transition: 0.5s;
    left: 12px;
}

.transparence .contentTransparence {
    display: none;
    margin-top: 40px;
    text-align: center;
}

.transparence .contentTransparence[rel="1"] {
    display: block;
}

.transparence .contentTransparence .number {
    background-color: #F9F1EF;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    font-size: 35px;
    font-family: 'AmericanTypewriter';
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.transparence .contentTransparence .title {
    font-size: 20px;
    font-family: 'AmericanTypewriter';
    margin-top: 15px;
    font-weight: 600;
}

/* BANDEAU COOKIE */
.cnil{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    padding:30px 0;
    background-color:#F3E3DD;
    z-index: 100;
}
.cnil .content{
    width:1240px;
}
.cnil a{
    text-decoration:underline;
}
.cnil a:hover{
    text-decoration:none;
}
.cnil a.fa{
    position:absolute;
    right:15px;
    top:15px;
    text-decoration:none;
    cursor:pointer;
}
.cnil a.close-thin{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 25px;
    text-decoration: none;
    cursor:pointer;
}
/* FIN BANDEAU COOKIE */

@media screen and (min-width: 1800px) and (max-width: 2500px) {
    .listproducts li {
        width: 25%;
        padding: 0 20px;
        box-sizing: border-box;
    }
}

@media screen and (min-width: 2500px) {
    .listproducts li {
        width: 20%;
    }
}

@media screen and (max-width: 768px) {
    .listproducts li,
    .account .listproducts li {
        width: 50%;
        height: 85vw;
    }
    .programmes-beaute .img-programmes {
        width: 100%;
    }
    .programmes-beaute .arrows {
        display: none;
    }
    .programmes {
        text-align: center;
    }
    .programmes-beaute.block2 {
        text-align: inherit;
    }
    .programmes-beaute .texte-2 {
         margin-right: inherit;
    }
    .programmes-beaute {
        margin-top: 20px;
    }
    .programmes .nbr-3 {
        margin-right: inherit;
    }
    .programmes-beaute .txt-3 {
        text-align: inherit;
    }
    .programmes-beaute .img2, .programmes-beaute .img3  {
        margin-top: 30px;
    }
    .nbr2-hydratation {
        z-index: 1;
        position: absolute;
        margin: 30px 0 0 175px;
        text-align: center;
    }
    .programmes-beaute .text-hydratation {
        text-align: center;
    }
    .programmes-beaute .nbre-1 {
        position: absolute;
        z-index: 1;
        margin: 30px 0 0 180px;
    }
    .f12-mb {
        font-size: 12px;
    }
}


@media screen and (min-width: 1024px) {
    .showm {
        display: none;
    }
    .flexbox-d{
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }
    .jc-spbw-d{
        justify-content: space-between;
    }

    header .meganav .main .mainElement:hover .categorie {
        border-bottom: 1px solid #000;
    }
    /*****************************************/
    /*         SOULIGN PINK ANIMATION        */
    /*****************************************/
    .pagemarque .beautyathome .textblock:hover .titre_soulignpink:after,
    .productpage .beautyathome .textblock:hover .titre_soulignpink:after {
        width: 100%;
    }

    /********************/
    /*      HEADER      */
    /********************/
    header .meganav .main .mainElement:hover > .souscategorie {
        display: block;
    }

    /**********************/
    /*      HOMEPAGE      */
    /**********************/
    .soulignement:hover:after {
        -webkit-transform: translate(0, 4px);
        transform: translate(0, 4px);
    }

    .soulignement.noanim:hover:after {
        -webkit-transform: none;
        transform: none;
    }

    /***********************************/
    /*          COMPTE CLIENT          */
    /***********************************/
    .account .all_points .carre:hover img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    /*********************************/
    /*         BEAUTY AT HOME        */
    /*********************************/
    .beautyathome .line:nth-child(odd) .textblock .titre:after {
        content: "";
        width: 200px;
        height: 1px;
        background-color: #979797;
        display: block;
        position: absolute;
        right: -210px;
        bottom: 4px;
    }

    .beautyathome .line:nth-child(even) .textblock .titre:before {
        content: "";
        width: 200px;
        height: 1px;
        background-color: #979797;
        display: block;
        position: absolute;
        left: -210px;
        bottom: 4px;
    }

    /*******************************/
    /*         PAGE PRODUIT        */
    /*******************************/
    .packshotSlider {
        width: 555px;
    }

    .packshotSlider li {
        float: right;
    }
    .packshotSlider li img {
        width: 100%;
        object-fit: cover;
    }

    .packshotSlider li.big {
        width: 350px;
    }

    .packshotSlider li.little {
        width: 170px;
    }

    .beautyathome .packshotSlider li.big {
        width: 350px;
    }

    .beautyathome .packshotSlider li.big img {
        height: 280px;
    }

    .beautyathome .packshotSlider li.little {
        width: 140px;
    }

    .beautyathome .packshotSlider li.little img {
        height: 134px;
    }

    .productpage .presentation .informations {
        max-width: 360px;
        box-sizing: border-box;
    }

    .product:hover .visuel {
        display: none;
    }

    .slider_others .product:hover .visuel {
        display: block;
    }

    .product:hover .visuelhover {
        opacity: 1;
        position: static;
        transition: 0.5s;
    }
}

@media screen and (min-width: 1200px) {
    .content {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}


@media screen and (max-width: 1023px) {
    .popit.w440 .box,
    .popit.w560 .box,
    .popit.w790 .box {
        width: 95% !important;
        margin-left: -47.5% !important;
        max-height: 95vh;
        overflow: scroll;
    }

    .popit.w560 .box {
        height: 90vh;
    }

    .popConnexion .content_login {
        padding: 0 2.5%;
    }

    .popConnexion .cta-pink.showd,
    .popConnexion .showPopin-mb {
        display: block;
    }

    .popConnexion p.inscription.showm {
        display: none;
    }

    /********************/
    /*    PARAMETRES    */
    /********************/
    .showd {
        display: none;
    }

    .left-mb {
        float: left;
    }

    .right-mb {
        float: right;
    }

    .nofloat-mb {
        float: none;
    }

    .lhautomob {
        line-height: normal;
    }

    .border-bottom-black-mb {
        border-bottom: 1px solid #000;
    }

    .nobg-mb {
        background: none;
    }

    .col-0-mb {
        width: 4.15555%;
    }

    .col-1-mb {
        width: 8.33333%;
    }

    .col-2-mb {
        width: 16.66666%;
    }

    .col-3-mb {
        width: 25%;
    }

    .col-4-mb {
        width: 33.33333%;
    }

    .col-5-mb {
        width: 41.66666%;
    }

    .col-6-mb {
        width: 50%;
    }

    .col-7-mb {
        width: 58.33333%;
    }

    .col-8-mb {
        width: 66.66666%;
    }

    .col-9-mb {
        width: 75%;
    }

    .col-10-mb {
        width: 83.33333%;
    }

    .col-11-mb {
        width: 91.66666%;
    }

    .col-12-mb {
        width: 100%;
        height: auto;
    }

    .col-mar-0real-mb {
        margin-left: 0;
    }

    .col-mar-0-mb {
        margin-left: 4.15555%;
    }

    .col-mar-1-mb {
        margin-left: 8.33333%;
    }

    .col-mar-2-mb {
        margin-left: 16.66666%;
    }

    .col-mar-3-mb {
        margin-left: 25%;
    }

    .col-mar-4-mb {
        margin-left: 33.33333%;
    }

    .col-mar-5-mb {
        margin-left: 41.66666%;
    }

    .col-mar-6-mb {
        margin-left: 50%;
    }

    .col-mar-7-mb {
        margin-left: 58.33333%;
    }

    .col-mar-8-mb {
        margin-left: 66.66666%;
    }

    .col-mar-9-mb {
        margin-left: 75%;
    }

    .col-mar-10-mb {
        margin-left: 83.33333%;
    }

    .col-mar-11-mb {
        margin-left: 91.66666%;
    }

    .col-mar-lr-0-mb {
        margin-left: 0;
        margin-right: 0;
    }

    .col-mar-lr-1-mb {
        margin-left: 8.33333%;
        margin-right: 8.33333%;
    }

    .col-mar-lr-2-mb {
        margin-left: 16.66666%;
        margin-right: 16.66666%;
    }

    .col-mar-lr-3-mb {
        margin-left: 25%;
        margin-right: 25%;
    }

    .col-mar-lr-4-mb {
        margin-left: 33.33333%;
        margin-right: 33.33333%;
    }

    .col-mar-lr-5-mb {
        margin-left: 41.66666%;
        margin-right: 41.66666%;
    }

    .col-mar-lr-6-mb {
        margin-left: 50%;
        margin-right: 50%;
    }

    .col-mar-lr-7-mb {
        margin-left: 58.33333%;
        margin-right: 58.33333%;
    }

    .col-mar-lr-8-mb {
        margin-left: 66.66666%;
        margin-right: 66.66666%;
    }

    .col-mar-9-lr-mb {
        margin-left: 75%;
        margin-right: 75%;
    }

    .col-mar-10-lr-mb {
        margin-left: 83.33333%;
        margin-right: 83.33333%;
    }

    .col-mar-11-lr-mb {
        margin-left: 91.66666%;
        margin-right: 91.66666%;
    }

    .col-pad-lr-0real-mb {
        padding-left: 0;
        padding-right: 0;
    }

    .col-pad-lr-0-mb {
        padding-left: 4.15555%;
        padding-right: 4.15555%;
    }

    .col-pad-lr-1-mb {
        padding-left: 8.33333%;
        padding-right: 8.33333%;
    }

    .col-pad-lr-2-mb {
        padding-left: 16.66666%;
        padding-right: 16.66666%;
    }

    .col-pad-lr-3-mb {
        padding-left: 25%;
        padding-right: 25%;
    }

    .col-pad-lr-4-mb {
        padding-left: 33.33333%;
        padding-right: 33.33333%;
    }

    .col-pad-lr-5-mb {
        padding-left: 41.66666%;
        padding-right: 41.66666%;
    }

    .col-pad-lr-6-mb {
        padding-left: 50%;
        padding-right-right: 50%;
    }

    .col-pad-lr-7-mb {
        padding-left: 58.33333%;
        padding-right: 58.33333%;
    }

    .col-pad-lr-8-mb {
        padding-left: 66.66666%;
        padding-right: 66.66666%;
    }

    .col-pad-9-lr-mb {
        padding-left: 75%;
        padding-right: 75%;
    }

    .col-pad-10-lr-mb {
        padding-left: 83.33333%;
        padding-right: 83.33333%;
    }

    .col-pad-11-lr-mb {
        padding-left: 91.66666%;
        padding-right: 91.66666%;
    }

    .col-pad-0-mb {
        padding: 0;
    }

    .col-pad-30px-20px-mb {
        padding: 30px 20px;
    }

    .col-pad-35px-15px-mb {
        padding: 35px 15px;
    }

    .col-pad-20px-30px-mb {
        padding: 20px 30px;
    }

    .col-pad-20px-15px-mb {
        padding: 20px 15px;
    }

    .mt-0-mb, .mt0-mb {
        margin-top: 0;
    }

    .mt-5-mb, .mt5-mb {
        margin-top: 5px;
    }

    .mt-7-mb, .mt7-mb {
        margin-top: 7px;
    }

    .mt-10-mb, .mt10-mb {
        margin-top: 10px;;
    }

    .mt-15-mb, .mt15-mb {
        margin-top: 15px;
    }

    .mt-20-mb, .mt20-mb {
        margin-top: 20px;
    }

    .mt-25-mb, .mt25-mb {
        margin-top: 25px;
    }

    .mt-30-mb, .mt30-mb {
        margin-top: 30px;
    }

    .mt-35-mb, .mt35-mb {
        margin-top: 35px;
    }

    .mt-40-mb, .mt40-mb {
        margin-top: 40px;
    }

    .mt-45-mb, .mt45-mb {
        margin-top: 45px;
    }

    .mt-50-mb, .mt50-mb {
        margin-top: 50px;
    }

    .mt-55-mb, .mt55-mb {
        margin-top: 55px;
    }

    .mt-60-mb, .mt60-mb {
        margin-top: 60px;
    }

    .mt-65-mb, .mt65-mb {
        margin-top: 65px;
    }

    .mt-70-mb, .mt70-mb {
        margin-top: 70px;
    }

    .mt-75-mb, .mt75-mb {
        margin-top: 75px;
    }

    .mt-80-mb, .mt80-mb {
        margin-top: 80px;
    }

    .mt-85-mb, .mt85-mb {
        margin-top: 85px;
    }

    .mt-90-mb, .mt90-mb {
        margin-top: 90px;
    }

    .mt-95-mb, .mt95-mb {
        margin-top: 95px;
    }

    .mt-100-mb, .mt100-mb {
        margin-top: 100px;
    }

    .mb-0-mb, .mb0-mb {
        margin-bottom: 0;
    }

    .mb-5-mb, .mb5-mb {
        margin-bottom: 5px;
    }

    .mb-10-mb, .mb10-mb {
        margin-bottom: 10px;
    }

    .mb-15-mb, .mb15-mb {
        margin-bottom: 15px;
    }

    .mb-20-mb, .mb20-mb {
        margin-bottom: 20px;
    }

    .mb-25-mb, .mb25-mb {
        margin-bottom: 25px;
    }

    .mb-30-mb, .mb30-mb {
        margin-bottom: 30px;
    }

    .mb-35-mb, .mb35-mb {
        margin-bottom: 35px;
    }

    .mb-40-mb, .mb40-mb {
        margin-bottom: 40px;
    }

    .mb-45-mb, .mb45-mb {
        margin-bottom: 45px;
    }

    .mb-50-mb, .mb50-mb {
        margin-bottom: 50px;
    }

    .mb-55-mb, .mb55-mb {
        margin-bottom: 55px;
    }

    .mb-60-mb, .mb60-mb {
        margin-bottom: 60px;
    }

    .mb-65-mb, .mb65-mb {
        margin-bottom: 65px;
    }

    .mb-70-mb, .mb70-mb {
        margin-bottom: 70px;
    }

    .mb-75-mb, .mb75-mb {
        margin-bottom: 75px;
    }

    .mb-80-mb, .mb80-mb {
        margin-bottom: 80px;
    }

    .mb-85-mb, .mb85-mb {
        margin-bottom: 85px;
    }

    .mb-90-mb, .mb90-mb {
        margin-bottom: 90px;
    }

    .mb-95-mb, .mb95-mb {
        margin-bottom: 95px;
    }

    .mb-100-mb, .mb100-mb {
        margin-bottom: 100px;
    }

    .ml-0-mb, .ml0-mb {
        margin-left: 0;
    }

    .ml-15-mb, .ml15-mb {
        margin-left: 15px;
    }

    .pt-0-mb, .pt0-mb {
        padding-top: 0;
    }

    .pt-10-mb, .pt10-mb {
        padding-top: 10px;
    }

    .pt-15-mb, .pt15-mb {
        padding-top: 15px;
    }

    .pt-20-mb, .pt20-mb {
        padding-top: 20px;
    }

    .pt-30-mb, .pt30-mb {
        padding-top: 30px;
    }

    .pt-410-mb, .pt40-mb {
        padding-top: 40px;
    }

    .pl-0-mb, .pl0-mb {
        padding-left: 0;
    }

    .pr-0-mb, .pr0-mb {
        padding-right: 0;
    }

    .pb-0-mb, .pb0-mb {
        padding-bottom: 0;
    }

    .pb-10-mb, .pb10-mb {
        padding-bottom: 10px;
    }

    .pb-15-mb, .pb15-mb {
        padding-bottom: 15px;
    }

    .pb-20-mb, .pb20-mb {
        padding-bottom: 20px;
    }

    .pb-30-mb, .pb30-mb {
        padding-bottom: 30px;
    }

    .plr0-mb, .plr-0-mb {
        padding-right: 0;
        padding-left: 0;
    }

    .plr10-mb, .plr-10-mb {
        padding-right: 10px;
        padding-left: 10px;
    }

    .pad0-mb {
        padding: 0;
    }

    .pad95pc-mb {
        padding: 0 2.5%;
        box-sizing: border-box;
    }

    .col-pad-10px-mb {
        padding-left: 10px;
        padding-right: 10px;
    }

    .col-left-pad-10px-mb {
        padding-left: 10px;
    }

    .col-right-pad-10px-mb {
        padding-right: 10px;
    }

    .col-pad-20px-mb {
        padding-left: 20px;
        padding-right: 20px;
    }

    .col-left-pad-20px-mb {
        padding-left: 20px;
    }

    .col-right-pad-20px-mb {
        padding-right: 20px;
    }

    .col-pad-40px-mb {
        padding-left: 40px;
        padding-right: 40px;
    }

    .col-left-pad-40px-mb {
        padding-left: 40px;
    }

    .col-right-pad-40px-mb {
        padding-right: 40px;
    }

    .pad-0-mb {
        padding: 0;
    }

    .pad-25-10-mb {
        padding: 25px 10px;
    }

    .alignleft-mb {
        text-align: left;
    }

    .alignright-mb {
        text-align: right;
    }

    .aligncenter-mb {
        text-align: center;
    }

    .aligncenter-mb .loading {
        text-align: center;
    }

    .flexbox-mb {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .itemcenter-mb {
        align-items: center;
    }

    .direction-col-mb {
        flex-direction: column;
    }

    .ptb0-mb {
        padding-top: 0;
        padding-bottom: 0;
    }

    .displayblock-mb {
        display: block;
    }

    .inlineblock-mb {
        display: inline-block;
    }

    .w30pc-mb {
        width: 30%;
    }

    .w40pc-mb {
        width: 40%;
    }

    .w50pc-mb {
        width: 50%;
    }

    .w60pc-mb {
        width: 60%;
    }

    .w70pc-mb {
        width: 70%;
    }

    .w80pc-mb {
        width: 80%;
    }

    .w90pc-mb {
        width: 90%;
    }

    .w95pc-mb {
        width: 95%;
    }

    .w100pc-mb {
        width: 100%;
    }

    .order1-mb {
        order: 1
    }

    .order2-mb {
        order: 2
    }

    .order3-mb {
        order: 3
    }

    .order4-mb {
        order: 4
    }

    .order5-mb {
        order: 5
    }

    .order6-mb {
        order: 6
    }

    .flexdirecol-mb {
        flex-direction: column;
    }

    .content920, .content735, .content1030, .content875 {
        width: 100%;
    }

    .bg_white-mb {
        background-color: #fff;
    }

    .displaynone-mb {
        display: none;
    }

    .nosoulignleft-mb:after {
        display: none;
    }

    .marginauto-mb {
        margin-left: auto;
        margin-right: auto;
    }

    /*****************************/
    /*          GENERAL          */
    /*****************************/
    .theme_title {
        font-size: 8vw;
        line-height: 9vw;
    }

    .cta-grey,
    .cta-pink,
    .cta-transparent {
        padding: 15px 0;
    }

    .border-tb-gey-mb {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    .noborder-mb {
        border: none;
    }

    .theme_title.wline {
        display: inline-flex;
        align-items: center;
    }

    h1.title {
        font-size: 5vw;
    }

    /**************************/
    /*          FORM          */
    /**************************/
    .f_el input[type="text"],
    .f_el input[type="email"],
    .f_el input[type="tel"],
    .f_el input[type="password"],
    .f_el input[type="number"] {
        height: 40px;
    }

    /****************************/
    /*          HEADER          */
    /****************************/
    header {
        height: 58px;
    }

    header .bandeau_delivery {
        display: none;
    }

    .header_mobile {
        width: 100%;
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        align-items: center;
        justify-content: space-between;
        padding: 15px 4vw;
        border-bottom: 1px solid #cccccc;
        position: fixed;
        background-color: #fff;
        z-index: 2;
        max-height: 59px;
    }

    .header_mobile.notfixed {
        position: relative;
        z-index: unset;
    }

    .burger .bar1, .burger .bar2, .burger .bar3 {
        width: 30px;
        height: 1px;
        background-color: #333;
        transition: 0.4s;
    }

    .burger .bar2, .burger .bar3 {
        margin: 9px auto;
    }

    .burger .bar1 {
        margin: 0 auto 9px;
    }

    .burger {
        width: 30px;
        height: 23px;
    }

    .burger.active .bar1 {
        -webkit-transform: rotate(-45deg) translate(-7px, 7px);
        transform: rotate(-45deg) translate(-7px, 7px);
    }

    .burger.active .bar2 {
        -webkit-transform: rotate(45deg) translate(0, 0px);
        transform: rotate(45deg) translate(0, 0px);
    }

    .burger.active .bar3 {
        opacity: 0;
    }

    .header_mobile .search {
        font-size: 24px;
    }

    .header_mobile .search .close-thin {
        font-size: 35px;
        color: #000;
    }

    .header_mobile .compte,
    .header_mobile .panier {
        color: #000;
        font-size: 22px;
    }

    .header_mobile .compte {
        margin-right: 15px;
    }

    header #f_search {
        right: 0;
        top: 58px;
        width: 100%;
        padding: 20px;
        position: fixed;
        z-index: 10;
    }

    header #f_search::before,
    header #f_search::after {
        display: none;
    }

    header #f_search input {
        width: 85%;
    }

    header #f_search .fa-search {
        width: 15%;
    }

    .meganav {
        width: 90vw;
        overflow-x: hidden;
        position: fixed;
        height: 100vh;
        overflow-y: scroll;
        z-index: 11;
        background-color: #fff;
        left: calc(-100% - 90vw);
        top: 0;
        box-sizing: border-box;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
        -webkit-transition-timing-function: ease;
        -moz-transition-timing-function: ease;
        -ms-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-timing-function: ease;
        box-sizing: border-box;
    }

    .meganav.open {
        left: 0;
    }

    .meganav .header_nav {
        position: fixed;
        background-color: white;
        width: 90%;
        height: 58px;
        z-index: 100;
        padding: 15px 4vw;
        box-sizing: border-box;
    }

    .meganav .header_nav .burger .bar1,
    .meganav .header_nav .burger .bar2,
    .meganav .header_nav .burger .bar3 {
        transition-duration: 0.7s;
    }

    header .bottom_mb {
        height: 160px;
    }

    header .bottom_mb .contenu {
        bottom: 0;
    }

    header .bottom_mb .contenu span::before {
        color: #333333;
    }

    .burger,
    header .bottom .logo {
        position: relative;
        z-index: 12;
    }

    header .bottom .logo {
        width: 105px;
    }

    header .meganav .main {
        flex-direction: column;
        padding: 58px 15px 20px;
        min-height: calc(100% - 235px);
        justify-content: flex-start;
    }

    header .meganav .main .mainElement {
        height: auto;
        padding: 0;
        position: relative;
        border-bottom: 1px solid #cccccc;
    }

    header .meganav .main .mainElement:last-child {
        border-bottom: none;
    }

    header .meganav .main .mainElement:first-child {
        padding: 0;
    }

    header .meganav .main .mainElement:nth-child(2)::after,
    header .meganav .main .mainElement:nth-child(3)::after,
    header .meganav .main .mainElement:nth-child(4)::after,
    header .meganav .main .mainElement .titre_souscateg::after {
        content: '+';
        position: absolute;
        font-size: 27px;
        top: 15px;
        right: 0;
        font-weight: 100;
    }

    header .meganav .main .mainElement .titre_souscateg::after {
        top: -3px;
        right: 18px;
    }

    header .meganav .main .mainElement::after {
        font-size: 27px;
    }

    header .meganav .main .mainElement .titre_souscateg {
        position: relative;
    }

    header .meganav .main .mainElement .titre_souscateg::after {
        font-size: 20px;
    }

    header .meganav .main .mainElement.active::after {
        content: '-';
    }

    header .meganav .main .categorie a {
        padding-top: 20px;
    }

    .backgroundhover.open::before {
        content: ' ';
        width: 100vw;
        height: 100vh;
        min-height: calc(100vh - 78px);
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        animation-name: fadeInOpacity;
        animation-iteration-count: 1;
        animation-timing-function: ease-in;
        animation-duration: 0.2s;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;
    }

    header .meganav .souscategorie {
        border: none;
        position: initial;
    }

    header .meganav .souscateg_content {
        width: 100%;
        flex-direction: column;
        align-items: end;
    }

    header .meganav .souscateg_content .seeall,
    header .meganav .souscateg_content ul,
    header .meganav .souscateg_content ul:first-child,
    header .meganav .souscateg_content ul:nth-child(2) {
        margin-left: 10px;
    }

    header .meganav .souscateg_content ul {
        margin-top: 15px;
        width: 100%;
    }

    header .meganav .souscateg_content ul:first-child {
        margin-top: 0;
    }

    header .meganav .souscateg_content .titre_souscateg.active::after {
        content: '-';
    }

    header .meganav .souscateg_content > ul:not(:nth-child(2)) li:not(.titre_souscateg) {
        display: none;
    }

    header .bottom_mb .social {
        border-top: 1px solid #d0cfcf;
    }

    #doofindercontainer .df-classic {
        left: 0 !important;
        margin-left: 0 !important;
    }

    #doofindercontainer .df-classic .df-results li .description {
        width: 185px;
    }

    /****************************/
    /*          FOOTER          */
    /****************************/
    footer .informations {
        justify-content: center;
    }

    footer .informations ul .title.plus::after {
        content: '+';
        position: absolute;
        font-size: 30px;
        top: 0;
        right: 0;
        font-weight: 100;
    }

    footer .informations ul .title.active::after {
        content: '-';
    }

    footer .informations ul {
        border-bottom: 1px solid #E8AF98;
        padding: 10px 0;
    }

    footer .informations ul .title {
        margin: 10px 0;
    }

    /******************************/
    /*          HOMEPAGE          */
    /******************************/
    .homepage .slider_hp .text {
        font-size: 10vw;
        line-height: 14vw;
    }

    .bandeau_presentation .text {
        width: 95%;
    }

    .homepage .beautyathome .bloc {
        background-position: center center;
        background-size: auto 100%;
    }

    .homepage .beautyathome .bloc {
        background-position: center center;
        background-size: auto 100%;
    }

    .nouvel_imaginaire .flexbox {
        flex-direction: column;
    }

    .nouvel_imaginaire .content_philosophie,
    .nouvel_imaginaire .philosophie {
        height: 90vh;
        width: 100%;
    }

    .nouvel_imaginaire .carre {
        width: 100%;
    }

    .nouvel_imaginaire .philosophie .txt_philo {
        margin-top: 59vh;
    }

    .nouvel_imaginaire .philosophie .discover {
        margin-top: 12vh;
    }

    .nouvel_imaginaire .carre li {
        width: 47%;
    }

    .nouvel_imaginaire .carre li:nth-child(2),
    .nouvel_imaginaire .carre li:nth-child(4) {
        margin-left: 5%;
    }

    .nouvel_imaginaire .transparence img {
        width: 85%;
    }


    .transparence.bg_pink img {
        width: 100%;
    }

    .excellence .visuel .textblock {
        width: 95%;
        padding: 25px 20px;
    }

    .chic_blog .flexbox {
        flex-direction: column;
    }

    .chic_blog .article {
        width: 90%;
        margin-left: 5%;
        text-align: left !important;
    }
    .chic_blog .article:nth-child(2),
    .chic_blog .article:nth-child(4) {
        text-align: right !important;
    }

    .chic_blog .article a {
        align-items: start;
    }

    .chic_blog .article:nth-child(4) a {
        align-items: end;
    }

    .chic_blog .article .name {
        position: relative;
        width: 100%;
        text-align: right;
        box-sizing: border-box;
        left: 0 !important;
        top: 0 !important;
        margin-top: 0 !important;
    }

    .chic_blog .article .text {
        width: 100%;
        padding: 0;
        font-size: 4vw;
        line-height: 6vw;
        margin-top: 14px;
        text-align: left;
        height: auto;
    }

    .chic_blog .article:not(:first-child) {
        margin-top: 40px;
    }

    .chic_blog .article.flexbox-mb {
        align-items: flex-start;
        flex-direction: column;
    }

    .allProducts .sliderNav {
        width: 95%;
    }

    .allProducts .soulignonglet {
        left: 4vw;
    }

    .homepage .allProducts .bx-pager {
        display: none;
    }

    .allProducts .sliderNav p {
        font-size: 4vw;
    }

    .allProducts .product{
        width: 45vw!important;
    }

    .reseaux_sociaux .theme_title {
        font-size: 6vw;
    }


    .instafeed li {
        width: 50%;
        height: 50vw;
    }

    /***************************************/
    /*          PRODUCT / PRODUIT          */
    /***************************************/
    .visuelhover {
        display: none;
    }

    .pagesearch .listproducts li {
        width: 50%;
        height: unset;
    }

    .pagesearch .contentlist section {
        width: 100%;
    }

    .listproducts .product .visuel {
        width: 70%;
    }

    .product {
        width: 100%;
    }

    .product .gamme {
        font-size: 4vw;
    }

    .product .nom {
        font-size: 4.5vw;
        height: 10vw;
    }

    .product .prix {
        font-size: 4vw;
    }

    .product .visuel {
        width: 60%;
    }

    .product .visuelhover {
        display: none;
    }

    .product .decouvrir {
        font-size: 4vw;
    }

    .content_slider_product li {
        width: 48vw;
        margin-right: 0;
    }

    .allProducts .bx-wrapper .bx-controls-direction .bx-prev {
        left: 0;
    }

    .allProducts .bx-wrapper .bx-controls-direction .bx-next {
        right: 0;
    }

    .bloc_elements .head {
        margin: auto;
        height: 8vh;
    }

    .slider_elements li {
        width: 35px;
        margin-left: 20px;
    }

    .bloc_elements .box_element .visuel1 {
        margin-left: -20%;
    }

    .bloc_elements .box_element .droite .bloc3 p {
        top: 15px;
        left: 2.5%;
        width: 95%;
    }

    /******************************************************/
    /*          PAGES CATEGORIES / SOUS CATEGORIES        */
    /******************************************************/
    .headband .intro {
        padding: 0;
    }

    .contentlist.subcategory section {
        width: 100%;
    }

    .listproducts .product a[class^="cta-"] {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 4vw;
    }

    .contentlist section {
        width: 100%;
    }

    .contentlist section .headtris {
        border-top: 1px solid #E5E5E5;
        border-bottom: 1px solid #E5E5E5;
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
        justify-content: center;
        align-items: center;
    }

    .contentlist section .headtris .onglet_categories,
    .contentlist section .headtris .onglet_tri {
        width: 49%;
        text-align: center;
        padding: 15px 0;
        text-transform: uppercase;
        font-size: 4vw;
    }

    .contentlist section .headtris .onglet_tri {
        border-left: 1px solid #E5E5E5;
        position: relative;
    }

    .contentlist section .headtris select {
        text-indent: 25%;
        width: 100%;
        font-size: 4vw;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .contentlist nav {
        position: fixed;
        width: 80%;
        top: 0;
        right: -100%;
        margin: 0;
        background-color: #fff;
        z-index: 10;
        transition: 0.3s;
        height: 100%;
    }

    .contentlist nav .overflow-categ {
        overflow-y: scroll;
        height: 100%;
    }

    .contentlist nav.active {
        right: 0;
    }

    .contentlist nav .bordertitle {
        padding: 23px 0 20px 10px;
    }

    .contentlist nav h3,
    .contentlist nav ul {
        padding: 0 10px;
    }

    .contentlist nav h3 {
        margin: 0;
    }

    .contentlist nav .close {
        color: #fff;
        font-size: 40px;
        position: absolute;
        left: 0;
        top: 0;
        margin-left: -20vw;
        background-color: #000;
        width: 20vw;
        text-align: center;
        padding: 10px 0;
    }

    /************************************/
    /*          PAGE CONNEXION          */
    /************************************/
    .register .content_register {
        background-image: none;
    }

    .register .head .connexion span {
        border: none;
        padding: 0;
    }

    .register .bloc_formulaires {
        width: 100%;
        height: unset;
        background: none;
    }

    .register p.connexion.active:after,
    .register p.inscription.active:after {
        margin: 20px auto 0;
    }

    /***********************************/
    /*          COMPTE CLIENT          */
    /***********************************/
    .account_left {
        width: 100%;
    }

    .account .dashboard li.active {
        border-left: none;
    }

    .account .dashboard li a {
        font-size: 5vw;
        display: block;
        padding: 15px 5px;
    }

    .account .all_points {
        flex-direction: column;
    }

    .account .all_points .carre,
    .account .notauthentified .all_points .carre {
        width: 100%;
    }

    .account .all_points .carre .points_count {
        top: 24vh;
    }

    .account .history .detailsOrder {
        padding: 20px 5%;
    }

    .account .history .detailsOrder li {
        width: 33%;
    }

    .dashboard_g, .dashboard {
        width: 100%;
    }

    .dashboard {
        transition: 0.4s;
        margin-left: -100%;
        height: 0;
    }

    .dashboard.active {
        margin-left: 0;
        height: unset;
    }

    .account_left {
        transition: 0.4s;
    }

    .account {
        position: relative;
    }

    /****************************/
    /*          TUNNEL          */
    /****************************/
    .basket_g,
    .basket_d,
    .basket_d .basket_recap {
        width: 100%;
    }

    .basket_steps .step_number {
        width: 30px;
        height: 30px;
        font-size: 17px;
        line-height: 24px;
    }

    .basket_confirm .content920 {
        padding-bottom: 90px;
    }

    .basket_confirm .logo-signature {
        margin-top: 50px;
    }

    .product_line {
        padding: 10px 2.5%;
    }

    .product_line .changeQty {
        width: 100%;
        padding: 10px 0;
    }

    .product_line .changeQty input {
        width: 30px;
        font-size: 15px;
    }

    .product_line .changeQty .lessqty,
    .product_line .changeQty .moreqty {
        font-size: 15px;
    }

    .product_line .textblock {
        width: 60%;
    }

    .product_line .visuel_produit {
        width: 35%;
    }

    .samples .hidemb {
        display: none;
    }

    .f_voucher input,
    .f_fidelity input {
        width: 55% !important;
        height: 40px !important;
    }

    .f_voucher .addVoucher,
    .f_fidelity .addVoucher {
        line-height: 25px;
    }

    .f_fidelity .addVoucher {
        width: 40%;
        padding: 7px 0;
    }

    .onglets .onglet {
        width: 95%;
    }

    .form-container {
        display: initial;
        width: 100%;
        box-sizing: border-box;
        padding: 0 2.5%;
        float: none;
    }

    .content_card label {
        font-size: 3vw;
    }

    .field-container {
        margin-top: 10px;
    }

    .content_card .container {
        width: 95%;
        margin: 0 auto;
        float: none;
    }
    .content_paypal{
        display: none !important;
    }

    /************************************/
    /*          PAGE DE MARQUE          */
    /************************************/
    .pagemarque .heritage .textblock,
    .pagemarque .science .textblock,
    .pagemarque .expertise .textblock,
    .pagemarque .rigueur .textblock {
        width: 100%;
    }

    .pagemarque .heritage .textblock,
    .pagemarque .expertise .textblock {
        left: 0;
    }

    .pagemarque .danslemonde .textblock {
        padding: 30px 20px;
    }

    /*********************************/
    /*         BEAUTY AT HOME        */
    /*********************************/
    .beautyathome .intro .textblock {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }

    .beautyathome .line:nth-child(odd) .textblock {
        padding-right: 0;
    }

    .beautyathome .line:nth-child(even) .textblock {
        padding-left: 0;
    }

    .beautyathome .contentCoaching ul {
        height: unset;
    }

    .beautyathome .contentCoaching li {
        width: 100%;
        margin-top: 50px;
    }

    .beautyathome .contentCoaching li:first-child {
        margin-top: 0;
    }

    .beautyathome .coachingbeaute .contentvideo iframe {
        margin-top: 40px;
    }

    /*******************************/
    /*         PAGE PRODUIT        */
    /*******************************/
    .productpage .beautyathome .titre_soulignpink:after {
        position: static;
    }

    .productpage .conseils {
        background-image: none !important;
    }

    /********************************/
    /*          PAGE GAMME          */
    /********************************/
    .pagegamme .head .visuel .bgGamme{
        height: 10px;
        margin-top: -10px;
    }
    .pagegamme .head .pictoElement {
        width: 30%;
    }

    .pagegamme .description {
        width: 100%;
    }

    .pagegamme .product:not(:first-child) {
        margin-top: 20px;
    }

    .pagegamme .product {
        width: 100%;
        padding: 0;
    }

    .pagegamme .allproducts .product.plv img {
        width: 100%;
        margin-left:0;
    }

    /*******************************/
    /*           CONTACT           */
    /*******************************/
    .contact .box {
        width: 100%;
        box-sizing: border-box;
    }

    /*******************************/
    /*           FAQ           */
    /*******************************/
    .h2_services {
        width: 70%;
    }

    .faq .thematique {
        width: 90%;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .faq .main-thematique {
        display: block;

    }

    .faq .thematique:not(:last-child) {
        margin-bottom: 20px;
    }

    /***************************************/
    /*           GROUPE PANTHER            */
    /***************************************/
    .groupe_panther img {
        width: 100%;
    }

    .groupe_panther .img-item img {
        width: 60%;
        margin: 40px auto;
    }

    /***********************************/
    /*           NOS ACTIFS            */
    /***********************************/
    .nosactifs .actif_element {
        margin-left: 0;
        margin-top: 20px;
    }

    .nosactifs .actif_element,
    .nosactifs .actif_element img {
        width: 100%;
    }

    /***************************************/
    /*           OU NOUS TROUVER           */
    /***************************************/
    .ounoustrouver .map-content .gauche {
        width: 100%;
        height: unset;
    }

    .ounoustrouver .map-content .droite {
        display: none;
    }

    .ounoustrouver .recherche .searchbar {
        width: 70%;
    }

    .ounoustrouver .recherche input {
        width: 100%;
    }

    .ounoustrouver .recherche .cta-grey {
        margin-left: 3%;
        width: 26%;
    }

    /*******************************************/
    /*           ESPACE DISTRIBUTEUR           */
    /*******************************************/
    .distributeurs .mag-slider .bx-wrapper,
    .distributeurs .mag-slider .bx-viewport,
    .distributeurs .bxslideremag li {
        width: 100vw !important;
    }

    .distributeurs .bxslideremag li img {
        margin: auto;
    }

    .distributeurs .bx-wrapper .bx-controls-direction .bx-prev {
        left: 0;
    }

    .distributeurs .bx-wrapper .bx-controls-direction .bx-next {
        right: 0;
    }

    .distributeurs .container .onglet {
        font-size: 4vw;
        word-break: break-word;
    }

    .distributeurs .inside .block {
        width: 47%;
        margin-left: 0;
        margin-right: 0;
    }

    .distributeurs .inside .block:nth-child(even) {
        margin-left: 4%;
    }


    /**********************************/
    /*          PAGES ACTIFS          */
    /**********************************/
    .actif_page .benefices img {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .actif_page .benefices .textblock {
        margin-left: 0;
        margin-top: 20px;
        padding: 0 2.5%;
    }

    .actif_page .content_slider_product .bx-wrapper .bx-prev {
        left: 0;
        top: 80px;
    }

    .actif_page .content_slider_product .bx-wrapper .bx-prev {
        left: 0;
        top: 50%;
    }

    .actif_page .content_slider_product .bx-wrapper .bx-next {
        right: 0;
        top: 50%;
    }

    .actif_page .content_selection .bx-wrapper .bx-prev,
    .actif_page .content_selection .bx-wrapper .bx-next {
        top: 25%;
    }

    .pop_fidelity .box {
        height: 90vh !important;
    }

    .cnil {
        padding: 25px 0;
        font-size: 11.50px;
    }

    .cnil .content {
        width: 91.5%;
    }
}

@media screen and (max-width: 700px) {
    .f3vw-mb {
        font-size: 3vw;
    }

    .f3-5vw-mb {
        font-size: 3.5vw;
    }

    .f4vw-mb {
        font-size: 4vw;
    }

    .f4-5vw-mb {
        font-size: 4.5vw;
    }

    .f5vw-mb {
        font-size: 5vw;
    }

    .f6vw-mb {
        font-size: 6vw;
    }

    .f7vw-mb {
        font-size: 7vw;
    }

    .f8vw-mb {
        font-size: 8vw;
    }

    .f9vw-mb {
        font-size: 9vw;
    }

    .f12vw-mb {
        font-size: 12vw;
    }

    .lh4vw-mb {
        line-height: 4vw;
    }

    .lh5vw-mb {
        line-height: 5vw;
    }

    .lh6vw-mb {
        line-height: 6vw;
    }

    .lh7vw-mb {
        line-height: 7vw;
    }

    .lh8vw-mb {
        line-height: 8vw;
    }

    .lh9vw-mb {
        line-height: 9vw;
    }

    .lh11vw-mb {
        line-height: 11vw;
    }

    .lh12vw-mb {
        line-height: 12vw;
    }


    .bloc_elements .head .slider_elements li:nth-of-type(1) img,
    .bloc_elements .head .slider_elements li:nth-of-type(5) img {
        width: 60%;
    }

    .bloc_elements .head .slider_elements li:nth-of-type(2) img,
    .bloc_elements .head .slider_elements li:nth-of-type(4) img {
        width: 70%;
    }

    .bloc_elements .head .slider_elements li:nth-of-type(3) img {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .mt-0-t {
        margin-top: 0;
    }

    .f2vw-t {
        font-size: 2vw !important;
    }

    .f3vw-t {
        font-size: 3vw !important;
    }

    .f3-5vw-t {
        font-size: 3.5vw !important;
    }

    .f4vw-t {
        font-size: 4vw !important;
    }

    .f5vw-t {
        font-size: 5vw !important;
    }

    .f6vw-t {
        font-size: 6vw !important;
    }

    .f7vw-t {
        font-size: 7vw !important;
    }

    .lh3vw-t {
        line-height: 3vw !important;
    }

    .lh4vw-t {
        line-height: 4vw !important;
    }

    .lh5vw-t {
        line-height: 5vw !important;
    }

    .w10pc-t {
        width: 10%;
    }

    .w20pc-t {
        width: 20%;
    }

    .w30pc-t {
        width: 30%;
    }

    .w40pc-t {
        width: 40%;
    }

    .w50pc-t {
        width: 50%;
    }

    .w60pc-t {
        width: 60%;
    }

    .w70pc-t {
        width: 70%;
    }

    .w80pc-t {
        width: 80%;
    }

    .w90pc-t {
        width: 90%;
    }

    .w100pc-t {
        width: 100%;
    }

    .marginauto-t {
        margin-left: auto;
        margin-right: auto;
    }

    .displayblock-t {
        display: block;
    }

    footer .logo {
        width: 100%;
        text-align: center;
    }

    .theme_title {
        font-size: 4vw;
    }

    .nouvel_imaginaire .philosophie .discover {
        margin-top: 10vh;
    }

    .excellence .visuel .textblock {
        width: 60%;
    }

    .chic_blog .logo_chic {
        width: 50vw;
    }

    .account .notauthentified .programme .textblock {
        max-width: none;
        width: 100%;
    }

    .account .all_points {
        flex-direction: row;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /************************************/
    /*          PAGE DE MARQUE          */
    /************************************/
    .pagemarque {
        padding: 0 2.5%;
    }

    .pagemarque .marque img,
    .pagemarque .heritage img,
    .pagemarque .science img,
    .pagemarque .expertise img,
    .pagemarque .rigueur img {
        max-width: 420px;
    }

    .pagemarque .heritage .textblock,
    .pagemarque .science .textblock,
    .pagemarque .expertise .textblock,
    .pagemarque .rigueur .textblock {
        max-width: 545px;
    }
}


/*-----------------------------------------------------------------------*/
/*Où nous trouver*/
/*-----------------------------------------------------------------------*/
.storelocator .page-title{
    font-family: "AmericanTypewriter";
    font-size: 30px;
    line-height: 34px;
    letter-spacing: 1.8px;
    color: #1E1E1E;
    text-align: center;
    margin-top: 80px;
}
.storelocator .subtitle{
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: #212121;
    text-align: center;
    margin-top: 10px;
    display: block;
}
.storelocator .map{
    height: 700px;
}
.storelocator .content-map{
    position: relative;
    width: 100%;
    transition: .5s;
}
.storelocator .f_searchaddress{
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.storelocator .f_searchaddress .geoloc{
    cursor:pointer;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F3E3DD;
}
.storelocator .f_searchaddress input{
    width: 570px;
    background-color: #fff;
    height: 50px;
    padding: 20px 30px;
    box-sizing: border-box;
    transition: .5s;
}
.storelocator .f_searchaddress .btn-submit{
    width: 160px;
    height: 50px;
}
.storelocator .gm-style .gm-style-iw-c {
    border-radius: 3px;
    padding: 15px 10px;
    box-sizing: border-box;
}
.storelocator .gm-style .gm-style-iw-t::after {
    display: none;
}
.storelocator .content-pop {
    text-align: center;
}
.storelocator .content-pop .text1{
    display: block;
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.storelocator .content-pop .text1b{
    margin-top: 20px;
}
.storelocator .content-pop .text2{
    display: block;
    font-size: 13px;
    line-height: 14px;
    letter-spacing: 0.5px;
    margin-top: 10px;
}
.storelocator .content-locator{
    display: flex;
    margin: 30px 0;
    height: 700px;
    overflow: hidden;
}
.storelocator .content-locator.stores-active > div{
    width: 50%;
}
.storelocator .content-locator .stores-list{
    width: 100%;
    margin-left: -100%;
    transition: .5s;
}
.storelocator .content-locator.stores-active .stores-list{
    margin-left: 0;
    position: relative;
}

.storelocator .content-locator.stores-active .stores-list .close-thin{
    position: absolute;
    right: 13px;
    top: 13px;
    color: #4B4853;
    font-size: 30px;
}

.storelocator{
    margin-top: 80px;
}

.storelocator .content-locator.stores-active .stores-list{
    margin-left: 0;
}
.storelocator .content-locator.stores-active .f_searchaddress input{
    width: 340px;
}
.storelocator .stores-list {
    background-color: #F3E3DD;
}
.storelocator .stores-list .results {
    padding: 20px;
    font-size: 13px;
    line-height: 15px;
    letter-spacing: 0.35px;
    display: block;
    border-bottom: 1px solid #F1D3CB;
}
.storelocator .stores-list .list {
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 56px);
    overflow-y: scroll;
}
.storelocator .stores-list .list li {
    width: 50%;
    box-sizing: border-box;
    padding: 30px 40px;
    text-align: center;
    border-bottom: 2px solid #F1D3CB;
}
.storelocator .stores-list .list li:nth-child(odd) {
    border-right: 2px solid #F1D3CB;
}
.storelocator .stores-list .list .distance{
    font-size: 11px;
    font-weight: 700;
    color: #E86464;
    letter-spacing: 0.3px;
    display: block;
    margin-top: 10px;
}
.storelocator .stores-list .list .name{
    font-size: 13px;
    line-height: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: block;
    margin-top: 15px;
}
.storelocator .stores-list .list .address{
    font-size: 13px;
    line-height: 18px;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 15px;
}
.storelocator .stores-list .list .complements{
    font-size: 13px;
    letter-spacing: 0.5px;
    display: block;
    line-height: 15px;
}
.storelocator .stores-list .list .complements::first-letter{
    text-transform: uppercase;
}

.storelocator .stores-list .list .btn-details{
    display: block;
    margin-top: 25px;
    background-color: #4B4853;
}

@media screen and (max-width: 1024px){
    .storelocator .page-title{
        font-size: 21px;
        line-height: 23px;
        padding: 0 10px;
    }
    .storelocator .subtitle{
        font-size: 14px;
        line-height: 19px;
        padding: 0 10px;
    }
    .storelocator .content-locator{
        flex-direction: column-reverse;
        height: auto;
    }
    .storelocator .map{
        width: 100%;
        height: 600px;
    }
    .storelocator .content-locator > div{
        width: 100% !important;
    }
    .storelocator .f_searchaddress{
        position: static;
        width: 100%;
        margin: auto;
        box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1);
    }
    .storelocator .f_searchaddress .btn-submit{
        width: 90px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .storelocator .f_searchaddress input{
        width: calc(100% - 140px);
        padding: 15px 10px;
    }
    .storelocator .stores-list{
        margin-top: 60px;
    }
}
@media screen and (max-width: 768px){
    .storelocator .stores-list .list li{
        width: 100%;
    }
    .storelocator .stores-list .list li:nth-child(odd){
        border-right: 0;
    }
}

.bck-pink {
    background-color: #f3e4dd;
}

.bck-pink.sample {
    padding: 15px;
    text-align: center;
}