/* -----------Reset CSS------------ */

*
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
    box-sizing: border-box;
}

/* -----------------Police------------------- */

@font-face
{
	font-family: 'Roboto';
    src: url('font/Roboto/Roboto-Regular.ttf');
}

/* -----------Header------------- */

header
{
    background-color: white;
    position: fixed;
    width: 100%;
    height: 120px;
    box-sizing: border-box;
    border-bottom: solid black 1px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11;
}

header img
{
    width: 250px;
    height: 83px;
    z-index: 11;
}

h1
{
    font-weight: normal;
    display: inline;
    font-family: 'Roboto';
    font-size: 19px;
    margin: 0 10px 0 0;
}

h1 a:hover
{
    text-decoration: underline;
}

h1 a:visited
{
    color: #292045;
}

.logo
{
   margin: 20px 0 0 20px; 
}

.menu
{
    float: right;
    margin: 50px 50px 0 0;
}

.en
{
    width: 16px;
    height: 16px;
    text-align: center;
}

.vertical-line
{
    border-left: 2px solid #315899;
    display: inline-block;
    height: 20px;
    margin: 0 13px 0 13px;
}

nav ul
{
    margin: 50px 0 0 0;
    font-family: 'Roboto';
    font-size: 25px;
    text-align: center;

}

nav ul li:not(:first-child)
{
    margin: 20px 0;
    color: black;
}

nav ul li a:hover
{
    text-decoration: underline;
}

nav ul li a:visited
{
    color: black;
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{
    .menu
    {
        display: none;
    }

    header
    {
        background-color: white;
        position: fixed;
        width: 100%;
        height: 110px;
        top: 0;
        left: 0;
        right: 0;
    }

    header img
    {
        width: 200px;
        height: 66px;
        z-index: 12;
    }

    .burger
    {
        height: 100vh;
        width: 100vw;
        background-color: white;
        position: absolute;
        right: -100vw;
        transition-duration: 700ms;
        z-index: 12;
    }

     .droite
    {
        display: flex;
        top: 0;
        height: 50px;
        position: absolute;
        right: 25px;
        margin: 27px 0 0 20px;
        z-index: 12;
    }

    .trait
    {
        width: 100%;
        height: 3px;
        background-color: black;
        transform-origin: center right;
        transition-duration: 700ms;
    }

    .bouton
    {
        width: 50px;
        cursor: pointer;
        display: flex;
        justify-content: space-around;
        flex-direction: column;
    }
}

@media screen and (min-width: 1020px)
{
    .droite, .burger
    {
        display: none;
    }
}

/* -------------Acceuil------------- */

.content
{
    background-color: white;
    min-height: 82vh;
    margin-top: 120px;
    display: flex;
    flex-direction: column;
}

.tete
{
    display: flex;
    width: 100%;
}

.img_fond
{
    display: flex;
}

.fond
{
    width: 90%;
    height: 70%;
    margin: auto;
}

.texte
{
    font-family: 'Roboto';
    text-align: justify;
    font-size: 1.2em;
    padding: 2% 10% 2% 10%;
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{
    .content
    {
        min-height: 82vh;
        margin-top: 110px;
    }

    .tete
    {
        height: 50vh;
    }

    .fond
    {
        width: 100%;
        background-position: center bottom;
        background-attachment: fixed;
    }

}

/*-------------------Ethique---------------------*/

.bandeau
{
    width: 90%;
    height: 10%;
    margin: auto;
}

.president
{
    text-align: center;
    font-family: 'Roboto';
    font-size: 3em;
    padding: 2% 0 0 0;
}

.txt_president
{
    font-family: 'Roboto';
    text-align: justify;
    font-size: 1.2em;
    padding: 2% 10% 2% 10%;
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{
    .bandeau
    {
        width: 100%;
    }

    .president
    {
        font-size: 2em;
        padding: 2% 0 0 0;
    }
}

/*-------------------Activité--------------------*/

.gauche
{
    font-family: 'Roboto';
    text-align: justify;
    font-size: 1.2em;
    width: 50%;
}

.valorisation
{
    font-family: 'PinyonScript';
    text-align: center;
    font-size: 5em;
    position: absolute;
    width: 60%;
    color: black;
    top: 128%;
    left: 98%;
    transform: translate(-128%, -98%);
}

.conseil
{
    font-family: 'PinyonScript';
    text-align: center;
    font-size: 5em;
    position: absolute;
    width: 60%;
    color: black;
    top: 208%;
    left: 146%;
    transform: translate(-208%, -146%);
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{
    .bandeau_3
    {
        width: 100%;
        height: 100%;
    }

    .valorisation
    {
        display: none;
    }

    .conseil
    {
        display: none;
    }
}

/*--------------------Equipe--------------------*/

.haut
{
    display: flex;
}

.nom
{
    text-align: center;
    font-family: 'Roboto';
}

.post
{
    text-align: center;
    font-family: 'Roboto';
}

.photo1
{
    width: 50%;
}

.fre
{
    text-align: center;
}

.txt_fr
{
    text-align: justify;
    font-family: 'Roboto';
    padding: 5% 20% 7% 15%;
}

.photo2
{
    width: 50%;
}

.jfl
{
    text-align: center;
}

.txt_jfl
{
    text-align: justify;
    font-family: 'Roboto';
    padding: 5% 15% 5% 20%;
}

.bas
{
    display: flex;
}

.photo3
{
    width: 33%;
}

.ega
{
    text-align: center;
}

.txt_ega
{
    text-align: justify;
    font-family: 'Roboto';
    padding: 5% 20% 5% 20%;
}

.photo4
{
    width: 34%;
}

.jle
{
    text-align: center;
}

.txt_jle
{
    text-align: justify;
    font-family: 'Roboto';
    padding: 5% 20% 5% 20%;
}

.photo5
{
    width: 33%;
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{
    .haut
    {
        display: table-column;
    }

    .photo1
    {
        width: 100%;
    }

    .photo2
    {
        width: 100%;
    }

    .bas
    {
        display: table-column;
    }

    .photo3
    {
        width: 100%;
    }

    .photo4
    {
        width: 100%;
    }

    .photo5
    {
        width: 100%;
    }

}

/*-----------------Références--------------------*/

.CRPN
{
    width: 33.3%;
    text-align: center;
}

.allianz
{
    width: 33.3%;
    text-align: center;
}

.taille
{
    width: 90%;
    padding-top: 12%;
}

.eiffel
{
    width: 33.3%;
    text-align: center;
}

.taille2
{
    width: 50%;
    padding-top: 12%;
}

.millieu1
{
    display: flex;
}

.epargne
{
    width: 50%;
    text-align: center;
}

.taille4
{
    width: 60%;
}

.freo
{
    width: 50%;
    text-align: center;
}

.taille5
{
    width: 60%;
}

.millieu2
{
    display: flex;
}

.maf
{
    width: 33.3%;
    text-align: center;
}

.taille6
{
    width: 90%;
    text-align: center;
}

.seqens
{
    width: 33.3%;
    text-align: center;
}

.taille8
{
    width: 70%;
    padding-top: 27%;
}

.millieu3
{
    display: flex;
}

.domaxis
{
    width: 50%;
    text-align: center;
}

.taille9
{
    width: 80%;
}

.immovalor
{
    width: 50%;
    text-align: center;
}

.taille10
{
    width: 50%;
}

.monceau
{
    text-align: center;
}

.taille11
{
    width: 20%;
}

.vinci
{
    width: 33.3%;
    text-align: center;
}

.taille13
{
    width: 70%;
    padding-top: 30%;
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{
    .millieu1
    {
        display: table-column;
    }

    .millieu2
    {
        display: table-column;
    }

    .millieu3
    {
        display: table-column;
    }

    .CRPN, .allianz, .eiffel, .epargne, .freo, .maf, .paref, .seqens, .domaxis, .immovalor, .monceau, .tikehau, .vinci
    {
        width: 100%;
    }
}
/*-----------------Contact----------------------*/

.txt_contact
{
    font-family: 'Roboto';
    text-align: center;
    font-size: 1.2em;
    padding: 2% 10% 2% 10%;
}

.google
{
    display: flex;
}

.map
{
    width: 102%;
    text-align: center;
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{
    .contact
    {
        font-size: 6em;
        top: 37%;
        left: 43%;
        transform: translate(-37%, -43%);
    }

    .map
    {
        width: 100%;
    }
}

/*--------------Mentions Légales----------------*/

.mention
{
    font-family: 'Roboto';
    text-align: justify;
    padding: 10px 10px 10px 10px;
    font-size: 1.1em;
}

/* -----------Footer---------- */

.saut
{
    display: none;
}

.footer
{
    background-color: white;
	width: 100%;
	height: 90px;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    border-top: solid black 1px;
}

.box1
{
    font-family: 'Roboto';
    font-size: 1.2em;
    width: 33.3%;
    text-align: left;
}

.box2
{
    width: 33.3%;
    text-align: center;
}

.box3
{
    width: 33.3%;
    text-align: right;
}

.ml
{
    color: black;
    margin-left: 10px;
}

.ml:hover
{
    text-decoration: underline;
}

.ml:visited
{
    color: black;
}

.copy
{
    margin-left: 10px;
}

.boreal
{
    height: 70px;
    width: 50px;
}

.li
{
    width: 60px;
    height: 60px;
}

@media screen and (min-width: 0px) and (max-width: 1020px)
{

    br
    {
        display: unset;
    }
    .footer
    {
        background-color: white;
        width: 100%;
        height: 100px;
        display: flex;
        align-items: center;
    }

    .box1
    {
        font-family: 'Roboto';
        font-size: 0.9em;
    }

    .box2
    {
        text-align: center;
    }

    .box3
    {
        text-align: center;
    }

    .copy
    {
        text-align: center;
    }

    .ml
    {
        text-align: center;
    }

    .boreal
    {
        height: 80px;
        width: 50px;
    }

    .li
    {
        width: 50px;
        height: 50px;
    }
}