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
{
    font: inherit;
    font-size: 100%;

    margin: 0;
    padding: 0;

    vertical-align: baseline;

    border: 0;
}

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
{
    content: '';
    content: none;
}

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

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

html
{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

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

a
{
    text-decoration: none;

    color: black;
}

a:hover,
a:focus
{
    text-decoration: none;

    color: grey;
}

.clear
{
    float: none;
    clear: both;
}

::-moz-selection
{
    background: #fff;
}

::selection
{
    background: #fff;
}

::-moz-selection
{
    background: #fff;
}

input::-moz-selection
{
    color: white;
    background: #3bdbcf;
}

input::selection
{
    color: white;
    background: #3bdbcf;
}

input::-moz-selection
{
    color: white;
    background: #3bdbcf;
}

@-webkit-keyframes tween-fade
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@keyframes tween-fade
{
    0%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 1;
    }
}

@-webkit-keyframes tween-fade-out
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@keyframes tween-fade-out
{
    0%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
    }
}

@-webkit-keyframes tween-flash
{
    0%
    {
        background-color: rgba(255, 255, 255, .8);
    }
    61%
    {
        background-color: #fff;
    }
    62%
    {
        background-color: rgba(255, 255, 255, 0);
    }
    63%
    {
        background-color: rgba(255, 255, 255, .7);
    }
    68%
    {
        background-color: rgba(255, 255, 255, .8);
    }
    71%
    {
        background-color: rgba(255, 255, 255, .7);
    }
    100%
    {
        background-color: rgba(255, 255, 255, .8);
    }
}

@keyframes tween-flash
{
    0%
    {
        background-color: rgba(255, 255, 255, .8);
    }
    61%
    {
        background-color: #fff;
    }
    62%
    {
        background-color: rgba(255, 255, 255, 0);
    }
    63%
    {
        background-color: rgba(255, 255, 255, .7);
    }
    68%
    {
        background-color: rgba(255, 255, 255, .8);
    }
    71%
    {
        background-color: rgba(255, 255, 255, .7);
    }
    100%
    {
        background-color: rgba(255, 255, 255, .8);
    }
}

@-webkit-keyframes tween-bg
{
    0%
    {
        background-position: 50% -50%;
    }
    100%
    {
        background-position: 50% 100%;
    }
}

@keyframes tween-bg
{
    0%
    {
        background-position: 50% -50%;
    }
    100%
    {
        background-position: 50% 100%;
    }
}

@-webkit-keyframes tween-in
{
    0%
    {
        transform: translate(0px, 20%);

        opacity: 0;
    }
    100%
    {
        transform: translate(0px, 0%);

        opacity: 1;
    }
}

@keyframes tween-in
{
    0%
    {
        transform: translate(0px, 20%);

        opacity: 0;
    }

    100%
    {
        transform: translate(0px, 0%);

        opacity: 1;
    }
}

@-webkit-keyframes tween-zen
{
    0%
    {
        opacity: 1;
    }

    30%
    {
        opacity: .9;
    }

    100%
    {
        opacity: 1;
    }
}

@keyframes tween-zen
{
    0%
    {
        opacity: 1;
    }

    30%
    {
        opacity: .9;
    }

    100%
    {
        opacity: 1;
    }
}

.top-nav:after
{
    background-color: transparent;
    background-image: linear-gradient(to top, rgba(65, 64, 66, 0), rgba(65, 64, 66, .2));
}

.qui_sommes_nous .c-equipe:after
{
    background-color: transparent;
    background-image: linear-gradient(to top, #942c61, rgba(148, 44, 97, 0));
}

.qui_sommes_nous .c-item p
{
    background-color: transparent;
    background-image: linear-gradient(to top, #414042, rgba(65, 64, 66, .8));
}

body,
html
{
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-size: 1vw;
    line-height: 1.5em;

    overflow: hidden;
    overflow-x: hidden;

    margin: 0;
    padding: 0;

    color: #414042;
    background-color: #fff;
}

html
{
    overflow: auto;
}

a
{
    font-family: 'Cabin', sans-serif !important;
}

p
{
    font-family: 'Arial', 'Tahoma' !important;
    font-size: 1rem;
    line-height: 1.2rem;
}

h1
{
    font-family: 'Crimson Text', serif !important;
    font-size: 4rem;
    font-style: italic;
    line-height: 4.1rem;

    color: #414042;
}

h2
{
    font-family: 'Cabin', sans-serif !important;
    font-size: 1.3rem;
    line-height: 1.8rem;

    color: #942c61;
}

h3
{
    font-family: 'Cabin', sans-serif !important;
    font-size: 1.3rem;
    line-height: 1.8rem;
}

@-webkit-keyframes scroll
{
    0%
    {
        transform: translate(0px, 0%);
    }
    60%
    {
        transform: translate(0px, -20%);
    }
    100%
    {
        transform: translate(0px, 0%);
    }
}

@keyframes scroll
{
    0%
    {
        transform: translate(0px, 0%);
    }
    60%
    {
        transform: translate(0px, -20%);
    }
    100%
    {
        transform: translate(0px, 0%);
    }
}

.page
{
    min-height: 72.2vh;
}

.hide
{
    display: none;
}

.hide-vraiment
{
    display: none;
}

header
{
    position: relative;

    padding-top: 9rem;
    padding-bottom: 3rem;
    -webkit-animation: tween-zen 4s ease-in-out 24;
            animation: tween-zen 4s ease-in-out 24;
    text-align: center;

    background-color: #fff;
}

header:hover
{
    opacity: .9;
}

section
{
    padding: 5rem;
}

section .message
{
    font-size: 1rem;
    line-height: 1.2rem;

    position: absolute;
    top: -6.5rem;

    display: block;

    width: 100%;
    padding: 1rem;

    color: black;
    border-radius: .5rem;
    background-color: #fff;
}

section .message.has-error
{
    color: #ea394e;
    border-bottom: 2px solid #ea394e !important;
}

section .message.has-succes
{
    color: #60bb46;
    border-bottom: 2px solid #60bb46 !important;
}

section .message.kill
{
    -webkit-animation: tween-fade-out 1s ease-out;
            animation: tween-fade-out 1s ease-out;

    -webkit-animation-fill-mode: forwards;

            animation-fill-mode: forwards;
}

section .c-in
{
    position: relative;

    display: block;

    width: 100%;
    max-width: 1200px;
    margin: 0rem auto;
}

section .cristal
{
    padding-bottom: 1rem;
}

.type-page
{
    margin-top: 27vh;
    margin-bottom: 0;
    padding-top: 3rem;

    background-color: #942c61;
}

.type-page:hover,
.type-page:focus
{
    opacity: .9;
}

.type-page h1
{
    display: inline-block;

    vertical-align: middle;

    color: white;
}

.type-page .picto
{
    display: inline-block;

    width: 9rem;
    height: 9rem;
    margin-right: 2rem;

    vertical-align: middle;

    border: .3rem solid white;
    border-radius: 50%;
}

.rose
{
    color: white;
    background-color: #942c61;
}

.rose h1
{
    color: white;
}

.cristal
{
    text-align: center;

    color: #942c61;
    background-color: rgba(230, 231, 232, .9);
}

.cristal h1
{
    color: #414042;
}

.dark
{
    padding: 0rem;

    text-align: center;

    color: #e6e7e8;
    background-color: rgba(65, 64, 66, .9);
}

.dark h1
{
    color: white;
}

footer
{
    padding: 1.5rem;

    text-align: center;

    background-color: #414042;
}

footer a
{
    font-size: .8rem;
    line-height: 1rem;

    display: inline-block;

    margin: 1rem;
    padding-left: 1.3rem;

    vertical-align: middle;

    color: white;
}

footer .img-center a {
    margin: 0;
    padding: 0;
}

footer .cc
{
    background-image: url(../imgs/pictos/footer/c.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 1rem;
}

footer .partner {
    height: 60px;
}

footer .mentions
{
    background-image: url(../imgs/pictos/footer/mentions.svg);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 1rem;
}

.page-deco header .picto
{
    background-image: url(../imgs/pictos/deco.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 6rem;
}

form span
{
    display: inline-block;

    vertical-align: middle;
}

form p
{
    font-size: .8rem;

    width: 100%;
    padding-bottom: .8rem;

    color: #414042;
    border-bottom: 1px solid #414042;
}

.error,
input[type='email'].has-error,
input[type='number'].has-error,
input[type='tel'].has-error,
input[type='password'].has-error,
input[type='text'].has-error,
textarea.has-error,
select.has-error
{
    border-bottom: 2px solid #ea394e !important;
}

input[type='email'],
input[type='number'],
input[type='tel'],
input[type='password'],
input[type='text'],
textarea,
select
{
    font-weight: bold;
    font-style: italic;

    display: inline-block;

    width: 14rem;
    padding: 1.2rem 1.5rem;

    vertical-align: middle;

    color: #942c61;
    border: none;
    border-radius: .5rem;
    outline: none;
    background-color: #fff;
    transition: all 100ms linear;
    -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type='email']:focus,
input[type='number']:focus,
input[type='tel']:focus,
input[type='password']:focus,
input[type='text']:focus,
textarea:focus,
select:focus
{
  box-shadow: 0 0 2px 1px #942c61;
}
textarea
{
    overflow: hidden;

    height: 6rem;
}

label
{
    font-family: 'Crimson Text';
    font-size: 2rem;

    position: relative;

    display: inline-block;

    padding: .5rem;

    vertical-align: middle;

    color: #414042;
}

.c-item-filtre
{
    display: inline-block;

    width: auto;

    vertical-align: middle;
}

input[type='checkbox'] ~ label
{
    cursor: pointer;
}

input[type='checkbox'] ~ label:before
{
    position: absolute;
    top: .2rem;
    left: -2.5rem;

    display: block;

    width: 2rem;
    height: 2rem;

    content: '';
    cursor: pointer;
    transition: background-position .1s ease-out;

    border-radius: .5rem;
    background-color: white;
    background-position: 50% -100%;
}
input[type='checkbox'] ~ label:hover:before,
input[type='checkbox']:focus ~ label:before
{
  box-shadow: inset 0 0 2px 1px #942c61;
}
input[type='checkbox']:checked ~ label:before
{
    background-image: url(../imgs/pictos/rose/cb.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 1.2rem;
}

input[type='checkbox']
{
    position: relative;
    z-index: 2;

    display: inline-block;

    width: 2rem;
    height: 2rem;

    cursor: pointer;
    vertical-align: middle;

            opacity: 0;
}

input[type='checkbox'] + label
{
    padding-left: 0;
}

.lcb
{
    font-family: 'Arial';
    font-size: 1rem;
    font-weight: normal;

    padding-left: 0;
}

.mail-mess
{
    font-size: .8rem;
}

#inscrivez-vous .mail-mess {
    padding-bottom: 5px;
}

.mail-mess .sep
{
    display: inline-block;

    width: .1rem;
    margin: 0rem 1rem;

    text-align: center;
}

.mess
{
    font-size: .8rem;
}

.c-col
{
    display: inline-block;

    width: 38%;

    text-align: left;
    vertical-align: bottom;
}

.c-col .c-item-form
{
    width: 100%;
    padding: .5rem;
}

.c-col:first-child
{
    width: 60%;
    padding-right: 3rem;

    text-align: right;
}

.c-col:first-child .c-item-form
{
    margin-bottom: 1rem;
}

.c-col:first-child .c-item-form:last-child
{
    margin-bottom: 0rem;
    padding-bottom: 0rem;
}

input[type='submit'],
.cta
{
    font-family: 'Cabin';
    font-size: 1.3rem;
    line-height: 1.8rem;
    line-height: 3.5rem;

    position: relative;

    width: 100%;
    margin-top: .8rem;
    padding: .5rem 1.5rem;

    cursor: pointer;
    text-align: center;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .9);
    border: none;
    border-radius: .3rem;
    background-color: #942c61;

    -webkit-appearance: none;
}

input[type='submit']:hover,
input[type='submit']:focus,
.cta:hover,
.cta:focus
{
    color: white;
    background-color: #45152d;
}

.b-item,
.top-nav .page-nav,
.top-nav .rs-nav,
.logo
{
    display: inline-block;

    height: 100%;

    vertical-align: middle;
}

.bt-item,
.top-nav .page-nav li,
.top-nav .page-nav li a,
.top-nav .rs-nav li,
.top-nav .rs-nav li a
{
    display: inline-block;

    height: 100%;

    text-transform: uppercase;
}

.p-item,
.top-nav .page-nav li a .picto
{
    display: block;

    width: 3rem;
    height: 3rem;
    margin: .5rem auto;

    border: 1px solid #942c61;
    border-radius: 50%;
    background-color: #942c61;
}

.concept .picto,
.deco .picto,
.inscription .picto,
.mon_compte .picto,
.le_blog .picto,
.mon_profil .picto,
.mes_devis .picto,
.mes_commandes .picto,
.contact,
.facebook,
.instagram,
.twitter
 {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 2.5rem;
}

.concept .picto
{
    background-image: url(../imgs/pictos/le_concept.svg);
    background-size: 2.2rem;
}

.deco .picto
{
    background-image: url(../imgs/pictos/deco.svg);
    background-size: 2.1rem;
}

.inscription .picto
{
    background-image: url(../imgs/pictos/inscription.svg);
}

.mon_compte .picto
{
    background-image: url(../imgs/pictos/mon_compte.svg);
}

.le_blog .picto
{
    background-image: url(../imgs/pictos/le_blog.svg);
}

.faq .picto
{
    color: #FFF;
    font-weight: bold;
    line-height: 3rem;
}
.evenements .picto 
{
    background-image: url(../imgs/pictos/knife-and-fork-silhouette.png), url(../imgs/pictos/rose/knife-and-fork-silhouette.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 60%;
}
.evenements:hover .picto,
.evenements:focus .picto
{
    background-image: url(../imgs/pictos/rose/knife-and-fork-silhouette.png);
}

.mon_profil .picto
{
    background-image: url(../imgs/pictos/mon_compte.svg);
}

.mes_devis .picto
{
    background-image: url(../imgs/pictos/mes_devis.svg);
}

.mes_commandes .picto
{
    background-image: url(../imgs/pictos/mes_commandes.svg);
}

.contact
{
    background-image: url(../imgs/pictos/contact.svg);
}

.facebook
{
    background-image: url(../imgs/pictos/facebook.svg);
}

.instagram
{
    background-image: url(../imgs/pictos/instagram.svg);
    background-size: 2.4em;
}

.twitter
{
    background-image: url(../imgs/pictos/twitter.svg);
}

.top-nav
{
    position: fixed;
    z-index: 10;
    top: 0;

    display: block;

    width: 100%;
    height: 6rem;

    background-color: #fff;
}

.top-nav:after
{
    position: relative;

    display: block;

    width: 100%;
    height: .8rem;

    content: '';
}

.top-nav .page-nav
{
    font-size: 0;

    width: 59%;

    text-align: center;
}

.top-nav .page-nav li
{
    font-size: .6rem;
    line-height: 1.2rem;
}

.top-nav .page-nav li a
{
    padding: 0rem 1.2rem;
}

.top-nav .mon_compte_nav
{
    width: 100%;

    background-color: #414042;
}

.top-nav .mon_compte_nav .page-nav
{
    width: 100%;
}

.top-nav .mon_compte_nav .page-nav li
{
    font-size: .8rem;
    line-height: 1rem;
}

.top-nav .mon_compte_nav .page-nav li a
{
    color: rgba(255, 255, 255, .8);
}

.top-nav .mon_compte_nav .page-nav li a .picto
{
    border-color: white;
    background-color: transparent;
}

.top-nav .mon_compte_nav .page-nav li a:hover,
.top-nav .mon_compte_nav .page-nav li a:focus
{
    color: white;
}

.top-nav .mon_compte_nav .page-nav li a:hover .picto,
.top-nav .mon_compte_nav .page-nav li a:focus .picto
{
    border-color: white;
    background-color: white;
}

.top-nav .dl_app
{
    font-size: .7rem;

    position: absolute;
    z-index: 2;
    top: 0;
    right: 20%;

    display: block;

    height: 7rem;
    padding: .5rem;
    padding-top: 0rem;

    color: white;
    border-top-left-radius: 0rem;
    border-top-right-radius: 0rem;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    background-color: #942c61;
}

.top-nav .dl_app .picto
{
    display: block;

    width: 100%;
    height: 5.5rem;

    background-image: url(../imgs/pictos/dl_app.svg);
    background-repeat: no-repeat;
    background-position: 50% -.9rem;
    background-size: 6.7rem;
}

.top-nav .dl_app .picto:after
{
    position: absolute;
    top: 0rem;
    left: 0rem;

    display: block;

    width: 100%;
    height: 5rem;

    content: '';

    background-image: url(../imgs/pictos/g.svg);
    background-repeat: no-repeat;
    background-position: 50% 40%;
    background-size: 4rem;
}

.top-nav .rs-nav
{
    font-size: 0;

    width: 20%;

    text-align: right;
}

.top-nav .rs-nav li
{
    font-size: .8rem;
    line-height: 1rem;
}

.top-nav .rs-nav li a
{
    width: 100%;

    color: rgba(255, 255, 255, 0);
    border: none;
    background-color: transparent;
}

.logo
{
    width: 20%;
    height: 100%;

    text-indent: -500px;

    background-image: url(../imgs/logo_petit.svg);
    background-repeat: no-repeat;
    background-position: 2rem 50%;
    background-size: 80%;
}

body,
body.bg_1,
body.bg_2,
body.bg_3 {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

body
{
    background-image: url(../imgs/bg_1_mobile.jpg);
    background-attachment: fixed;
}

body.bg_1
{
    background-image: url(../imgs/bg_1_mobile.jpg);
}

body.bg_2
{
    background-image: url(../imgs/bg_2_mobile.jpg);
}

body.bg_3
{
    background-image: url(../imgs/accueil_bg_mobile.png);
}

.page-accueil header .logo-img
{
    display: inline-block;

    height: 15vh;
}

.page-accueil header h2
{
    display: inline-block;

    margin-top: 10px;

    max-width: 29rem;
}

.page-accueil section .scan-img
{
    display: inline-block;

    height: 25vh;
}

.page-accueil section .c-in .c-txt p
{
    margin-bottom: 1rem;

    color: rgba(255, 255, 255, .7);
}

.le_bon_gustave_section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}

.le_bon_gustave_col {
    flex-basis: 30%;
}

.le_bon_gustave_col img {
    height: 50px;
}

.tester_le_concept
{
    position: relative;
    z-index: 3;

    overflow: hidden;

    margin-top: -0rem;
}

.tester_le_concept h1
{
    position: relative;
    top: 0rem;

    transition: all .3s ease-in-out;
    letter-spacing: .3rem;
}

.tester_le_concept img
{
    transition: all .5s ease-in-out;

    opacity: 1;
}

.tester_le_concept.cristal
{
    background-color: rgba(255, 255, 255, .8);
}

.testimonials {
    color: white;
    background-color: #3a3939;
    text-align: center;
}

.testimonials-quote {
    margin-bottom: 20px;
}

.testimonials-content {
    font-size: 1.2em;
    margin-bottom: 10px;
    line-height: 1.2em;
    font-style: italic;
}

.in-the-press {
    background-color: #fff;
}

.in-the-press h2 {
    font-family: 'Crimson Text', serif!important;
    font-size: 4em;
    font-style: italic;
    color: #414042;
    text-align: center;
    margin-bottom: 4rem;
}

.presses-icons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.presses-icons-container img {
    height: 60px;
    margin: 10px;
}

.qui_sommes_nous
{
    position: relative;

    padding: 0;
}

.qui_sommes_nous .c-in
{
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.qui_sommes_nous .c-in .c-txt
{
    width: 100%;
    padding: 5rem;

    text-align: center;

    background-color: #e6e7e8;
}

.qui_sommes_nous .c-in .c-txt h3
{
    margin-top: 2rem;
}

.qui_sommes_nous .c-in .c-txt p
{
    display: block;

    max-width: 40rem;
    margin: 0 auto;

    color: #414042!important;
}

.qui_sommes_nous .c-equipe
{
    position: relative;
    z-index: 3;

    width: 100%;
    padding: 5rem;
    padding-top: 50vh;
    padding-bottom: 0rem;

    text-align: center;

    background-color: #3a3939;
    background-image: url(../imgs/photo-equipe.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 0 0;
    background-size: cover;
}

.qui_sommes_nous .c-equipe:after
{
    position: absolute;
    z-index: 2;
    bottom: 0rem;
    left: 0rem;

    display: block;

    width: 100%;
    height: 80%;

    content: '';
    transition: opacity .2s ease-out;
    pointer-events: none;

            opacity: .9;
}

.qui_sommes_nous .c-item
{
    position: relative;
    z-index: 3;

    display: inline-block;

    width: 24%;
    padding: 1rem;
    padding-bottom: 0rem;

    vertical-align: bottom;
}

.c-equipe .nom
{
    font-family: 'Crimson Text';
    font-size: 4rem;
    font-style: italic;
    line-height: 4.1rem;

    color: white;
}

.qui_sommes_nous .c-item p
{
    font-family: 'Arial';
    font-size: 1rem;
    line-height: 1.2rem;

    padding: 2rem;
    padding-bottom: 4rem;

    color: white;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: 0rem;
    border-bottom-left-radius: 0rem;
}

.page-inscription header .picto,
.page-connexion header .picto,
.page-mon-profil header .picto,
.page-mes-devis header .picto {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 7rem;
}

.page-inscription header .picto
{
    background-image: url(../imgs/pictos/inscription.svg);
}

.page-connexion header .picto
{
    background-image: url(../imgs/pictos/mon_compte.svg);
}

.page-mon-profil header .picto
{
    background-image: url(../imgs/pictos/mon_compte.svg);
}

.page-mes-devis header .picto
{
    background-image: url(../imgs/pictos/mes_devis.svg);
}

.page-mon-profil section .c-in .c-col
{
    vertical-align: bottom;
}

.page-mon-profil section .c-in .c-col .c-item-form
{
    margin-bottom: 0rem;
    padding: .2rem;
}

.page-mes-devis section .c-in .c-col
{
    vertical-align: bottom;
}

.page-mes-devis section .c-in .c-col .c-item-form
{
    margin-bottom: 0rem;
    padding: .2rem;
}

.type-rouge,
.type-blanc,
.type-rose,
.type-bulle,
.type-melange {
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: contain;
}

.type-rouge
{
    background-image: url(../imgs/pictos/vins/vin_rouge.svg);
}

.type-blanc
{
    background-image: url(../imgs/pictos/vins/vin_blanc.svg);
}

.type-rose
{
    background-image: url(../imgs/pictos/vins/vin_rose.svg);
}

.type-bulle
{
    background-image: url(../imgs/pictos/vins/vin_bulle.svg);
}

.type-melange
{
    background-image: url(../imgs/pictos/vins/vin_melange.svg);
}

.c-grid
{
    margin-top: 1rem;
}

.c-grid ul
{
    font-size: 0;
}

.c-grid ul li
{
    font-size: 1rem;

    display: inline-block;

    width: 27%;
    padding: .5rem;

    vertical-align: top;
}

.c-vin
{
    padding: 1rem;

    border-radius: .5rem;
    background-color: white;
}

.c-vin .bouteille
{
    display: inline-block;

    width: 20%;
    height: 7rem;

    vertical-align: middle;

    background-color: transparent;
}

.c-vin .c-txt
{
    display: inline-block;

    width: 78%;

    vertical-align: middle;
}

.c-vin .nom,
.c-vin .lieu
{
    font-family: 'Cabin';
    font-size: 1.3rem;
    line-height: 1.8rem;
}

.c-vin .nom
{
    display: block;

    width: 100%;

    color: #414042;
}

.c-vin .lieu
{
    font-size: 1.2rem;
    line-height: 1.3rem;

    display: block;

    width: 100%;

    color: #942c61;
}

.c-slider
{
    width: 90%;
    max-width: 50rem;
    margin: 0 auto;
}

.c-slider .c-slide
{
    display: block;

    width: 100%;
    padding: 3rem 5rem;
}

.c-slider .c-vin
{
    width: 100%;
}

.c-slider .c-vin .type-photo
{
    width: 44%;
    height: 15rem;
    margin-right: 5%;

    border-radius: .3rem;
    background-image: url(../imgs/photo.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

.c-slider .c-vin .c-txt
{
    width: 49%;
    margin-bottom: 1rem;

    text-align: left;
}

.c-slider .c-vin .c-txt p
{
    color: #414042;
}

.c-slider .c-vin .c-prix
{
    display: inline-block;

    width: 49%;
    padding: 1rem;

    vertical-align: middle;

    color: #942c61;
}

.c-slider .c-vin .c-prix .prix
{
    font-family: 'Crimson Text';
    font-size: 4rem;
    font-style: italic;
    line-height: 5rem;

    display: block;

    text-align: center;
}

.c-slider .c-vin .c-prix .detail
{
    display: block;

    text-align: center;

    color: #414042;
}

.c-slider .c-vin .c-cta
{
    display: inline-block;

    width: 49%;

    vertical-align: middle;
}

.cta
{
    line-height: 3.5rem;

    display: block;

    width: 100%;
    height: 4.5rem;
}

.cta.lh-1
{
    line-height: 1.5rem;
}

.cta.lh-2
{
    line-height: 2.5rem;
}

.cta.lh-3
{
    line-height: 3.5rem;
}

.cta.lh-4
{
    line-height: 4.5rem;
}

.cta.lh-5
{
    line-height: 5.5rem;
}

.attente
{
    line-height: 1.8rem;

    padding-right: 2rem;
    padding-left: 2rem;

    background-color: #f7941e;
}

.attente:hover,
.attente:focus
{
    background-color: #a95f06;
}

.com-nouveau
{
    line-height: 1.8rem;

    padding-right: 3rem;
    padding-left: 3rem;
}

.cta-back
{
    text-transform: uppercase;

    color: #942c61;
}

.commander,
.nouveau,
.com-nouveau
{
    background-color: #60bb46;
}

.commander:hover,
.commander:focus,
.nouveau:hover,
.nouveau:focus,
.com-nouveau:hover,
.com-nouveau:focus
{
    background-color: #3a712a;
}

.commander-plus-tard
{
    background-color: #f7941e;
}

.commander-plus-tard:hover,
.commander-plus-tard:focus
{
    background-color: #a95f06;
}

.nouveau
{
    line-height: 1.8rem;

    padding-right: 2rem;
    padding-left: 2rem;
}

.cours
{
    overflow: hidden;

    background-color: #b1b1b1;
}

.cours:before
{
    position: absolute;
    top: 0;
    left: 0;

    display: block;

    width: 50%;
    height: 100%;

    content: '';
    transition: all .2s ease-out;

    border-width: 10rem 12rem 0 0;
    border-style: solid;
    border-color: #78f46f transparent transparent transparent;
}

.cours:hover,
.cours:focus
{
    background-color: #b1b1b1;
}

.cours:hover:before,
.cours:focus:before,
{
    width: 130%;
}

.c-zone
{
    height: auto !important;
    min-height: 7rem;
}

.page-mes-commandes header .picto
{
    background-image: url(../imgs/pictos/mes_commandes.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 7rem;
}

.page-mes-commandes section .c-in .c-col
{
    vertical-align: bottom;
}

.page-mes-commandes section .c-in .c-col .c-item-form
{
    margin-bottom: 0rem;
    padding: .2rem;
}

.page-mes-commandes .c-slider .c-vin .c-list
{
    display: inline-block;

    width: 49%;
    padding: 1rem;
    padding-right: 5%;
    padding-left: 0;

    vertical-align: middle;

    color: #942c61;
}

.page-mes-commandes .c-slider .c-vin .c-list select
{
    width: 100%;
    margin-bottom: .5rem;

    background-color: #e6e7e8;
}

.page-mes-commandes .c-slider .c-vin .c-cta
{
    font-family: 'Cabin';
    font-size: 1.5rem;

    text-align: left;
}

.left
{
    float: left;
    width: 50%;
}

.right
{
    float: right;
    width: 50%;
}

.group:after
{
    display: table;
    clear: both;

    content: '';
}

img
{
    max-width: 100%;
    height: auto;
}

footer .mentions
{
    line-height: 60px;

    height: 60px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

footer .cc-center,
footer .img-center
{
    height: 60px;
}

.partner:hover,
.partner:focus
{
    transition: opacity .3s;

    opacity: .5;
}


/**
 * MEDIA QUERIES
 */

@media only screen and (min-width: 768px)
{
    .top-nav .page-nav li a
    {
        min-width: 7.5rem;
        font-size: 1rem;
        padding: 0rem .2rem;
    }
}

@media screen and (max-width:480px)
{
    .left,
    .right
    {
        float: none;
        width: auto;
    }
}

@media only screen and (max-width: 800px)
{
    .page-mes-commandes .c-slider .c-vin .c-list
    {
        width: 80%;
        padding-right: 0;
    }

    body,
    html
    {
        font-size: 11px;
    }

    h1
    {
        font-size: 4rem;
        line-height: 4.3rem;
    }

    section
    {
        padding: 1rem;
    }

    section .message
    {
        position: relative;
        top: 0rem;

        margin-bottom: 1rem;
    }

    input[type='email'],
    input[type='number'],
    input[type='tel'],
    input[type='password'],
    input[type='text'],
    textarea,
    select
    {
        width: 100%;

        text-align: left;
    }

    label
    {
        width: 100%;

        text-align: left;
    }

    input[type='checkbox'] + label
    {
        width: 80%;
    }

    #mes-commandes input[type='checkbox'] + label,
    #mes-devis input[type='checkbox'] + label
    {
        width: auto;
    }
    #mes-commandes label,
    #mes-devis label
    {
        width: auto;
    }

    .mail-mess
    {
        position: relative;

        display: block;

        width: 100%;
        margin-top: 1rem;
    }

    .c-col
    {
        width: 100% !important;
        padding-right: 0rem !important;

        text-align: center !important;
    }
    .c-col .c-item-form
    {
        text-align: left;
    }

    .top-nav .page-nav
    {
        width: 70%;

        text-align: center;
    }

    .top-nav .dl_app
    {
        position: absolute;
        top: 100%;
        right: 0;

        display: block;
    }

    .page-accueil section .c-in .c-txt p
    {
        font-size: 1.3rem;
        line-height: 1.8rem;

        color: rgba(255, 255, 255, .7);
    }
    .page-accueil section .c-in .c-txt h3
    {
        font-size: 1.3rem;
        line-height: 1.8rem;

        margin-top: 3rem;
    }

    .le_bon_gustave_col {
        flex-basis: 100%;
    }

    .in-the-press h2 {
        margin: 4rem 0;
    }

    .page-accueil section .c-in .c-img
    {
        top: -50%;

        width: 100%;
        height: 150%;

                opacity: .3;
        background-image: url(../imgs/pictos/concept.svg);
        background-repeat: no-repeat;
        background-position: 50% 0;
        background-size: cover;
    }

    .qui_sommes_nous .c-in .c-txt
    {
        padding: 2rem;
    }
    .qui_sommes_nous .c-in .c-txt h3
    {
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .logo
    {
        width: 15%;

        background-image: url(../imgs/logo.svg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 2rem;
    }

    body
    {
        background-attachment: initial;
        background-position: 50% 0;
        background-size: 150%;
    }

    .c-grid ul li
    {
        width: 80%;
    }

    .c-slider
    {
        width: 100%;
    }

    .c-slider .c-slide
    {
        padding: 1rem 1rem;
    }

    .c-slider .c-vin .type-photo
    {
        width: 60%;
        margin: 0 auto;
    }

    .c-slider .c-vin .c-txt
    {
        display: block;

        width: 80%;
        margin: 0 auto;
        margin-bottom: 1rem;

        text-align: center;
    }

    .c-slider .c-vin .c-txt p
    {
        color: #414042;
    }

    .c-slider .c-vin .c-prix
    {
        width: 80%;

        vertical-align: top;
    }

    .c-slider .c-vin .c-prix .prix
    {
        text-align: center;
    }

    .c-slider .c-vin .c-cta
    {
        display: inline-block;

        width: 80%;

        text-align: center !important;
        vertical-align: middle;
    }
}

@media only screen and (min-width: 800px) and (max-width: 1101px)
{
    .top-nav .page-nav
    {
        width: 59%;
    }

    .top-nav .dl_app
    {
        right: 12%;
    }

    body,
    html
    {
        font-size: 13px;
    }

    .c-grid ul li
    {
        width: 40%;
    }

    body
    {
        background-attachment: initial;
        background-position: 50% -10%;
        background-size: 100%;
    }
}

@media only screen and (min-width: 1100px)
{
    .type-page
    {
        -webkit-animation: tween-bg 4s ease-out;
                animation: tween-bg 4s ease-out;

        mix-blend-mode: lighten;
        background-color: transparent;
        background-image: url(../imgs/fx.png);
        background-repeat: no-repeat;
        background-position: 50% 100%;
        background-size: 100%;

        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }

    body.bg_3
    {
        background-image: url(../imgs/accueil_bg.png);
    }

    .deco:hover .picto,
    .deco:focus .picto,
    .concept:hover .picto,
    .concept:focus .picto,
    .inscription:hover .picto,
    .inscription:focus .picto {
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: 2.1rem;
    }

    .deco:hover .picto,
    .deco:focus .picto
    {
        background-image: url(../imgs/pictos/rose/deco.svg);
    }

    .concept:hover .picto,
    .concept:focus .picto
    {
        background-image: url(../imgs/pictos/rose/le_concept.svg);
        background-size: 2.2rem;
    }

    .mon_compte:hover .picto,
    .mon_compte:focus .picto
    {
        background-image: url(../imgs/pictos/rose/mon_compte.svg);
    }

    .inscription:hover .picto,
    .inscription:focus .picto
    {
        background-image: url(../imgs/pictos/rose/inscription.svg);
        background-size: 2.5rem;
    }

    .mes_devis:hover .picto,
    .mes_devis:focus .picto
    {
        background-image: url(../imgs/pictos/rose/mes_devis.svg);
    }

    .mon_profil:hover .picto,
    .mon_profil:focus .picto
    {
        background-image: url(../imgs/pictos/rose/mon_compte.svg);
    }

    .le_blog:hover .picto,
    .le_blog:focus .picto
    {
        background-image: url(../imgs/pictos/rose/le_blog.svg);
    }

    .faq:hover .picto,
    .faq:focus .picto {
        color: #942c61;
    }

    .facebook:hover,
    .facebook:focus
    {
        background-image: url(../imgs/pictos/rose/facebook.svg);
    }

    .contact:hover,
    .contact:focus
    {
        background-image: url(../imgs/pictos/rose/contact.svg);
    }

    .mes_commandes:hover .picto,
    .mes_commandes:focus .picto
    {
        background-image: url(../imgs/pictos/rose/mes_commandes.svg);
    }

    .instagram:hover,
    .instagram:focus
    {
        background-image: url(../imgs/pictos/rose/instagram.svg);
    }

    .twitter:hover,
    .twitter:focus
    {
        background-image: url(../imgs/pictos/rose/twitter.svg);
    }

    .top-nav .page-nav li a:hover .picto,
    .top-nav .page-nav li a:focus .picto
    {
        border-color: #942c61;
        background-color: #fff;
    }

    body.bg_1
    {
        background-image: url(../imgs/bg_1.jpg);
    }

    body
    {
        background-image: url(../imgs/bg_1.jpg);
    }

    body.bg_2
    {
        background-image: url(../imgs/bg_2.jpg);
    }

    .tester_le_concept:hover,
    .tester_le_concept:focus
    {
        -webkit-animation: tween-flash 1.5s ease-in-out;
                animation: tween-flash 1.5s ease-in-out;
    }

    .tester_le_concept:hover h1,
    .tester_le_concept:focus h1
    {
        top: 9rem;
    }

    .tester_le_concept:hover img,
    .tester_le_concept:focus img
    {
        -webkit-transform: scale(4);
           -moz-transform: scale(4);
            -ms-transform: scale(4);
             -o-transform: scale(4);

        opacity: .5;
        scale: 4;
    }
}

@media only screen and (max-width: 1100px)
{
    .top-nav .page-nav li a
    {
        position: relative;
        top: .5rem;

        padding: 0rem .2rem;
    }

    .qui_sommes_nous .c-in .c-txt
    {
        background-color: #7c8186;
        background-color: #e5e5e5;
    }

    .type-page .picto
    {
        width: 4rem;
        height: 4rem;

        border: .1rem solid white;
        background-size: 3rem !important;
    }

    .type-page
    {
        margin-top: 12rem;
    }

    .type-page h1
    {
        font-size: 3rem;

        position: relative;
        top: .3rem;
    }

    .qui_sommes_nous .c-item
    {
        width: 100%;
        margin-bottom: 1rem;
        padding: 2rem;
    }

    .qui_sommes_nous .c-item p
    {
        font-size: 1.3rem;
        line-height: 1.8rem;

        padding: 1rem;
    }

    .qui_sommes_nous .c-equipe
    {
        padding: 0rem;
        padding-top: 70vw;

        background-attachment: scroll;
        background-size: contain;
    }

    .qui_sommes_nous .c-equipe:after
    {
        display: none;
    }

    .top-nav .rs-nav li
    {
        display: inline-block;

        width: 50%;
        height: 50%;
    }

    .top-nav .rs-nav
    {
        float: right;

        width: 13%;
    }

    .instagram,
    .twitter,
    .contact,
    .facebook
    {
        background-position: center center !important;
        background-size: 1.5rem !important;
    }
}

@media only screen and (min-width: 1600px)
{
    body,
    html
    {
        font-size: 17px;
    }

    .c-grid ul li
    {
        width: 24%;
    }
}