/***********************************************************************
                                nos services 
***************************************************************************/

.region.region-services{
    width: 83%;
    margin: 50px auto;
}

.region-services h2{
 
    text-transform: uppercase;
    font-size: 25px;
    font-weight: 400;
    color: #0D5C95!important;
    padding: 0 10px;
        margin: 30px 0;
    border-left: solid 3px #C70626;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: montserrat;

}

div#services-accueil {
    
    padding-top: 30px;
    display: flex;
    justify-content: space-around;
}



#services-accueil div{
    height:400px;
    width:400px;
    position:relative;
    background-position:center;
}


#services-accueil div p {
    position: absolute;
    top: 40%;
    left: 31%;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 25px;
}

#services-accueil div span{
    font-weight:bold;
}
.services-annonces {
    background: url(./img2/bg-petites-annonces-services.jpg);
    transition-duration: 0.5s!important;
    background-size: 100%;
}
.services-annonces:hover {
    background-size: 120%!important;
    transform: scale(1);
    cursor:pointer;
}

.services-mag{
    background:url("./img2/bg-cdf-mag-services.jpg");
    transition-duration: 0.5s!important;
    background-size: 100%;
}
.services-mag:hover {
    background-size: 120%!important;
    transform: scale(1);
    cursor:pointer;
}

.services-cdf{
    background:url("./img2/cdf-services-servicesjpg.jpg");
    transition-duration: 0.5s!important;
    background-size: 100%;
}
.services-cdf:hover {
    background-size: 120%!important;
    transform: scale(1);
    cursor:pointer;
}

.services-cdf p a {
    color:#0D5C95!important;
    
}

#services-accueil a {
    color: #fff;
}


/*mode Petit Ordi */

@media only screen and (max-width: 1500px) and (min-width: 1200px){
   
#services-accueil div {
    height: 320px;
    width: 320px;
}
}

/* mode Tablette */
@media only screen and (max-width: 1220px) {
    
  .region.region-services {
      width: 90%;}
    
    #services-accueil div {
    height: 220px;
        width: 220px;}
    
    #services-accueil div p {
    top: 40%;
    left: 27%;
    font-size: 18px;
}

    
    
}



/* mode mobile */

@media all and (max-width: 767px) {
    
    div#services-accueil{
        display:block!important;
    
    }
    
.region-services h2 {
    font-size: 18px;}


div#services-accueil {
    padding-top: 30px;
    }


#services-accueil div {
    height: 300px;
    width: 300px;
    margin:0 auto 20px auto;
}


#services-accueil div p {
    left: 30%;
    font-size: 20px;
}


}