.panel-container

{

    table-layout:fixed; 

    width: 100%;   

    display: table;

}



.panel-ligne

{

    width: 100%;

    display: table-row;

}



.panel-cellule

{

    display: table-cell;

}



/*

*

* = PANEL TOP ABOUT

*

*/



#section-about-top

{

    position: relative;

}



#section-about-top .voile-animation

{

    height: 100%;

}



#section-about-top .introduction

{

    width: calc(50% - 185px);

    padding: 50px 0;

}



#section-about-top .introduction h2

{

    padding-top: 60px;

    padding-bottom: 30px;

}



#section-about-top .introduction .texte-base

{

    padding-right: 230px;

}



#section-about-top .image

{

    position: absolute;

    top: 0; right: 0;

    width: calc(50% + 185px); height: 100%;

    background-image: url(../images/about/about-top.jpg);

    background-size: cover;

    background-position: center;

}





/*

*

* = CHIFFRES ABOUT

*

*/



#section-about-chiffres

{

    padding-top: 75px;

    padding-bottom: 250px;

}



#section-about-chiffres .colonne

{

    text-align: center;

    width: calc(100%/6);

    min-height: 5px;

}



#section-about-chiffres .colonne .chiffre

{

    font-size: 120px;

    font-weight: 800;

    padding-bottom: 20px;

}



#section-about-chiffres .label-1975

{

    width: 335px;

    position: absolute;

    z-index: 2;

    left: 90px;

    bottom: -320px;

}



/*

*

* = LABEL ABOUT

*

*/



#section-about-label

{

    background-color: #eee;

    padding: 180px 0;

}





#section-about-label p

{

    margin-top: 50px;

    width: 575px;

}



#section-about-label .icone

{

    display: inline-block;

    margin-left: 80px;

}



#section-about-label .icone:nth-child(1)

{

    margin-right: 80px;

}



/*

*

* = MARQUE ABOUT

*

*/



#section-about-marques

{

    padding: 110px 0;

}



#section-about-marques h2

{

    padding-bottom: 110px;

}



#section-about-marques .colonne

{

    width: calc(100% / 6);

    text-align: center;

}



#section-about-marques .colonne img

{

    width: 300px;

}





@media screen and (max-width: 2200px)

{

    /*

    *

    * = PANEL TOP ABOUT

    *

    */



    #section-about-top .introduction

    {

        width: calc(50% - 135px);

        padding: 35px 0;

    }



    #section-about-top .introduction h2

    {

        padding-top: 45px;

        padding-bottom: 20px;

    }



    #section-about-top .introduction .texte-base

    {

        padding-right: 170px;

    }



    #section-about-top .image

    {

        width: calc(50% + 135px); 

    }



    .titre-1 

    {

        font-size: 70px;

        line-height: 64px;

        font-weight: 800;

    }



    /*

    *

    * = CHIFFRES ABOUT

    *

    */



    #section-about-chiffres

    {

        padding-top: 55px;

        padding-bottom: 185px;

    }



    #section-about-chiffres .colonne .chiffre

    {

        font-size: 90px;

        padding-bottom: 15px;

    }



    #section-about-chiffres .colonne .texte-base

    {

        padding: 0 30px;

    }



    #section-about-chiffres .label-1975 

    {

        width: 250px;

        position: absolute;

        z-index: 50;

        left: 65px;

        bottom: -235px;

    }



    /*

    *

    * = LABEL ABOUT

    *

    */



    #section-about-label

    {

        padding: 135px 0;

    }



    #section-about-label p

    {

        margin-top: 35px;

        width: 425px;

    }



    #section-about-label .icone

    {

        margin-left: 60px;

    }



    #section-about-label .icone:nth-child(1)

    {

        margin-right: 60px;

    }



    #section-about-label .icone img

    {

        height: 155px;

    }



    /*

    *

    * = MARQUE ABOUT

    *

    */



    #section-about-marques

    {

        padding: 80px 0;

    }



    #section-about-marques h2

    {

        padding-bottom: 80px;

    }



    #section-about-marques .colonne img

    {

        width: 220px;

    }

}



@media screen and (max-width: 1700px)

{

    /*

    *

    * = PANEL TOP ABOUT

    *

    */



    #section-about-top .introduction

    {

        width: calc(50% - 105px);

        padding: 30px 0;

    }



    #section-about-top .introduction h2

    {

        padding-top: 35px;

        padding-bottom: 15px;

    }



    #section-about-top .introduction .texte-base

    {

        padding-right: 60px;

    }



    #section-about-top .image

    {

        width: calc(50% + 105px); 

    }



    .titre-1 

    {

        font-size: 55px;

        line-height: 50px;

    }





    /*

    *

    * = CHIFFRES ABOUT

    *

    */



    #section-about-chiffres

    {

        padding-top: 45px;

        padding-bottom: 145px;

    }



    #section-about-chiffres .colonne .chiffre

    {

        font-size: 72px;

        padding-bottom: 10px;

    }



    #section-about-chiffres .label-1975 

    {

        width: 200px;

        left: 50px;

        bottom: -185px;

    }



    /*

    *

    * = LABEL ABOUT

    *

    */



    #section-about-label

    {

        padding: 105px 0;

    }



    #section-about-label p

    {

        margin-top: 25px;

        width: 450px;

    }



    #section-about-label .icone

    {

        margin-left: 48px;

    }



    #section-about-label .icone:nth-child(1)

    {

        margin-right: 48px;

    }



    #section-about-label .icone img

    {

        height: 120px;

    }



    /*

    *

    * = MARQUE ABOUT

    *

    */



    #section-about-marques

    {

        padding: 60px 0;

    }



    #section-about-marques h2

    {

        padding-bottom: 60px;

    }



    #section-about-marques .colonne img

    {

        width: 175px;

    }

}



@media screen and (max-width: 1280px)

{

    /*

    *

    * = PANEL TOP ABOUT

    *

    */



    #section-about-top .introduction,

    #section-about-top .image

    {

        width: 65%;

    }



    #section-about-top .introduction

    {

        background: white;

        z-index: 50;

        position: relative;

        padding-right: 50px;

    }



    #section-about-top .container

    {

        padding-top: 50px;

    }

    

    #section-about-top .introduction h2

    {

        padding-top: 20px;

        padding-bottom: 20px;

    }



    #section-about-top .introduction .texte-base

    {

        padding-right: 75px;

    }



    #section-about-top .image

    {

        position: absolute;

        height: 100%;

    }



    .titre-1 

    {

        font-size: 45px;

        line-height: 40px;

    }



    /*

    *

    * = CHIFFRES ABOUT

    *

    */



    #section-about-chiffres .colonne 

    {

        width: calc(100%/4);

        min-height: 0px;

    }



    #section-about-chiffres .colonne .texte-base 

    {

        padding: 0 50px;

    }



    #section-about-chiffres

    {

        padding-top: 75px;

        padding-bottom: 75px;

    }



    #section-about-chiffres .colonne .chiffre

    {

        font-size: 60px;

        padding-bottom: 10px;

    }



    #section-about-chiffres .label-1975 

    {

        display: none;

    }



    /*

    *

    * = LABEL ABOUT

    *

    */



    #section-about-label

    {

        padding: 90px 0;

    }



    #section-about-label p

    {

        margin-top: 20px;

        width: 375px;

    }



    #section-about-label .icone

    {

        margin-left: 30px;

    }



    #section-about-label .icone:nth-child(1)

    {

        margin-right: 30px;

    }



    #section-about-label .icone img

    {

        height: 100px;

    }



    /*

    *

    * = MARQUE ABOUT

    *

    */



    #section-about-marques .colonne 

    {

        width: calc(100% / 5);

    }

}



@media screen and (max-width: 1024px)

{

    /*

    *

    * = PANEL TOP ABOUT

    *

    */



    #section-about-top .introduction .texte-base

    {

        padding-right: 0px;

    }



    .titre-1 

    {

        font-size: 45px;

        line-height: 40px;

    }



    /*

    *

    * = CHIFFRES ABOUT

    *

    */



    #section-about-chiffres .colonne .texte-base 

    {

        line-height: 22px;

    }



    /*

    *

    * = LABEL ABOUT

    *

    */



    #section-about-label

    {

        padding: 80px 0;

    }



    #section-about-label p

    {

        width: 300px;

    }



    #section-about-label .icone img

    {

        height: 80px;

    }



    /*

    *

    * = MARQUE ABOUT

    *

    */



    #section-about-marques .colonne 

    {

        width: calc(100% / 4);

    }

}



@media screen and (max-width: 850px)

{

    /*

    *

    * = PANEL TOP ABOUT

    *

    */



    #section-about-top .image

    {

        position: relative;

        height: 64vw;

    }



    

    #section-about-top .image

    {

        width: 100%;

        margin-top: 0vw;

    }



    #section-about-top .container 

    {

        padding-top: 0px;

        margin-top: -30vw;

    }



    #section-about-top .introduction

    {

        padding-left: 30px;

        padding-right: 30px;

    }



    #section-about-top .container

    {

        margin: 0;

        margin-top: -4vw;

        width: calc(50% + 250px);

        z-index: 100;

        margin-left: auto;

        background-color: white;



    }



    #section-about-chiffres,

    #section-about-top 

    {

        background-color: #eee;

    }



    #section-about-top .introduction

    {

        padding-top: 50px;

        width: 400px;

        padding-right: 50px;

        padding-left: 50px;

        padding-bottom: 60px;

        margin-bottom: 0px;

    }



    .titre-1 

    {

        font-size: 36px;

    }



    /*

    *

    * = CHIFFRES ABOUT

    *

    */



    #section-about-chiffres .colonne 

    {

        width: calc(100%/2);

        min-height: 0px;

        padding-top: 30px;

        padding-bottom: 30px;

    }



    #section-about-chiffres .colonne .texte-base 

    {

        padding: 0 50px;

    }



    #section-about-chiffres

    {

        padding-top: 30px;

        padding-bottom: 30px;

    }



    #section-about-chiffres .colonne:nth-child(1),

    #section-about-chiffres .colonne:nth-child(2)

    {

        display: none;

    }



    #section-about-chiffres .colonne .chiffre

    {

        font-size: 48px;

        padding-bottom: 10px;

    }



    /*

    *

    * = LABEL ABOUT

    *

    */



    #section-about-label

    {

        padding: 60px 0;

    }



    #section-about-label .panel-colonne .colonne.semi

    {

        width: 100%;

        float: none;

    }



    #section-about-label p

    {

        width: 100%;

    }



    #section-about-label .icone img

    {

        height: 80px;

    }



    #section-about-label .label-icones

    {

        margin-top: 60px;

    }



    #section-about-label .icone 

    {

        margin: 0;

        display: block;

        text-align: center;

    }



    #section-about-label .icone:nth-child(1) 

    {

        margin-right: 0;

        margin-bottom: 30px;

    }



    /*

    *

    * = MARQUE ABOUT

    *

    */



    #section-about-marques .colonne 

    {

        width: calc(100% / 3);

    }

}



@media screen and (max-width: 600px)

{

    /*

    *

    * = PANEL TOP ABOUT

    *

    */



    .titre-1 

    {

        font-size: 24px;

        line-height: 28px;

    }

    

    #section-about-top .introduction

    {

        margin: 0 auto;

        display: block;

        width: calc(100% - 60px);

    }



    #section-about-top .container 

    {

        width: calc(100% - 30px);

        margin: 0;

        margin-left: auto;

        padding-top: 0;

        margin-top: -50px;

    }





    /*

    *

    * = CHIFFRES ABOUT

    *

    */



    #section-about-chiffres .colonne 

    {

        width: 100%;

        padding-top: 20px;

        padding-bottom: 20px;

    }



    #section-about-chiffres .colonne .texte-base 

    {

        width: 175px;

        margin: 0 auto;

    }

    

    #section-about-chiffres .colonne .chiffre

    {

        font-size: 32px;

        padding-bottom: 10px;

    }



    /*

    *

    * = LABEL ABOUT

    *

    */



    #section-about-label .panel-colonne .colonne.semi 

    {

        width: calc(100% - 60px);

        float: none;

        padding: 0 30px;

    }



    /*

    *

    * = MARQUE ABOUT

    *

    */



    #section-about-marques .container 

    {

        width: calc(100% - 60px);

    }



    #section-about-marques .colonne 

    {

        width: calc(100% / 2);

    }



    #section-about-top .introduction 

    {

        padding-top: 30px;

        padding-right: 30px;

        padding-left: 30px;

        padding-bottom: 40px;

        margin-bottom: 0px;

    }

}



@media screen and (max-width: 450px)

{    

    /*

    *

    * = MARQUE ABOUT

    *

    */



    #section-about-marques .colonne 

    {

        width: calc(100% / 1);

    }

}