/********************************************************
Fonctionnement
*************************************************************/


.congres-contenu {
    /*
        display: flex;
        justify-content: center;
        align-items: center;
    */

    margin-left: -13%;
    margin-bottom:50px;
}

.congres-contenu h2{
    color: #fff!important;
    font-weight: 300;
    background: #000;

    padding: 7px;

}

.bg article {
    width: 40%;
    float: right;
    margin-top: 100px;
}
.bg p{
    text-align: left!important;
    font-size: 15px!important;
    font-weight: 500;
    padding: 0!important;
}

.intro-page p {
    font-size:20px!important;
    color:#0D5C95!important;
}

div#contenu-fonctionnement {
    padding:0 10% 50px 10%;
}

.bg {
    width: 90%;
    min-height: 400px;
    background:url("/themes/cnsd2/css/img3/photo-congres.jpg") no-repeat;
    background-size:cover;
}
div#cac {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0 0 0;
}


div#ag {
    padding: 50px 10% 10px 10%;
    background: #bbb;
}


div#ag h2{
    color:#fff!important;
}

div#ag p{
    color:#fff!important;
    text-align: center;
    padding: 0 10%;
}
/*organigramme*/

div#organigramme-conf {
    width: 80%;
    margin: 0 auto;
}
.sous-titre {
    font-family: montserrat;
    font-weight: 400;
    text-align: center;
    font-size: 15px;
    padding: 0!important;
    background: none!important;
    color: #0D5C95!important;
    margin-bottom:20px;
}

div#organigramme {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 20px;

}

div#organigramme article .personne {
    display: grid;
    grid-template-columns: 47% 47%;
}
div#organigramme .titre{
    text-transform: uppercase;
    background: #0D5C95;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-weight: 600;
}

div#organigramme-conf h2 {
    letter-spacing: 2px;
    margin: 0;
}

div#organigramme .texte{
    background: #bbb;
    color: #fff;
    padding: 30px 50px;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    margin: 70px 0;
    width: 80%;
    margin: 60px auto;
}

div#organigramme p {
    margin:15px;
}

div#fonction p {
    font-weight: 700;
    width:100%;
}

div#nom p{
    width:100%;
}

div#organigramme .bleu{
    background:#d4e2ed;
    padding:8px;
    color: #0D5C95;
}

article.finances .personne {
    display: block!important;
    width: 93%;
}

article.technique .personne {
    display: block!important;
    width: 93%;
}

article.redac .personne {
    display: block!important;
    width: 93%;
}

/*************************************************************************
mode Petit Ordi 
****************************************************************************/

@media only screen and (max-width: 1500px) and (min-width: 1219px)  {

    div#contenu-fonctionnement {
        padding: 50px 5%!important;
    }

}


/***********************************************************************
mode Tablette 
********************************************************************/
@media only screen and (max-width: 1023px) {

    div#contenu-fonctionnement {
        padding: 50px 5%!important;
    }

    div#organigramme {
        grid-template-columns: inherit!important;
    }


    div#cac{
        display:block;
    }

    #cac img.align-left {
        margin-right: 20%;
        margin-left: 10px;
    }

    .intro-page p {
        font-size: 16px!important;
    }
    .bg article {
        width: 85%;
        background: rgba(255,255,255,0.7);
    }

}


/**************************************************************
mode mobile
********************************************************************/

@media all and (max-width: 767px) {

    div#contenu-fonctionnement {
        padding: 50px 1%!important;
    }
    div#fonction p {
        text-align: left;
        font-size: 10px;}

    div#nom p {
        text-align: left;
        font-size: 10px;}

    #cac img.align-left {
        margin-right: 10px!important;
        margin-left: 10px;
    }
    div#organigramme-conf {
        width: 100%;
        margin: 0 auto;
    }
    div#organigramme p {
        margin: 15px 0px!important;
    }
    div#organigramme article .personne{
        grid-template-columns: 50% 50%!important;
    }
    #cac img.align-left {
        width: 95% !important;
    }
    div#organigramme .texte{width:100%!important;}
}s