html
{
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust:   100%;
    -ms-text-size-adjust:       100%;
}

body
{
    font-family: 'akkurat', Helvetica, sans-serif !important;
    font-weight: 200 !important;
    font-size:   1em;
    font-size:   16px;

}

h1.italic
{
    font-family:   'akkurat-light-italic', Helvetica, sans-serif !important;
    font-weight:   200 !important;
    font-size:     32px;
    line-height:   1.4;
    margin-bottom: 40px;
    width: 100%;
}

h1.bold
{
    font-family: 'akkurat-bold', Helvetica, sans-serif !important;
    font-weight: 600 !important;
}

h1.italic span
{
    white-space:nowrap;
}

h3,
h4,
a
{
    font-family: 'akkurat-bold', Helvetica, sans-serif !important;
    font-weight: 600 !important;
}

h2
{
    font-family: 'akkurat-bold', Helvetica, sans-serif !important;
    font-weight: 400 !important;
    font-size:   20px;
    line-height: 1.6em;
    line-height: 1.6em;
}

h3
{
    font-size: 1.4em;
}

li
{
    list-style: none;
}

h1.italic.index
{
    font-size: 29px;
}

@media (min-width: 790px)
{
    h1.italic
    {
        font-size:     44px;
        line-height:   1.6;
        margin-bottom: 80px;
    }

    h1.italic.index
    {
        font-size: 36px;
        /*font-size: 3.6vw;*/
    }

    h2
    {
        font-size:   20px;
        line-height: 1.85em;
        line-height: 1.85em;
    }

    h3
    {
        font-size: 1.4em;
    }
}

@media (min-width: 890px)
{
    h1.italic.index
    {
        font-size: 38px;
        /*font-size: 3.6vw;*/
    }
}

@media (min-width: 1025px)
{
    h1.italic
    {
        font-size:   48px;
        line-height: 1.4;

    }

    h1.italic.index
    {
        font-size: 45px;
        /*font-size: 3.6vw;*/
    }

}

@media (min-width: 1115px)
{

    h1.italic.index
    {
        font-size: 47px;
        /*font-size: 3.6vw;*/
    }

}


@media (min-width: 1160px)
{

    h1.italic.index
    {
        font-size: 49px;
        /*font-size: 3.6vw;*/
    }

}


@media (min-width: 1230px)
{

    h1.italic.index
    {
        font-size: 52px;
        /*font-size: 3.6vw;*/
    }

}


@media (min-width: 1330px)
{

    h1.italic.index
    {
        font-size: 54px;
        /*font-size: 3.6vw;*/
    }

}



@media (min-width: 1430px)
{

    h1.italic.index
    {
        font-size: 60px;
    }

}

/* ================================= */
/* ============ BOUTONS ================ */
/* ================================= */

.more
{
    display:       inline-block;
    padding-right: 30px;
    position:      relative;
}

.more,
.more a
{
    color:           #DC3932;
    text-decoration: none;
    text-transform:  uppercase;
}

.more a
{
    padding-bottom: .2em;
    border-bottom:  1px solid #DC3932;
}

.more:after
{
    background: url("../../images/arrow.svg") center/contain no-repeat;
    content:    "";
    width:      50px;
    height:     0.75em;
    position:   absolute;
    top:        .65em;
    right:      -.5em;
    transition: transform 0.3s ease-in-out;
}

.more:hover:after
{
    transform: translateX(0.5em);
}
.fleche2
{
    position:relative;
    padding-left: 20px;
    display: block;
}
.fleche2:before
{
    background: url("../../images/fleche2.svg") center/contain no-repeat;
    content:    "";
    width:      22px;
    height:     0.75em;
    position:   absolute;
    top:        5px;
    left:      -.5em;
    transition: transform 0.3s ease-in-out;
}

span.color-red
{
    color: #DC3932;
}

span.color-red:hover
{
    color: #000;
}

/* ============================= */
/*   boutons footer ul li */
/* ============================= */

.more.liste-more
{
    display: block;
    width:   auto;
    float:   left;
    clear:   left;
}

.more.liste-more a
{
    width: auto;
}

.more.liste-more:after
{
    top:        .65em;
    background: url("../../images/arrow-blanc.svg") center/contain no-repeat;
    opacity:    0;
    transition: all .3s;
}

.more.liste-more:hover:after
{
    opacity: 1;
}

/* ============ MARGES + RETOURS LIGNE================ */

.global-marge
{
    padding: 0 6%;
}

.fill-centre
{
    width:        50%;
    height:       100%;
    border-right: 1px solid #EBEBEB;
    position:     absolute;
    left:         0;
    top:          0;
    z-index:      -1;
    display:      none;
}

.fill-top
{
    border-top: 1px solid #EBEBEB;
}

.fill-gauche
{
    width: 100%;
}

.fill-centre.mobile
{
    width: 20%;
}

.marge-h3
{
    margin-bottom: 20px;
}

.marge-h3.assos
{
    margin-bottom: 20px;
    margin-top:    20px;
    color:         #DC3932;
    font-size:     1em;
}

.col-1 p
{
    font-size: 13px;
}

.col-1 p span
{
    font-size: 13px;
}

@media (min-width: 415px)
{
    .fill-centre
    {

        display: block;
    }

}

@media (min-width: 769px)
{
    .global-marge
    {
        padding: 0 10%;
    }

    .fill-gauche
    {
        width:        10%;
        height:       100%;
        border-right: 1px solid #EBEBEB;
        position:     absolute;
        left:         0;
        top:          0;
        z-index:      -1;
        text-align:   right;
        padding-top:  160px;
    }

    .fill-gauche.blanc
    {
        z-index: 0;
        border:  none;
        color:   #FFF;
    }

    .fill-gauche-contact
    {
        width:        10%;
        min-height:   100%;
        border-right: 1px solid #EBEBEB;
        position:     absolute;
        left:         0;
        top:          0;
        z-index:      -1;
        text-align:   right;
    }

    .fill-gauche-contact .content-drapeau
    {
        margin-top: 210px;
        width:      100%;
    }

    .fill-gauche.marge-110
    {
        padding-top: 120px;
    }

    .fill-gauche.marge-210
    {
        padding-top: 210px;
        height:      calc(100% - 210px);
    }

    .fill-gauche.marge-220
    {
        padding-top: 220px;
        height:      calc(100% - 220px);
    }
}

@media (min-width: 1025px)
{
    .global-marge
    {
        padding: 0 15%;
    }

    .fill-gauche
    {
        width: 15%;
    }

    .fill-gauche-contact
    {
        width: 15%;
    }
}

/* ================================= */
/* ============ COLONNES ================ */
/* ================================= */

.content
{
    position:       relative;
    display:        block;
    width:          88%;
    max-width:      1200px;
    height:         100%;
    margin:         0 auto;
    padding-top:    60px;
    padding-bottom: 60px;
    line-height:    2em;
    overflow:       hidden;
}

.content img
{
    /*width: 100%;*/
}

.content p
{
    color: #919191;
}

.content.no-head
{
    padding-top: 150px;
}

.content.no-marge
{
    margin:  0;
    padding: 0;
}

.colonnes
{
    display: block;
             /*float: left;*/
    width:   100%;
}

.col-left
{
    width:         100%;
    float:         left;
    display:       block;
    padding-right: 0px;
    box-sizing:    border-box;
}

.col-right
{
    width:        100%;
    float:        left;
    padding-left: 0px;
    box-sizing:   border-box;
}

@media (max-width: 768px)
{
    .col-right-index
    {

        display: none;
        margin-bottom: 10px;

    }
}

.content.article
{
    width:       88%;
    padding-top: 100px;
}

.bloc-ligne,
.ligne-col
{
    position: relative;
    display:  block;
    height:   auto;
    width:    100%;
    margin:   auto;
}

.ligne-inside
{
    margin-bottom: 50px;
}

.ligne-inside.last
{
    margin-bottom: 50px;
}

.col-1
{
    width: 100%;
}

.col-1.marg-right
{
    border-bottom:  1px solid #EBEBEB;
    margin-bottom:  60px;
    padding-bottom: 60px;
}

.col-1 li
{
    color:         #707070;
    line-height:   1.8em;
    margin-bottom: 30px;
}

@media (min-width: 769px)
{
    .content
    {
        width:          80%;
        padding-top:    70px;
        padding-bottom: 100px;
    }

    .content.marge-head
    {
        padding-top: 200px;
    }

    .content.last
    {
        padding-bottom: 150px;
    }

    .content.article
    {
        padding-top: 150px;
    }

    /* ============ COLONNES ================ */
    .col-left
    {
        width:         50%;
        padding-right: 50px;
    }

    .col-right
    {
        width:        50%;
        float:        right;
        padding-left: 50px;
    }

    .col-left.no-marge,
    .col-right.no-marge
    {
        padding: 0px 5px;
    }

    .txt-right
    {
        text-align: right;
    }

    .content.article
    {
        width: 80%;
    }

    .bloc-ligne
    {
        width:   calc(100% - 80px);
                 /*float: left;*/
        padding: 0 40px;
    }

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

    .ligne-inside
    {
        margin-top:    0px;
        margin-bottom: 80px;
        padding:       0 80px;
    }

    .ligne-inside.no-marge
    {
        margin-top: 0px;
    }

    .ligne-inside.last
    {
        margin-bottom: 100px;
    }

    .content-col
    {
        display: flex;
                 /*  align-content: flex-start; */
    }

    .col-1
    {
        margin: 0 auto;
        width:  33.333%;
    }

    .col-1.marg-right
    {
        margin-right:   50px;
        border-bottom:  none;
        margin-bottom:  0px;
        padding-bottom: 0px;
    }

    .col-ul
    {
        margin: 0 auto;
    }
}

@media (min-width: 1085px)
{
    .content
    {
        width:       70%;
        padding-top: 90px;
    }

    .content.index
    {
        padding-top: 120px;
    }

    .content.article
    {
        width: 70%;
    }
}

@media (min-width: 1440px)
{
    .content
    {
        padding-top: 120px;
    }
}

/* ================================= */
/* ===== THUMB ARTICLES + INDEX ====== */
/* ================================= */

.col-reverse
{
    /* display:        flex;
     flex-direction: column;*/

}

.colonnes.col-end
{
    margin-bottom: 0px;
}

.colonnes.col-first
{
    margin-top: 40px;
}

.thumb-art
{
    margin-bottom: 50px;
    display:       block;
    float:         left;
}

.thumb-art .col-left,
.thumb-art .col-right
{
    margin:        auto;
    margin-bottom: 60px;
}

.bloc-centre
{
    width:        100%;
    max-width:    400px;
    height:       500px;
    position:     absolute;
    left:         0;
    right:        0;
    margin-left:  auto;
    margin-right: auto;
    top:          0;
}

.content-elements
{
    position: relative;

}

.content-elements.m-bottom
{
    margin-bottom: 30px;

}

.content-elements.back
{
    z-index: -1;
}

.thumb-img
{
    width:         100%;
    max-width:     220px;
    margin:        0 auto;
    padding:       4px 4px;
    border-radius: 30px;
    margin:        0 auto;
    box-shadow:    0px 0px 50px rgba(0, 0, 0, 0.4);
}

.content-img
{
    width:         100%;
    height:        100%;
    max-width:     220px;
    max-height:    478px;
    background:    none;
    border-radius: 25px;
    box-shadow:    0 0 0 4px #fff;
    overflow:      hidden;
    position:      relative;
}

.content-video.article
{
    margin-top: 20px;
}

@media (min-width: 769px)
{
    .content-video.article
    {
        margin-top: 50px;
    }

    .content-elements.m-bottom
    {
        margin-bottom: 0px;

    }
}

.mask-img
{
    width:              220px;
    height:             478px;
    border-radius:      25px;
    overflow:           hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.mask-img.pos-absolut
{
    position: absolute;
    right:    0px;
    top:      0px;
}

.slide-img
{
    width:  336px;
    height: 478px;
    float:  right;
}

.thumb-img-article
{
    width:           100%;

    margin-top:      50px;
/*
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;


*/
}

.thumb-img-article img
{
    margin: 0 auto;
    width:  100%;
    display: block;

}

.thumb-art h3
{
    color:         #DC3932;
    margin-bottom: 20px;
    line-height:   1.4em;
}

.thumb-art p
{
    margin-bottom: 20px;
}

/*
.drapeau {
    font-family: 'akkurat-bold', Helvetica, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px;
    line-height: 1.4em;
    color: #DC3932;
    margin-right: 10px;
}
*/
a.link-texte
{
    font-family:     'akkurat', Helvetica, sans-serif !important;
    font-weight:     200 !important;
    color:           #DC3932;
    margin-top:      20px;
    width:           100%;
    height:          20px;
    position:        relative;
    text-decoration: underline;
}

a.link-texte:after
{
    content:    '';
    background: #DC3932;
    width:      0%;
    height:     0px;
    position:   absolute;
    left:       0;
    bottom:     -2px;
}

a.link-texte:hover:after
{
    background: #000;
}

a.link-texte:hover
{
    color: #000;
}

.hide-br
{
    display: none;
}

@media (min-width: 769px)
{
    .bloc-centre
    {
        width: 100%;
    }

    .col-reverse
    {
        display:        flex;
        flex-direction: row-reverse;
        margin-bottom:  100px;
    }

    .thumb-art
    {
        display: table;
        height:  auto;
        display: flex;
    }

    .thumb-art .col-left,
    .thumb-art .col-right
    {
        margin: auto;
    }

    .colonnes.col-end
    {
        margin-bottom: 50px;
    }

    .hide-br
    {
        display: block;
    }

    a.link-texte
    {
        white-space:     nowrap;
        text-decoration: none;
    }

    a.link-texte:after
    {
        height: 1px;
        width:  100%;
    }

}

@media (min-width: 1025px)
{

    .bloc-centre
    {
        width: 90%;
    }

    .colonnes.col-end
    {
        margin-bottom: 100px;
    }
}

/* ================================= */
/* ======== LEGENDES ========= */
/* ================================= */

.legend
{
    display:     block;
    width:       100%;
    padding-top: 0px;

    z-index:     999;
position: relative;

}

.legend.carousel
{
    min-height: 150px;
    margin-top: 10px;
    position: relative;
    float: left;
}

.legend p,
.legend a
{
    font-size:   13px;
    line-height: 20px;
}

.legend h4
{
    font-size: 16px;
}

.legend span
{
    color:       #000;
    font-family: 'akkurat-bold', Helvetica, sans-serif !important;
    font-weight: 600 !important;
}

.legend .col-right
{
    float: left;
}

.legend .col-left
{
    text-align: left;
}

.legend.align-center
{
position: relative;
    display: block;
    width:      100%;
    margin:     10px auto 0px auto;
    text-align: center;
    float:      none;
}

.legend.align-center.align-icon
{
    width:      100%;
    display:    block;
    text-align: center;
}

.legend.align-center.collage
{
    margin-top:  0px;
    padding-top: 0px;
    z-index:     1;
}

.legend.align-center.no-marge
{
    padding:    0;
    margin: -20px auto 0px auto;
}

.legend.marge-10
{
    padding:    0;
    margin-top: 0px;
}

@media (min-width: 769px)
{
    .legend
    {
        text-align: left;
    }

    .legend .col-right
    {
        max-width: 430px;
    }

    .legend .col-left
    {
        text-align: right;
    }

    .legend.align-center
    {

        width: 80%;

    }

    .legend.align-center.collage
    {
        padding-top: 25px;
        margin-top:  -70px;
        width:       50%;
    }

    .legend.align-center.align-icon
    {
        display: flex;
    }

    .legend-icon
    {
        width: 30%;
        float: left;
    }

    .legend-text-icon
    {
        width:      70%;
        text-align: left;
        float:      right;
        margin:     auto;
    }
}

@media (min-width: 1025px)
{
    .legend.align-center.align-icon
    {
        width:     70%;
        max-width: 450px;
    }
}

/* ================================= */
/* ======== LOGOS CLIENTS ========= */
/* ================================= */
.main-logo
{
    width:          88%;
    padding-top:    60px;
    padding-bottom: 60px;
    background:     #FEF8F8;
    position:       relative;
    color:          #DC3932;
}

.content-logos
{
                /*   display: flex;
                flex-wrap: wrap; */
    overflow-x: hidden;
    position:   relative;
    width:      100%;
    max-width:  1200px;
    margin:     0 auto;
}

.row
{
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    align-content:   stretch;
                     /* flex: 0 1 auto; */
    margin:          0 auto;
    z-index:         5;
    text-align:      center;
}

.client
{
    width:    calc(33% - 20px);
    display:  inline-block;
    overflow: hidden;
              /*   margin: 20px 20px;*/
    position: relative;

}

.client img
{
    width:     100%;
    max-width: 150px;
    margin:    auto;
}
@media (orientation: portrait) and (min-width: 769px)
{
    .main-logo
    {

        padding-top:    100px;
        padding-bottom: 100px;
        min-height:     auto;
    }
}
@media (min-width: 769px)
{
    .main-logo
    {
        width:          80%;
        padding-top:    100px;
        padding-bottom: 100px;
        min-height: 100vh;
    }

    .row
    {
        justify-content: space-between;

    }

    .client
    {

        width: 20%;

    }

}

@media (min-width: 1025px)
{
    .main-logo
    {
        width: 70%;
    }

}

@media (min-width: 1280px)
{
    .client
    {

        margin-bottom: 50px;

    }

}

@media (min-width: 1440px)
{
    .client
    {

    }
}

/* ================================= */
/* ============ FOOTER ================ */
/* ================================= */

.footer
{
    color:       #FFFFFF;
    display:     block;
    float:       left;
    width:       88%;
    min-height:  100vh;
    background:  #DC3932;
    font-family: 'akkurat-light', Helvetica, sans-serif !important;
    font-weight: 400 !important;
    line-height: 2em;
}

.col-right-footer,
.col-left-footer
{
    width: 100%;
    float: left;
}

@media (orientation: portrait) and (max-width: 766px)
{
    .col-right-footer,
    .col-left-footer
    {
        width: 100%;
        float: none;

    }
}

.footer a,
.footer a:visited
{
    color:          #FFFFFF;
    font-family:    'akkurat-light', Helvetica, sans-serif !important;
    font-weight:    400 !important;
    text-transform: none;
}

.ul-footer
{
    margin-bottom: 80px;
}

.footer li a
{
    border-bottom: 1px solid #fff;
}

.footer h4
{
    margin-bottom: 10px;
}

.footer h4.follow
{
    margin-top: 32px;
}

.col-left-footer .social li
{
    margin-bottom: 8px;
}

.content-footer
{
    display:     block;
    padding-top: 50px;
    padding-bottom: 50px;
    width:       100%;
    max-width:   1200px;
    margin:      0 auto;
}

@media (min-width: 769px)
{
    .footer
    {
        width: 80%;
    }

    .content-footer
    {
        padding-top:    100px;
        padding-bottom: 100px;

    }

    .col-right-footer,
    .col-left-footer
    {
        width: 50%;
    }
}

@media (min-width: 1025px)
{
    .footer
    {
        width: 70%;
    }
}

/* ================================= */
/* ============ FORMULAIRE ================ */
/* ================================= */

.myForm
{
    padding-bottom: 100px;
    color:          #fff;
}
.footer-reverse{
display: flex;
    flex-direction: column-reverse;
}
.form-group
{
    position:      relative;
    float:         left;
    width:         100%;
    margin-bottom: 40px;
}

.champs-requis p
{
    font-size:   12px;
    color:       #EE9C99;
    line-height: 1.4em;
}

.champs-requis p.warning
{
    color:     #FFF;
    font-size: 16px;
}

@media (min-width: 769px)
{
    .form-group
    {
        margin-bottom: 32px;
    }

    .myForm
    {
        padding-top:    0px;
        padding-bottom: 0px;
        margin-top:     0px;
    }
    .footer-reverse{

        flex-direction: row;
    }
    .your-name
    {
        margin-right: 5px;
        float:        left;
    }

    .your-mail
    {
        margin-left: 5px;
        float:       right;
    }
}

@media (min-width: 1025px)
{
    .your-name,
    .your-mail
    {
        width: calc(50% - 10px);
    }
}

/* INPUTS */

input,
textarea
{
    width:              100%;
    padding:            5px 0px;
    border:             none;
    outline:            none;
    background:         none;
    -webkit-transition: all .2s;
    transition:         all .2s;
    color:              #fff;
    font-size:          16px;
    resize:             none;
}

textarea
{

    min-height: 80px;
    max-height: 300px;
    overflow-x: hidden;
}

/*
//test
input[type='email']
{
    color: yellow;
}
*/

input:focus ~ .form-labels,
input:valid ~ .form-labels,
textarea:focus ~ .form-labels,
textarea:valid ~ .form-labels
{
    opacity:   .5;
    transform: translate3d(0, -80%, 0);
}

input:focus ~ .input-border-bottom:before,
input:focus ~ .input-border-bottom:after,
#form-message:focus ~ .input-border-bottom:before,
#form-message:focus ~ .input-border-bottom:after
{
    width: 100%;
}

#form-message:focus
{
    /*  height: 100px; */
}

/* LABELS */

input::-webkit-contacts-auto-fill-button
{
    visibility:     hidden;
    display:        none !important;
    pointer-events: none;
    position:       absolute;
    right:          0;
}

.form-labels
{
    position:   absolute;
    top:        0;
    left:       0;
    cursor:     text;
    transition: all .2s;
    opacity:    1;
}

/* BORDER BOTTOM */
/* for border-bottom effect */

.input-border-bottom
{
    display:    block;
    width:      100%;
    height:     1px;
    background: #fff;
}

.input-border-bottom:before,
.input-border-bottom:after
{
    content:    '';
    height:     2px;
    width:      0;
    bottom:     1px;
    position:   absolute;
    background: #fff;
                /*  background: #9C1913;*/
    transition: 0.2s ease width;
}

.input-border-bottom.warning
{
    background: #9C1913;
    color:      #9C1913;

}

.input-border-bottom.warning:before
{
    width:      100%;
    background: #9C1913;
}

.input-border-bottom:before
{
          /* left: 50%; */
    left: 0%;
}

.input-border-bottom:after
{
    /* right: 50%; */
}

/*  SUBMIT   */

.btn-soumettre
{
    position:        relative;
    border:          none;
    text-decoration: none;
    cursor:          pointer;
    text-align:      left;
    text-transform:  uppercase;
    font-size:       16px;
    font-family:     'akkurat-bold', Helvetica, sans-serif !important;
    font-weight:     600 !important;
    color:           #fff;
    width:           auto;
    padding:         5px 0px;
    border-bottom:   1px solid #fff;
    background:      none;
}

.btn-form span
{
    color: #fff;
}

.btn-soumettre:after
{
    background: url("../../images/arrow-blanc.svg") center/contain no-repeat;
    content:    "";
    position:   absolute;
    width:      50px;
    height:     1em;
    top:        .4em;
    right:      -45px;
    transition: transform 0.3s ease-in-out;
}

.btn-soumettre:hover:after
{
    transform: translateX(10px);
}