/*---------Style du menu-------*/
body {
    overflow-x: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.navbar {
    background-color: #fff !important;
}

.navbar .navbar-nav li a {
    color: #707070 !important;
    font-size: 15px;
}


.navbar .navbar-nav li a:hover {
    background-color: #1a2461 !important;
    color: #ffffff !important;
    transition: ease-in-out;
}

.navbar .navbar-toggler {
    background-color: #1a2461;
    color: #ffffff;
}

.active a {
    background-color: #1a2461;
    color: #ffffff;
}
/*-----------------STYLE DU FOOTER--------------------*/

footer {
    background-color: #1a2461;
    color: #fff;
    width: 100%;
    height: 100%;
    padding-top: 15px;
    top: 380px;
    position: relative;
}


.coordone {
    padding-left: 35px;
}

.coordonne {
    padding-left: 35px;
}

.coodone {
    padding-left: 35px;
}

.coodonne {
    padding-left: 35px;
}

.fas .fa-map-marker-alt {
    color: #ffffff;
    font-size: 0px;
}

.foot-actu a {
    list-style: none;
    text-decoration: none;
    color: #ffffff;
}

.foot-reseau a {
    font-size: 30px;
    color: #ffffff;
    text-decoration: none;
    margin-right: 10px;
}

.pied_page p span {
    display: inline-block;
    position: relative;
    margin-left: 10px;
    text-align: justify;
}

/*------------------STYLE DU CAROUSEL ET TEXTE---------------*/

.slidep {
    width: 100%;
    height: 10%;
    position: relative;
    padding: 0px;
}

.carousel-item {
    padding: 0px;
    width: 100%;
    height: 100%;
}

.carousel-caption {
    background-color: rgba(204,204,204,0.7);
    position: absolute;
    top: 30px;
    margin-left: 500px;
    width: 45%;
    max-height: 45%;
    padding: 3%;
    text-align: start;
}


.tex_image {
    margin-left: 35px;
    position: relative;
    top: -170px;
    padding-right: 50px;
}


.texte_accueil {
    position: relative;
    background-color: #1a2461;
    border: 1px solid #fff;
    color: #fff;
    text-align: justify;
    height: 430px;
    top: -10px;
}


.texte_accueil .card-header h2 {
    font-size: 30px;
    text-align: start;
    padding: 0px;
    font-weight: bold;
}

.card-body .card-text {
    font-size: 13px;
    margin-top: -10px;
    padding: 0px;
    font-weight: bold;
}

.les_images {
    position: relative;
    top: 184px;
    padding: 5px;
    margin-left: 0px;
}

.les_images img {
    height: 230px;
}



/*--------------------STYLE DE PRESTATIONS DE SERVICE--------------------------*/

.services {
    top: -160px;
    position: relative;
    padding-left: 35px;
    padding-right: 0px;  
}

.fas .fa-minus {
    padding-right: 2px;
}

.img_service {
    position: relative;
    padding: 5px;
}

.img_service figure {
    padding: 5px;
}

.img_service figure:hover {
    transform: scale(1.1);
    transition: 1s;
}


.cadre_service{
    position: relative;
    margin-top: 50px;
    margin-right: 20px;
}

.cadre_service figure {
    margin: 0px;
    position: relative;
}

.figure-caption {
    color: #1a2461;
    font-size: 18px;
}

figure:hover {
    opacity: .8;
    cursor: pointer;
    transition: 1s;
}

.figure-caption:hover{
    opacity: 0.8;
    cursor: pointer;
}

.text_inge {
    background-color: #1a2461;
    color: #ffffff;
    width: auto;
    height: auto;
    padding: 15px;
    text-align: justify;
    position: relative;
    top: -10px;
    margin-left: 5px;
    margin-right: 90px;
    display: none;
}

.text_four {
    background-color: #1a2461;
    color: #ffffff;
    width: auto;
    height: auto;
    padding: 15px;
    text-align: justify;
    position: relative;
    top: -10px;
    margin-left: 5px;
    margin-right: 90px;
    display: none;
}

.text_cons {
    background-color: #1a2461;
    color: #ffffff;
    width: auto;
    height: auto;
    padding: 10px;
    text-align: justify;
    position: relative;
    top: -10px;
    margin-left: 5px;
    margin-right: 90px;
    display: none;
}

.text_loca {
    background-color: #1a2461;
    color: #ffffff;
    width: auto;
    height: auto;
    padding: 10px;
    text-align: justify;
    position: relative;
    margin-left: 5px;
    margin-right: 40px;
    top: -10px;
    display: none;
}

.loca_img img {
    height: 200px;
    padding-left: 10px;
    filter: opacity(80%);
    cursor: pointer;
}

.legende_loca {
    color: #ffffff;
    font-size: 15px;
    margin-left: 10px;
    padding-top: 10px;
}

.loca_img figure img:hover {
    transform: scale(1.1);
    transition: 1s;
    filter: opacity(100%);
    cursor: pointer;
} 

.ele_service {
    width: 250px;
    transition: 1s;
}

/*-------------------STYLE CEMTECH CI----------------------*/


.cemtech_service {
    position: relative;
    top: -160px;
    margin-left:40px;
    padding-right: 50px;
    padding-left: 0px;
    width: auto;
    height: 610px;
}


._titre {
    position: relative;
    top: 20px;
    color: #1a2461;
    margin-left: 10px;
    
}

.texte_cemtech {
    color: #1a2461;
    position: relative;
    top: 40px;
    text-align: justify;
    margin-left: 0px;
    padding-right: 35px; 
}

.carte_map {
    position: relative;
    top: 30px;
    margin-left: 0px;
}


/*----------------------STYLE DE PROJET EN CI---------------*/

.projet_ci {
    position: relative;
    top: -160px;
    width: auto;
    height: 690px;
    margin-left: 40px;
    padding-right: 50px;
    padding-left: 0px;   
}


.tesxt_image {
    background-color: #1a2461;
    height: 300px;
    width: 100%;
    margin-left: 20px;
    top: 50px;
    position: relative;
    text-align: center; 
}

.img_tesxt img {
    position: relative;
    top: 25px;
    margin-left: 0px;
}

.tesxt_para {
    margin-left: 70px;
    top: 30px;
    margin-bottom: 0px;
    color: #fff;
    text-align: justify;
    padding-left: 30px;
}

.tesxt_para h3 {
    
    font-weight: bold;
    text-transform: uppercase;
    text-align: justify;    
}


.tesxt_image_1{
    background-color: #1a2461;
    height: 300px;
    width: 100%;
    margin-left: 20px;
    top: 50px;
    position: relative;
    text-align: center;
    display: none;
}


.tesxt_para1 {
    margin-left: 390px;
    position: relative;
    top: -225px;
    color: #ffffff;
    text-align: justify;
    padding-left: 30px;
}

.tesxt_para1 h3 {
    font-weight: bold;
    text-transform: uppercase;
    text-align: justify;
}


.tesxt_image_2{
    background-color: #1a2461;
    height: 300px;
    width: 100%;
    margin-left: 20px;
    top: 50px;
    position: relative;
    text-align: center;
    display: none;
}

.tesxt_para2 {
    margin-left: 390px;
    position: relative;
    top: -225px;
    color: #ffffff;
    text-align: justify;
    padding-left: 30px;
}

.tesxt_para2 h3 {
    
    font-weight: bold;
    text-transform: uppercase;
    text-align: justify;    
}

.tesxt_image_3{
    background-color: #1a2461;
    height: 300px;
    width: 100%;
    margin-left: 20px;
    top: 50px;
    position: relative;
    text-align: center;
    display: none;
}

.tesxt_para3 {
    margin-left: 390px;
    position: relative;
    top: -225px;
    color: #ffffff;
    text-align: justify;
    padding-left: 30px;
}

.tesxt_para3 h3 {
   font-weight: bold;
   text-transform: uppercase;
   text-align: justify; 
}

.photo_projet {
    position: relative;
    margin-left: 15px;
    top: 60px;
}

.photo_projet_1 :hover {
    cursor: pointer;
}

.photo_projet_2 :hover {
    cursor: pointer;
}

.photo_projet_3 :hover {
    cursor: pointer;
}

.photo_projet_4 :hover {
    cursor: pointer;
}

.fleche1 {
    margin-left: 45%;
    display: none;
    height: 20px;
    width: auto;
}

.fleche2 {
    margin-left: 45%;
    display: none;
    height: 20px;
    width: auto;
}

.fleche3 {
    margin-left: 45%;
    display: none;
    height: 20px;
    width: auto;
}

.fleche4 {
    margin-left: 45%;
    display: none;
    height: 20px;
    width: auto;
}


h5 {
    position: relative;
    color: #fff;
    margin-left: 0px;
}


/*------------------RECRUTEMENT---------------------*/

.recrute_service {
    position: relative;
    top: -140px;
    padding-right: 50px;
    margin-left: 40px;
    height: auto;
    width: auto;
    margin-bottom: -270px;
}


.recrute_service h6{
    color: #1a2461;
    margin-left: 20px;
    padding-top: 40px;
}

.img_recrute {
    border: 1px solid #1a2461;
    position: relative;
    margin: 5px;
    height: 150px;
    background-color: #1a2461;
    text-align: center;
    cursor: pointer;
}

.img_recrute img {
    position: relative;
    height: 50px;
    top: 40px;

}

.img_recrute p{
    top: 50px;
    position: relative;
}

.texte_recrute {
    position: relative;
    margin-left: 15px;
    font-size: 10px;
    color: #fff;
}


/*------------------LOGO_2----------------------------------*/

.logo_2 {
    position: relative;
    margin-left: 50px;
    top: 150px;
    width: 150px;
    height: auto;
    margin-bottom: -220px;
}


/*--------------------PAGE_ORGANISATION-----------------------*/

#organisation {
    top: 10px;
    position: relative;
    text-align: center;
    color: #1a2461;
    font-weight: bold;
}


.org_text_1 {
    position: relative;
    top: 20px;
    width: auto;
    height: 250px;
    margin-left: 40px;
}

.org_img_1 img {
    position: relative;
    margin-left: 0px;
    top: 5px;
    width: auto;
    height: 230px;    
}

.desc_img_1 {
    background-color: #eaf3f7;
    color: #2e7ba1;
    position: relative;
    text-align: start;
    padding-left: -20px;
    margin-left: -15px;
    width: auto;
    height: 180px;
    top: 30px;
    font-size: 14px;
}

.desc_img_1 p {
    position: relative;
    padding: 0px;
    text-align: start;
    padding-top: 0px;
}

.org_img_2 img {
    position: relative;
    margin-left: 0px;
    top: 0px;
    width: auto;
    height: 230px;    
}

.desc_img_2 {
    background-color: #eaf3f7;
    color: #2e7ba1;
    position: relative;
    text-align: start;
    padding-left: -20px;
    padding-top: 15px;
    margin-left: -15px;
    width: auto;
    height: 180px;
    top: 30px;
    font-size: 14px;
}
.desc_img_2 h4 {
    position: relative;
    top: -13px;
}
.desc_img_2 p {
    position: relative;
    text-align: start;
    top: -15px;
}


.org_text_2 {
    position: relative;
    top: 20px;
    width: auto;
    height: 220px;
    margin-left: 0px;
}

.org_img_3 img {
    position: relative;
    margin-left: 20px;
    padding-left: -10px;
    top: 30px;
    width: auto;
    height: 180px;    
}

.mon_orga_1 {
    margin-left: 40px;
}


.desc_img_3 {
    background-color: #eaf3f7;
    color: #2e7ba1;
    position: relative;
    text-align: start;
    padding-left: -60px;
    margin-left: 5px;
    width: auto;
    height: 160px;
    top: 40px;
    padding-top: 0px;
    font-size: 14px;
}

.desc_img_3 h5 {
    color: #2e7ba1;
    top: 0px;
}

.desc_img_3 p {
    position: relative;
    text-align: justify;
    top: 0px;
}

.mon_orga_1 {
    margin-left: 9px;
    width: 100%;
}

.org_img_4 img {
    position: relative;
    margin-left: 0px;
    padding-left: -10px;
    top: 30px;
    width: auto;
    height: 180px;    
}

.desc_img_4 {
    background-color: #eaf3f7;
    color: #2e7ba1;
    position: relative;
    text-align: start;
    padding-left: -60px;
    margin-left: -15px;
    width: auto;
    height: 170px;
    top: 35px;
    padding-top: 0px;
    font-size: 14px;
}

.desc_img_4 h5 {
    color: #2e7ba1;
    top: 0px;
}

.desc_img_4 p {
    position: relative;
    text-align: justify;
    top: -5px;
}

.org_text_3 {
    position: relative;
    top: 40px;
    width: auto;
    height: 200px;
    margin-left: 0px;
}

.mon_orga_3 {
    position: relative;
    margin-left: 250px;
    width: 100%;
    height: 100px;
    top: -30px;
}

.org_img_5 img {
    position: relative;
    margin-left: 12px;
    top: 30px;
    width: auto;
    height: 180px;    
}

.desc_img_5 {
    position: relative;
    background-color: #eaf3f7;
    color: #2e7ba1;
    position: relative;
    text-align: justify;
    padding-left: 20px;
    margin-left: -58px;
    width: auto;
    height: 140px;
    top: 50px;
    padding-top: 0px;
    font-size: 14px;
}

.desc_img_5 h5 {
    color: #2e7ba1;
    top: 10px;
}

.desc_img_5 p {
    position: relative;
    padding-left: 0px;
    text-align: justify;
    top: 10px;
    width: auto;
}


/*-----------------------SYTLE DE PROPOS-------------------------------*/


#propos {
    font-weight: 1000;
    color: #1a2461;
    margin-left: 250px;
    padding-top: 0px;
}

.texte_propos {
    position: relative;
    height: 450px;
    top: 40px;
    margin-left: 40px;
    color: #707070;
    z-index: 1;
    background-color: rgba(204,204,204,0.5);
}

.texte_propos p{
    position: relative;
    padding-top: 50px;
    padding-right: 60px;
}

.maj_p {
    text-transform: uppercase;
}

.img_propos {
    position: relative;
}

.img_propos img {
    position: relative;
    height: 650px;
    top: -50px;
    margin-left: -100px;
}



/*----------------------STYLE ACTUALITE---------------------------*/


#actua {
    text-align: center;
    text-transform: uppercase;
    color: #1a2461;
    font-weight: bold;
    font-size: 50px;
    margin: 20px;
}

.actua_noel {
    position: relative;
    margin: 30px;
    margin-left: 20px;
    top: -10px;
    height: 350px;
}

.text_actua {
    position: relative;
    padding-left: 60px;
    padding-right: 30px;
    height: 350px;
    padding-top: 30px;
}

.text_actua h4 {
    text-transform: uppercase;
    font-weight: bold !important;
    font-size: 30px !important;
}

.text_actua {
    color: #707070 !important;
    font-size: 16px !important;
    background-color: rgba(204, 204, 204,0.5) !important;
}

.img_actua {
    position: relative;
    padding-left: 0px;
    padding-right: 0px;
    height: 350px;
}

.img_actua img {
    width: 500px;
    height: 350px;
}

.mes_videos iframe {
    position: relative;
    margin-left: 15px;
    padding: 0px;

}

.lec_photo {
    position: relative;
    text-align: center;
    margin-left: 130px;
    border: 10px solid #1a2461;
    height: 550px;
    width: 100%;
    margin-top: -30px;
    display: none;
    margin-left: 130px;
    padding-right: 10px;
    background-color: #1a2461;
}


.lec_photo_1 {
    position: relative;
    text-align: center;
    margin-left: 130px;
    border: 10px solid #1a2461;
    height: 550px;
    width: 100%;
    margin-top: -30px;
    display: none;
    margin-left: 130px;
    padding-right: 10px;
    background-color: #1a2461;
}

.mes_photo {
    margin-top: 10px;
    margin-left: 17px;
}

.mes_photo img {
    padding: 10px;
    width: 320px;
    height: 250px;
    filter: opacity(70%);
    transition: 1s;
}

.mes_photo img:hover {
    cursor: pointer;
    transform: scale(1.1);
    filter: opacity(100%);
}

.titr_pho {
    margin-left: 30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #1a2461;
}

.titr_videos {
    position: relative;
    margin-left: 30px;
    text-transform: uppercase;
    font-weight: bold;
    color: #1a2461;
    padding-top: 20px;
}

.mes_videos {
    margin-left: 2px;
    padding: 10px;
}

.mes_videos iframe:hover {
    cursor: pointer;
    opacity: .5;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}


/*-------------------------RESPONSIVE WEB DESIGN----------------------------------*/

@media screen and (max-width: 500px) {

    /*------------------STYLE MENU------------------------------------*/

    .navbar .navbar-toggler {
        background-color: #707070;
        color: #ffffff;
    }

    button .navbar-toggler {
        color: #ffffff !important;
    }

    /*------------------STYLE DU CAROUSEL ET TEXTE---------------------*/
    
    .carousel-caption {
        display: none;
    }
    
    .slidep {
        width: 1300px;
        height: 10%;
        position: relative;
        padding: 0px;
    }

    .texte_accueil {
        display: none;
    }

    .texte_accueil .card-header h2 {
        display: none;
    }

    .les_images {
        display: none;
    }

    /*-----------------------STYLE DU FOOTER------------------------*/
    
    footer {
        position: relative;
        top: 300px;
        width: auto;
    }

    #pied {
        position: relative;
        margin-left: 150px;
        width: 500px;
        height: auto;
        padding-left: 70px;
    }

    .coordone {
        margin-left: 50px;
    }
    
    .coordonne {
        margin-left: 50px;
    }
    
    .coodone {
        margin-left: 50px;
    }
    
    .coodonne {
        margin-left: 50px;
    }
        
    /*-----------------------LOGO2-----------------------------------*/

    .logo_2 {
        position: relative;
        top: 80px;
        width: 100px;
        height: auto;
        margin-left: 150px;
    }

    /*----------------------PARTIE PRESTATION DE SERVICE--------------*/

    .services {
        top: 0px;
        position: relative;
        margin-left: 150px;
        width: 500px;
        height: auto;
    }

    .services h3 {
        position: relative;
        top: 20px;
        margin-left: 0px;
    }
    
    /*----------------------PARTIE CEMTECH CI-------------------------*/
    .cemtech_service {
        position: relative;
        top: 0px;
        margin-left: 150px;
        width: 700px;
        height: auto;
    }

    .texte_cemtech {
        margin-left: 0px;
        width: 700px;
        height: auto;
        text-align: justify;
    }

    .carte_map iframe {
        width: 700px;
        height: 200px;
    }

    ._titre {
        position: relative;
        top: 20px;
        margin-left: 0px;
        font-size: larger;
    }

  /*----------------------PARTIE PROJET CI--------------------------*/

    .projet_ci {
        position: relative;
        top: 40px;
        margin-left: 150px;
        width: 500px;
        height: auto;
        background-color: #ffffff;
    }
    
    .projet_ci h3 {
        position: relative;
        top: 0px;
        margin-left: 45px;
    }

    .tesxt_image {
        background-color: #1a2461;
        margin-left: 0px;
        padding-left: 0px;
        top: 0px;
        width: 500px;
        height: 700px;
        position: relative;
        border-radius: 0% 0% 10% 10%;
    }
    
    .tesxt_para {
        display: block;
        position: relative;
        margin-left: 50px;
        top: 10px;
        width: 100%;
        color: #ffffff;
        text-align: start;
        height: 400px;
        padding-left: 0px;
    }
    
    .tesxt_para h3 {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: start;
        margin-left: 30px;
        top: 25px;    
        width: 350px;
    }

    .tesxt_para p {
        font-size: 16px;
        position: relative;
        margin-left: 30px;
        top: 30px;
        width: 250px;
        text-align: start;
    }

    .img_tesxt {
        display: block;
        position: relative;
        margin-left: 0px;
    }

    .img_tesxt img {
        position: relative;
        height: 300px;
        width: 450px;
        margin-left: 10px;
    }

    .photo_projet {
        display: none;
    }
    
    .tesxt_image_1 {
        display: none;
    }

    .tesxt_image_2 {
        display: none;
    }

    .tesxt_image_3 {
        display: none;
    }

    /*----------------------PARTIE RECRUTEMENT------------------------*/
    .recrute_service {
        top: 80px;
        position: relative;
        margin-left: 150px;
        margin-bottom: 0px;
        width: 500px;
        height: auto;
    }

    .recrute_service h3 {
        position: relative;
        top: 20px;
    }

    /*----------------------PAGE ORGANISATION-------------------------*/

    #organisation {
        top: 10px;
    position: relative;
    text-align: center;
    color: #1a2461;
    font-weight: bold;
    font-size: larger;
    }

    .org_text_1 {
        display: flex;
        flex-direction: row;
        position: relative;
        top: 0px;
        width: auto;
        height: auto;
        margin-left: 90px;
    }

    .org_text_2 {
        display: flex;
        flex-direction: row;
        position: relative;
        top: -35px;
        width: auto;
        height: auto;
        margin-left: 90px;
    }

    .org_text_3 {
        display: flex;
        flex-direction: row;
        position: relative;
        width: auto;
        height: auto;
        top: 130px;
        margin-left: 90px;
        margin-bottom: 100px;
    }

    .bloque_1 {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-left: 0px;
        margin-bottom: 55px;
        padding-top: 10px;
        width: 500px;
        height: auto;
    }

    .mon_orga_1 {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-left: 0px;
        width: 500px;
        height: auto;
        top: 10px;
    }

    .mon_orga_3 {
        display: flex;
        flex-direction: row;
        margin-left: 20px;
        position: relative;
        width: 450px;
        height: auto;
        top: 15px;
    }
    .super {
        position: relative;
        top: 20px;
    }

    .super_1 {
        position: relative;
        top: 50px;
    }

    .super_2 {
        position: relative;
        top: 130px;
    }

    .super_3 {
        position: relative;
        top: 150px;
    }

    .org_img_1 img {
        position: relative;
        margin-left: 0px;
        padding: px;
        top: 0px;
        width: 160px;
        height: 120px;
        margin-bottom: -50px;    
    }

    .org_img_2 img {
        position: relative;
        margin-left: 0px;
        padding: px;
        top: 0px;
        width: 160px;
        height: 120px;
        margin-bottom: -50px;    
    }

    .org_img_3 img {
        position: relative;
        margin-left: 0px;
        top: -10px;
        width: 160px;
        height: 120px;    
    }

    .org_img_4 img {
        position: relative;
        margin-left: 10px;
        top: -10px;
        width: 160px;
        height: 120px;
        margin-bottom: 0px;    
    }

    .org_img_5 img {
        position: relative;
        margin-left: 0px;
        top: 0px;
        width: 160px;
        height: 120px;    
    }
    
    .desc_img_1 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        padding-left: 15px;
        margin-left: 0px;
        width: 500px;
        height: auto;
        top: 50px;
        font-size: 14px;
    }

    .desc_img_2 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        padding-top: 15px;
        margin-left: 0px;
        width: 500px;
        height: auto;
        font-size: 14px;
        top: 50px;
    }

    .desc_img_3 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        padding-top: 0px;
        margin-left: 0px;
        width: 450px;
        height: auto;
        top: -10px;
        font-size: 14px;
    }

    .desc_img_3 h5 {
        top: 3px;
    }
    .desc_img_3 p {
        position: relative;
        top: 0px;
    }

    .desc_img_3 p {
        top: auto;
    }

    .desc_img_4 {
        background-color: -#eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        margin-left: 0px;
        top: -7px;
        width: 450px;
        height: auto;
        font-size: 14px;
    }

    .desc_img_4 h5 {
        top: 3px;
    }

    .desc_img_5 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        top: 0px;
        margin-left: 0px;
        padding-left: 20px;
        width: 400px;
        height: auto;   
        font-size: 14px;
    }

    .desc_img_5 h5 {
        top: auto;
    }
    
    .desc_img_1 p {
        position: relative;
        padding: 0px;
        text-align: justify;
        padding-top: 0px;
    }


    /*-----------------STYLE ACTUALITE---------------------------------*/
    
    #actua {
        position: relative;
        margin-left: 300px;
        font-size: larger;
    }

    .actua_noel {
        position: relative;
        top: -10px;
        margin-left: 135px;
        width: 700px;
        height: 700px;  
    } 

    .text_actua {
        position: relative;
        display: block;
        margin-left: 0px;
    }

    .text_actua h4 {
        color: #1a2461;
    }

    .text_actua p {
        top: 50px;
        font-size: 22px;
        font-weight: normal;
    }

    .img_actua {
        position: relative;
        display: block;
        top: 50px;
    }

    .img_actua img {
        position: relative;
        width: 500px;
        height: 400px;
        margin-left: 70px;
        top: -120px;
        border-radius: 0% 0% 5% 5%;
    }

    .titr_videos {
        position: relative;
        top: -40px;
        margin-left: 370px;
    }

    .mes_videos {
        position: relative;
        top: -40px;
        margin-left: 150px;
        width: 500px;
        height: auto;
    }

    .mes_videos iframe {
        position: relative;
        margin-left: 70px;
        width: 450px;
        height: 300px;
    }

    .titr_pho {
        display: none;
    }

    .mes_photo {
        display: none;
    }
    
    /*------------------STYLE PROPOS------------------------------------*/


    #propos {
        font-weight: 1000;
        color: #1a2461;
        margin-left: 250px;
        top: 30px;
        position: relative;
        font-size: larger;
    }
    
    .img_propos {
        display: none;
    }

    .texte_propos {
        position: relative;
        top: 50px;
        width: 700px;
        height: auto;
        margin-left: 150px;
        background-color: #ffffff;
    }

    .texte_propos p {
        position: relative;
        width: 500px;
        height: auto;
        background-color: rgb(204, 204, 204, 0.5);
        padding-left: 20px;
        margin-left: -20px;
        text-align: justify;
    }
}

@media screen and (min-width: 501px) and (max-width: 767px) {


    /*------------------STYLE MENU------------------------------------*/

    .navbar .navbar-toggler {
        background-color: #707070;
        color: #ffffff;
    }

    button .navbar-toggler {
        color: #ffffff !important;
    }

    
    /*------------------STYLE DU CAROUSEL ET TEXTE---------------------*/
    
    .carousel-caption {
        display: none;
    }
    
    .slidep {
        width: 1300px;
        height: 10%;
        position: relative;
        padding: 0px;
    }

    .texte_accueil {
        display: none;
    }

    .texte_accueil .card-header h2 {
        display: none;
    }

    
    .les_images {
        display: none;
    }

    /*-----------------------STYLE DU FOOTER------------------------*/
    
    footer {
        top: 540px;
        position: relative;
    }

    #pied {
        position: relative;
        margin-left: 150px;
        width: 700px;
        height: auto;
        padding-left: 150px;
    }

    .coordone {
        margin-left: 50px;
    }
    
    .coordonne {
        margin-left: 50px;
    }
    
    .coodone {
        margin-left: 50px;
    }
    
    .coodonne {
        margin-left: 50px;
    }
    
    
    /*-----------------------LOGO2-----------------------------------*/

    .logo_2 {
        position: relative;
        top: 290px;
        width: 100px;
        height: auto;
        margin-left: 150px;
    }

    /*----------------------PARTIE PRESTATION DE SERVICE--------------*/
    
    .services {
        top: 0px;
        position: relative;
        margin-left: 150px;
    }

    .services h3 {
        position: relative;
        top: 20px;
        margin-left: 0px;
    }
    
    /*----------------------PARTIE CEMTECH CI-------------------------*/

    .cemtech_service {
        position: relative;
        top: 0px;
        margin-left: 150px;
    }


    .texte_cemtech {
        margin-left: 0px;
        width: 800px;
        height: auto;
        text-align: justify;
    }

    .carte_map iframe {
        width: 800px;
        height: 200px;
    }

    ._titre {
        position: relative;
        top: 20px;
        margin-left: 0px;
        font-size: larger;
    }


    /*----------------------PARTIE PROJET CI--------------------------*/

    .projet_ci {
        position: relative;
        top: -20px;
        margin-left: 150px;
        background-color: #ffffff;
    }
    
    .projet_ci h3 {
        position: relative;
        top: 0px;
        margin-left: 45px;
    }

    .tesxt_image {
        background-color: #1a2461;
        margin-left: 50px;
        padding-left: 0px;
        top: 0px;
        width: 500px;
        height: 700px;
        position: relative;
        border-radius: 0% 0% 10% 10%;
    }
    
    .tesxt_para {
        display: block;
        position: relative;
        margin-left: 50px;
        top: 10px;
        width: 100%;
        color: #ffffff;
        text-align: start;
        height: 400px;
        padding-left: 0px;
    }
    
    .tesxt_para h3 {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: start;
        margin-left: 30px;
        top: 25px;    
        width: 350px;
    }

    .tesxt_para p {
        font-size: 16px;
        position: relative;
        margin-left: 30px;
        top: 30px;
        width: 250px;
        text-align: start;
    }

    .img_tesxt {
        display: block;
        position: relative;
        margin-left: 0px;
    }

    .img_tesxt img {
        position: relative;
        height: 300px;
        width: 450px;
        margin-left: 10px;
    }

    .photo_projet {
        display: none;
    }
    
    .tesxt_image_1 {
        display: none;
    }

    .tesxt_image_2 {
        display: none;
    }

    .tesxt_image_3 {
        display: none;
    }

    
    /*----------------------PARTIE RECRUTEMENT------------------------*/

    .recrute_service {
        top: 20px;
        position: relative;
        margin-left: 150px;
    }

    .recrute_service h3 {
        position: relative;
        top: 20px;
    }
    
    /*----------------------PAGE ORGANISATION-------------------------*/

    #organisation {
        top: 10px;
        position: relative;
        text-align: center;
        color: #1a2461;
        font-weight: bold;
        font-size: xx-large;
        margin-left: 80px;
    }

    .org_text_1 {
        display: flex;
        flex-direction: row;
        position: relative;
        top: 15px;
        width: auto;
        height: auto;
        margin-left: 200px;
    }

    .org_text_2 {
        display: flex;
        flex-direction: row;
        position: relative;
        top: -15px;
        width: auto;
        height: auto;
        margin-left: 200px;
    }

    .org_text_3 {
        display: flex;
        flex-direction: row;
        position: relative;
        width: auto;
        height: 250px;
        top: 125px;
        margin-left: 200px;
        margin-bottom: -120px;
    }

    .bloque_1 {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-left: 0px;
        margin-bottom: 55px;
        padding-top: 10px;
        width: auto;
        height: auto;
    }

    .mon_orga_1 {
        display: flex;
        flex-direction: column;
        position: relative;
        margin-left: 0px;
        top: 10px;
        padding-top: 0px;
    }

    .mon_orga_3 {
        display: flex;
        flex-direction: row;
        margin-left: 20px;
        padding-top: 15px;
        position: relative;
        width: 400px;
        height: auto;
        top: auto;
    }

    .super  {
        position: relative;
    }

    .super_1 {
        position: relative;
        top: 20px;
    }

    .super_2 {
        position: relative;
        top: 80px;
    }

    .super_3 {
        position: relative;
        top: 100px;
    }


    .org_img_1 img {
        position: relative;
        margin-left: 0px;
        padding: px;
        top: 0px;
        width: 160px;
        height: 120px;
        margin-bottom: -50px;    
    }

    .org_img_2 img {
        position: relative;
        margin-left: 0px;
        padding: px;
        top: 0px;
        width: 160px;
        height: 120px;
        margin-bottom: -50px;    
    }

    .org_img_3 img {
        position: relative;
        margin-left: 0px;
        top: -10px;
        width: 160px;
        height: 120px;    
    }

    .org_img_4 img {
        position: relative;
        margin-left: 10px;
        top: -10px;
        width: 160px;
        height: 120px;
        margin-bottom: 0px;    
    }

    .org_img_5 img {
        position: relative;
        margin-left: 0px;
        top: 0px;
        width: 160px;
        height: 120px;    
    }
    
    .desc_img_1 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        padding-left: 15px;
        margin-left: 0px;
        width: 500px;
        height: auto;
        top: 50px;
        font-size: 14px;
    }

    .desc_img_2 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        padding-top: 15px;
        margin-left: 0px;
        width: 500px;
        height: auto;
        font-size: 14px;
        top: 50px;
    }

    .desc_img_3 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        padding-top: 0px;
        margin-left: 0px;
        width: 450px;
        height: auto;
        top: -10px;
        font-size: 14px;
    }

    .desc_img_3 h5 {
        top: 3px;
    }
    .desc_img_3 p {
        position: relative;
        top: 0px;
    }

    .desc_img_3 p {
        top: auto;
    }

    .desc_img_4 {
        background-color: -#eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        margin-left: 0px;
        top: -7px;
        width: 450px;
        height: auto;
        font-size: 14px;
    }

    .desc_img_4 h5 {
        top: 3px;
    }

    .desc_img_5 {
        background-color: #eaf3f7;
        color: #2e7ba1;
        position: relative;
        text-align: start;
        top: 0px;
        margin-left: 0px;
        padding-left: 20px;
        width: 400px;
        height: auto;   
        font-size: 14px;
    }

    .desc_img_5 h5 {
        top: auto;
    }
    
    .desc_img_1 p {
        position: relative;
        padding: 0px;
        text-align: justify;
        padding-top: 0px;
    }

    /*-----------------STYLE ACTUALITE---------------------------------*/

    #actua {
        position: relative;
        margin-left: 350px;
        font-size: xx-large;
    }

    .actua_noel {
        position: relative;
        top: 0px;
        width: 850px;
        height: 730px;
        margin-left: 150px;
    } 

    .text_actua {
        position: relative;
        width: 1000px;
        height: 300px;
        display: block;
        margin-left: 0px;
    }

    .text_actua h4 {
        color: #1a2461;
    }

    .text_actua p {
        top: 50px;
        font-size: 22px;
        font-weight: normal;
    }

    .img_actua {
        position: relative;
        display: block;
    }

    .img_actua img {
        position: relative;
        width: 700px;
        height: 500px;
        margin-left: 60px;
        top: -120px;
        border-radius: 0% 0% 5% 5%;
    }

    .titr_videos {
        position: relative;
        top: 0px;
        margin-left: 500px;
    }

    .mes_videos {
        position: relative;
        top: 0px;
        margin-left: 170px;
        margin-bottom: -250px;
    }

    .mes_videos iframe {
        position: relative;
        margin-left: 80px;
        width: 600px;
        height: 350px;
    }

    .titr_pho {
        display: none;
    }

    .mes_photo {
        display: none;
    }

    /*------------------STYLE PROPOS------------------------------------*/

    #propos {
        position: relative;
        margin-left: 350px;
        top: 30px;
        font-size: xx-large;
    }


    .img_propos {
        display: none;
    }

    .texte_propos {
        position: relative;
        top: 50px;
        width: auto;
        height: auto;
        margin-left: 200px;
        margin-bottom: -100px;
    }

    .texte_propos p {
        position: relative;
        width: 600px;
        height: auto;
        top: -30px;
        padding-left: 40px;
        margin-left: -20px;
        font-size: 16px;
        text-align: justify;
    }
}

@media screen and (min-width: 768px) and (max-width: 1000px) {

    /*------------------STYLE DU CAROUSEL ET TEXTE---------------------*/
    
    .carousel-caption {
        display: none;
    }
    
    .slidep {
        width: 120%;
        height: 10%;
        position: relative;
        padding: 0px;
        margin: 0px;
    }

    .texte_accueil {
        display: none;
    }

    .texte_accueil .card-header h2 {
        display: none;
    }
    
    .les_images {
        display: none;
    }

    /*----------------------LOGO2-------------------------------------*/

    .logo_2 {
        position: relative;
        top: 60px;
        width: 100px;
        height: auto;
        margin-left: 50px;
    }

    /*-----------------------STYLE DU FOOTER------------------------*/
    
    footer {
        top: 300px;
        position: relative;
    }

    .coordone {
        margin-left: 100px;
    }
    
    .coordonne {
        margin-left: 100px;
    }
    
    .coodone {
        margin-left: 100px;
    }
    
    .coodonne {
        margin-left: 100px;
    }

    /*----------------------PARTIE PRESTATION DE SERVICE--------------*/
    
    .services {
        top: 0px;
        position: relative;
        margin-left: 15px;
    }

    .services h3 {
        top: 30px;
        margin-left: 10px;  
    }


    /*----------------------PARTIE CEMTECH CI-------------------------*/

    .cemtech_service {
        position: relative;
        top: 10px;
        margin-left: 45px;
    }

    .texte_cemtech {
        margin-left: 0px;
        width: 100%;
        height: auto;
        text-align: justify;
    }

    .carte_map iframe {
        width: 100%;
        height: 200px;
    }

    ._titre {
        position: relative;
        top: 0px;
        margin-left: 50px;
    }


    /*----------------------PARTIE PROJET CI--------------------------*/

    .projet_ci {
        position: relative;
        top: 60px;
        margin-left: 50px;
        background-color: #ffffff;
    }
    
    .projet_ci h3 {
        position: relative;
        top: -30px;
    }

    .tesxt_image {
        display: flex;
        flex-direction: row;
        background-color: #1a2461;
        margin-left: 20px;
        height: 670px;
        width: 600px;
        top: 0px;
        position: relative;
        border-radius: 0% 0% 3% 3%;
    }
    
    .tesxt_para {
        display: block;
        position: relative;
        margin-left: 100px;
        top: 15px;
        margin-bottom: 0px;
        color: #ffffff;
        padding-left: 0px;
    }
    
    .tesxt_para h3 {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: justify;
        margin-left: 50px;
        top: 10px;    
    }

    .tesxt_para p {
        font-size: 16px;
        margin-left: 50px;
        top: 15px;
        text-align: justify;
        position: relative;
    }

    .img_tesxt {
        position: relative;
        display: block;
        margin-left: 30px;
    }

    .img_tesxt img {
        position: relative;
        padding-top: -50px;
        height: 250px;
        width: 400px;
        margin-left: 35px;
    }

    .photo_projet {
        display: none;
    }
    
    .tesxt_image_1 {
        display: none;
    }

    .tesxt_image_2 {
        display: none;
    }

    .tesxt_image_3 {
        display: none;
    }


    /*----------------------PARTIE RECRUTEMENT------------------------*/
    
    .recrute_service {
        top: 50px;
        position: relative;
        margin-left: 45px;
        margin-bottom: 0px;
    }

    .recrute_service h3 {
        top: 40px;
    }


    /*----------------------PAGE ORGANISATION-------------------------*/

    .org_text_1 {
        position: relative;
        top: 20px;
        width: auto;
        height: auto;
        margin-left: 0px;
        display: flex;
        flex-direction: column;
    }

    .bloque_1 {
        width: 810px;
        height: 220px;
        margin-left: 35px;
        padding: 10px;
    }

    .org_img_1 {
        width: 200px;
        height: 200px;
        padding: 0px;
    }

    .org_img_2 {
        width: 200px;
        height: 200px;
        padding: 0px;        
    }

    .org_img_1 img {
        width: 200px;
        height: 195px;
        border-radius: 15% 0% 0% 15%;
    }

    .org_img_2 img {
        width: 200px;
        height: 195px;
        border-radius: 15% 0% 0% 15%;        
    }

    .desc_img_1 {
        top: 5px;
        width: 800px;
        height: 195px;
        position: relative;
        margin-left: -60px;
        padding-left: 20px;
        border-radius: 0% 15% 15% 0%;
    }

    .desc_img_1 p {
        text-align: start;
    }

    .desc_img_2 {
        top: 0px;
        width: 800px;
        height: 195px;
        position: relative;
        margin-left: -60px;
        padding-left: 20px;
        border-radius: 0% 15% 15% 0%;
    }

    .desc_img_2 p {
        padding: 0px;
    }

    .org_text_2 {
        position: relative;
        top: -5px;
        width: auto;
        height: auto;
        margin-left: 0px;
        display: flex;
        flex-direction: column;
    }

    .mon_orga_1 {
        width: 810px;
        height: 220px;
        margin-left: 35px;
        padding: 10px;
    }

    .org_img_3 {
        width: 200px;
        height: 200px;
        padding: 0px;
    }

    .org_img_4 {
        width: 200px;
        height: 200px;
        padding: 0px;
    }

    .org_img_3 img {
        width: 180px;
        height: 180px;
        border-radius: 15% 0% 0% 15%;        
    }

    .org_img_4 img {
        width: 180px;
        height: 180px;
        border-radius: 15% 0% 0% 15%;        
    }

    .desc_img_3 {
        top: 30px;
        width: 800px;
        height: 180px;
        position: relative;
        margin-left: -60px;
        padding-left: 20px;
        border-radius: 0% 15% 15% 0%;
    }

    .desc_img_3 h5 {
        top: 5px;
    }

    .desc_img_4 {
        top: 30px;
        width: 800px;
        height: 180px;
        position: relative;
        margin-left: -60px;
        padding-left: 20px;
        border-radius: 0% 15% 15% 0%;
    }

    .desc_img_4 h5 {
        top: 5px;
    }

    .org_text_3 {
        position: relative;
        top: -5px;
        width: auto;
        height: auto;
        padding-left: 40px;
        margin-left: 0px;
    }

    .mon_orga_3 {
        width: 810px;
        height: 220px;
        margin-left: 35px;
        padding: 10px;
        top: 0px;        
    }

    .org_img_5 {
        width: 200px;
        height: 200px;
        margin-left: 20px;
    }

    .org_img_5 img {
        width: 160px;
        height: 160px;
        border-radius: 15% 0% 0% 15%;
    }

    .desc_img_5 {
        top: 30px;
        width: 800px;
        height: 160px;
        position: relative;
        margin-left: -60px;
        padding-left: 20px;
        border-radius: 0% 15% 15% 0%;
    }

    .desc_img_5 h5 {
        top: 5px;
    }

    .desc_img_5 p {
        text-align: start;
    }


    /*-----------------STYLE ACTUALITE---------------------------------*/


    .mes_photo {
        margin-left: 0px;
        padding-left: 70px;
    }

    .mes_videos {
        margin-left: 0px;
        position: relative;
    }

    iframe {
        display: inline-block;
        width: 350px;
        height: 250px;
        position: relative;
        margin-left: 0px;
    }

    /*------------------STYLE PROPOS------------------------------------*/


    .texte_propos {
        width: 600px;
        height: 470px;
        color: #707070;
        z-index: 1;
        background-color: #ffffff;
        margin-left: 0px;
    }
    
    .texte_propos p {
        position: relative;
        width: 600px;
        height: 470px;
        text-align: justify;
        top: 0px;
        padding-top: 20px;
        padding-left: 20px;
        background-color: rgba(204,204,204,0.5);
    }

    .img_propos {
        position: relative;
    }

    .img_propos img {
        position: relative;
        top: 40px;
        width: 450px;
        height: 400px;
        margin-left: 150px;
    }
}