*{
    margin: 0;
    padding: 0;
}
*::selection{
    background: #e30613 !important;
}
.featured_works, .book_now_aera, .our_services_area{
    display: none;
}
.latest_blog_area{
    background: #2e3841;
    color: #fff !important;
}

.latest_blog_area h2{
    color: #fff !important;
}
.blog_content{
    background: #fff !important;
    padding: 10px 10px 25px 10px;
}
.our_achievments_area{
    padding-bottom: 0;
}
.our_achievments_area .achievments_row{

    padding-top: 15px;
}
.achievments_row{
    padding-bottom: 10px;
}
div.wow h2.h2{
    padding-top: 0;
}
div.wow h2.h2::after{
    bottom: -10px;/* 
    left: 70px; */
}
.our_partners_area .partners{
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 30px;
}
footer p{
    color: #fff !important;
}
.footer_row{
    padding: 20px 0px 0px 0px !important;
}
.footer_about{
    padding-bottom: 20px !important;
}
/* 
::-webkit-scrollbar{
    width: 25px;
}
::-webkit-scrollbar-track{
    border: 7px solid #232943;
    box-shadow: inset 0 0 2.5px 2px rgba(0, 0, 0, .5);
} */
/* 
main .container .row .list-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

main .container .row .list-group div.col-sm4,
main .container .row .list-group div.col-xs-6,
main .container .row .list-group div.col-md-3,
main .container .row .list-group div.col-lg-3{
    float: none;
    padding: 0;
}
main .container .row .list-group div#dernier{
    transform: translateX(-200%);
}
main .container .row .list-group .thumbnail{
    width: 200px;
    height: 100px;
    padding: 0;
}
main .container .row .list-group .thumbnail img{
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
} */
p{
    
    
    font: 400 16px/26px "Roboto", sans-serif;
    color: rgb(30, 36, 40) !important;
}

.paragraphe{
    color: #fff !important;
}
body, .what_we_area{
    background: #2e3841 !important;
}
.what_we_area > .container > .tittle h2{
    color: #fff;
}
header{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
    position: absolute;
    z-index: 2;
    margin-top: 20px;
}
.menu{
    display: flex;
    flex-direction: row;
    background-color: rgba(30, 36, 40, 0.9);
    border-radius: 5px;
}
.menu li{
    list-style-type: none;
    border-left: 0.5px solid rgba(241, 242, 246, .5);
    padding: 10px;
    position: relative;
}
.menu li:nth-child(1){
    border-left: none;
}
.menu li .menu-niveau-1{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    padding: 10px;
    text-decoration: none;
    z-index: 3;
    transition: background-color .5s;
    letter-spacing: 1px;
}
.menu li:hover .menu-2{
    transition: .5s;
    display: block;
}
.menu li:hover{
    background-color: red;
    transition: background-color .5s;
}

.logo{
    width: 200px;
    height: 150px;
    background: rgba(255, 255, 255, .5);
    border-radius: 10px;
}
.logo:hover{
    background-color: #fff;
    border-radius: 10px;
    width: 250px;
    height: 150px;
    transition: .6s;
    text-align: center;
}
.logo img{
    object-fit: cover;
    object-position: center;
    width: 200px;
    height: 150px;
}
.menu li .menu-2{
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(30, 36, 40, 0.9);
    width: auto;
    transition: .5s;
    display: none;
    letter-spacing: 1px;
}
.menu-2 li{
    padding: 10px;
    width: auto;
    border-bottom: 0.5px dotted rgba(255, 255, 255, .2);
}
.menu-niveau-2{
    
    font-size: 15px;
    color: #fff;
    text-transform: capitalize;
    text-decoration: none;
    z-index: 3;
    padding: 1px;
    width: 300px;
    display: inline-block;
}
.menu-niveau-2:hover{
    text-decoration: none;
    color: #fff;
}
.div_menu{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.appel{
    background-color: #2c99d5;
    color: #fff;
    font-size: 15px;
    padding: 10px;
    border-radius: 5px;
}
.appel:hover{
    color: #fff;
    text-decoration: none;
    background-color: #e30613;
}
.slider_area{
    z-index: 1;
}

/* SERVICES */
#section-2 .services{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: calc(100% - 100px);
    margin: auto;
}
#section-2 .services .box{
    padding: 20px;
    background: #fff;
    margin: 0 10px;
    border-radius: 10px;
    box-shadow: 10px 0 10px rgba(47,53,66,.3);
}
#section-2 .box .fa{
    font-size: 30px;
    color: #2c99d5;
}
#section-2 .box div{
    
    text-align: center;
}
#section-2 .box h4{
    text-align: center;
    padding: 10px 0;
}
#section-2 .box p{
    text-align: justify;
}
#section-2{
    transform: translateY(-35%);
}
/* CORPS DE LA PAGE */
main{
    width: calc(100% - 100px);
    margin: auto;
    /*background: #f5f6fa !important;*/
    
}
/* QUI sommes nous */
.qui-sommes-nous{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: rgba(255, 255, 255, .5);
    padding: 20px;
}

.qui-sommes-nous .titre h2{
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
}
.qui-sommes-nous .titre p{
    text-align: center;
    font-size: 13px;
}
.qui-sommes-nous .titre{
    padding-bottom: 50px;
}
.qui-sommes-nous div:nth-child(2){
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
}
.qui-sommes-nous .gauche{
    flex: 4;
}
.qui-sommes-nous .gauche p{
    padding: 10px 0;
    padding-right: 30px;
    text-align: justify;
}
.qui-sommes-nous .gauche a{
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #2c99d5;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 7px;
    letter-spacing: 1px;
    margin-top: 15px;
    display: inline-block;
}
.qui-sommes-nous .gauche a:hover{
    color: #fff;
    text-decoration: none;
    background-color: #e30613;
}
.qui-sommes-nous .droite{
    flex: 2;
}

/* NOUVAUTE */
.news > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.news > div .box{
    display: flex;
    flex-direction: row;
    margin: 20px 0;
    background: #fff;
    border-radius: 10px;
}
.news > div .box div:nth-child(2){
    width: 450px;
    padding: 0 10px;
}
.news > div .box div:nth-child(2) p{
    font-size: 20px;
    padding: 10px 0;
}
.news > h2{
    padding: 50px 0;
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
}
/* PLAN AMENAGEMENT */

.banner{
    width: auto;
    height: 500px;
    position: relative;
}
@media screen and (max-width: 1920px ) and (min-width: 1500px){
    .banner{
        height: 700px;
    }
}
.banner img{
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}
.text-image{
    position: absolute;
    width: 100%;
    top: 70%;/* 
    left: 18%; */
}
.text-image > p:nth-child(1){
    font-size: 22px;
    font-weight: 500;
    color: #fff !important;
    padding: 20px 220px;/* 
    transform: translateY(-50%); */
}
.text-image > h1:nth-child(2){/* 
    transform: translateY(-100%); */
    font-size: 50px;
    font-weight: 600;
    letter-spacing:  -1.5px;
    color: #fff !important;
    padding: 0 220px;
    font-family: 'Lobster', cursive;
    text-shadow: 10px 15px 25px rgba(0, 0, 0, .5);
}
@media screen and (max-width: 1920px) and (min-width: 1500px){
    .text-image > p:nth-child(2){
        letter-spacing: 1.5px;
    }
}
.demande{
    width: 100%;
    background: #e30613;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: absolute; 
    top: 100%;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5),
                10px 10px 10px rgba(54, 54, 54, .5);
}
.demande form{
    padding-left: 30px;
}
.demande form div.ligne .ensemble input{
    width: 500px;
    height: 35px;
    border: none;
    border-radius: 5px;
    padding: 10px;
}

.demande form div.ligne .ensemble label{
    color: #fff;
}
.demande form div.ligne .ensemble label,
.demande form div.ligne .ensemble input{
    display: block;
}
.demande form div.ligne .ensemble{
    margin: 0 10px;
}
.demande form div.ligne{
    display: flex;
    flex-direction: row;
    padding: 10px 0;
}
.demande form div.ligne:last-child{
    flex-direction: column;
}

.demande form div.ligne .ensemble:last-child{
    width: 100%;
}
.demande form div.ligne textarea#message-etude{
    background: #fff;
    width: 100%;
    position: static;
    color: inherit;
    resize: none;
    border-radius: 5px;
    border: none;
    padding: 10px;
}
.demande form button{
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    background: #2c99d5;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
}
.demande .affaire{
    position: relative;
    width: 55%; 
    height: auto;
    overflow: hidden;
}
.demande .affaire::before{
    content: '';
    background: #2c99d5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    transform-origin: bottom;
    transform: skewX(-15deg);
    z-index: 1;
}
.demande .affaire img{
    width: 460px;
    height: 360px;
    position: relative;
    z-index: 2;
    transform: translateX(-100px);
}
.plan{
    background: #fff;
    padding: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
}
.plan h1{
    color: rgb(34, 34, 34);
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    letter-spacing: 2px;
}
.plan p{

    padding: 5px 0;
    text-align: justify;
    font: 400 14px/26px "Roboto", sans-serif;
}
.dimension-2d{

    padding: 20px 0 0;
    color: rgb(34, 34, 34);
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 24px;
}

main.plan .container .row .list-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

main.plan .container .row .list-group div.col-sm4,
main.plan .container .row .list-group div.col-xs-6,
main.plan .container .row .list-group div.col-md-3,
main.plan .container .row .list-group div.col-lg-3{
    float: none;
    padding: 0;
}
main.plan .container .row .list-group div#dernier{
    transform: translateX(-200%);
}
main.plan .container .row .list-group .thumbnail{
    width: 200px;
    height: 100px;
    padding: 0;
}
main.plan .container .row .list-group .thumbnail img{
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

main.plan article ul li{
    list-style: none;
    font-size: 15px;
    padding: 5px 0;
    transition: 1s !important;
}
main.plan article ul li:hover{
    color: #e30613;
}
main.plan article ul li .fa{
    font-size: 10px;
    padding-right: 10px;
    color: #2c99d5;
}
main.plan article ul li:hover .fa{
    padding-right: 0;
    transition: .5s;
    color: #e30613;
}
main.plan article h2{
    
    font-family: "Oswald", sans-serif;
    padding-bottom: 10px;
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
    margin-bottom: 20px;
}

main.plan .box{
    /* width: 850px; */
    margin: 40px auto;
    padding: 40px;
    background: #052152;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    border-radius: 10px;
}

main.plan .box ul{
    position: relative;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    border-left: 2px solid #020c1d;
}
main.plan .box ul::before{
    content: 'Etape d\'une solution clé en main';
    position: absolute;
    top: -5%;
    left: 0;
    background: #011029;
    display: block;
    width: 100%;/* 
    height: 20px; */
    color: #fff;
    z-index: 1;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    text-transform: uppercase;
    font-weight: 900;
    font-family: "Roboto", sans-serif;
    letter-spacing: 1px;
    letter-spacing: 2px;

}

main.plan .box ul li{
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    position: relative;
}
main.plan .box ul li .description{
    padding: 30px;
    border-radius: 10px;
    background: linear-gradient(to bottom,#052152,#052152,#020c1d);
}

main.plan .box ul li .item{
    position: relative;
    padding: 30px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
main.plan .box ul li .item .image{
    margin-left: 20px;
    width: 300px;
    height: 200px;
}
main.plan .box ul li .item .image img{
    border-radius: 10px;
    width: 300px;
    height: 200px;
    object-fit: cover;
}
main.plan .box ul li .item:hover{
    background: #041940;
    transition: 1s;
}
main.plan .box ul li .item::before{
    content: '';
    position: absolute;
    top: 32px;
    left: -6px;
    width: 12px;
    height: 12px;
    background: #021434;
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 1);
}
main.plan .box ul li .item::after{
    content: '';
    position: absolute;
    top: 32px;
    left: -6px;
    width: 12px;
    height: 12px;
    background: #ff0;
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(255, 255, 0, 1);
    opacity: 0;
}
main.plan .box ul li .item:hover:after{
    animation: clillontant .5s linear infinite;
}
@keyframes clillontant{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
main.plan .etape-masque{
    transform: translateX(-50%);
    opacity: 0;
    transition: 1s;
}
main.plan .etape-visible{
    transform: translateX(0);
    opacity: 1;
    transition: 1s;
}
main.plan .box ul li .item span{
    padding: 4px 12px;
    background: #007faf;
    border-radius: 15px;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 600;
}

main.plan .box ul li .item:hover span{
    background: #e91e63;
    transition: 1s;
}

main.plan .box ul li .item h3{
    margin: 10px 0 0;
    padding: 0;
    color: #007faf;
    font-family: 'Quicksand', sans-serif;
}
main.plan .box ul li .item:hover h3{
    color: #ff0;
    transition: 1s;
}

main.plan .box ul li .item p{
    margin: 10px 0 0;
    padding: 0;
    color: #fff !important;
    font-size: 15px;
    text-align: justify;
    font-family: 'Quicksand', sans-serif;
}
/* FIN PLAN AMENAGEMENT */
/* ARCHITECTURE D'INTERIEUR */
main.architecture{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #fff;
  padding: 20px;
  box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
}
main.architecture > section.architecture > h1{
  text-align: center;
  text-transform: uppercase;
  font-size: 36px;
  font-weight: 700;
  font-family: "Roboto", sans-serif;
}
main.architecture section.architecture h2{
    font-family: "Oswald", sans-serif;
    padding: 20px 0 10px;
    font-size: 30px;
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
}
section.architecture{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 20px;
}
section.architecture article > h1{
    background: linear-gradient(25deg,#e30613,#2c99d5);
    color: #fff;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    transform: translate(-100%,110%);
    box-shadow: 6px 6px 10px rgba(0, 0, 0, .5);
}
section.architecture article p.a{
    font-size: 20px;
    color: #222222;
    letter-spacing: 1px;
    padding-left: 10px;
    font-family: "Oswald", sans-serif;
}
section.architecture article > p:nth-child(3){
    color: #2c99d5;
    border-bottom: 1px dotted rgba(34,34,34,.3);
    margin-bottom: 20px;
}

main.architecture .container .row .list-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

main.architecture .container .row .list-group div.col-sm4,
main.architecture .container .row .list-group div.col-xs-6,
main.architecture .container .row .list-group div.col-md-3,
main.architecture .container .row .list-group div.col-lg-3{
    float: none;
    padding: 0;
}
main.architecture .container .row .list-group div#dernier{
    transform: translateX(-200%);
}
main.architecture .container .row .list-group .thumbnail{
    width: 200px;
    height: 100px;
    padding: 0;
}
main.architecture .container .row .list-group .thumbnail img{
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}

section.architecture div.banner{
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 3px;
    height: 400px;
    margin: 15px 0;
}
.design-2{
    background-image: url(images/design-1.gif);
}
.design-3{
    background: url(images/projections-3d/3d-3.jpeg);
}
.design-1{
    background: url(images/Capture.jpg);
}

section.architecture article div a{
    display: block;
    background: #2c99d5;
    width: 200px;
    padding: 10px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
}
section.architecture article div a:hover{
    background: #e30613;
}
section.architecture article div .image-realisation{
    width: 800px;
    height: 400px;
    padding: 20px 0;
}

section.architecture article div .image-realisation img{
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
}
main.architecture > section.architecture > h1.b{
    font-size: 15px;
    padding: 30px 0 20px;
}
main.architecture > section.architecture p{
    text-align: justify;
}
  .specialite{
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
  }
  .specialite:last-child{
    margin-bottom: 0;
  }
  .specialite:hover{
    background: rgba(227, 6, 19,.9);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
    transition: 950ms;
  }
  .specialite:hover .fa,
  .specialite:hover span,
  .specialite:hover p{
    color: #fff;
    transition: all 650ms;
  }
  .specialite span{
    font-size: 20px;
    font-weight: 600;
    padding-left: 10px;
  }
  .specialite p{
    text-align: justify;
  }
  .specialite .fa{
    font-size: 25px;
    color: #e30613;
  }
  .meilleurs{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex: 2;
    padding: 10px 10px !important;
    height: 500px;
    margin-bottom: 50px;
    border-radius: 10px;
  }
  .meilleurs p{
    font-size: 15px;
    color: #222222;
  }
  section.architecture{
    flex: 5;
  }
/* FIN ARCHITECTURE D'INTERIEUR */
/* SPACE-PLANNING */
[class*="reveal-"]{
    opacity: 0;
    transform: translateY(-30px);
}
/* .equipe-masque, */
[class*='equipe-']{
    opacity: 0;
    transform: translateX(-58%);
}
.reveal{
    opacity: 0;
    transform: translateY(-50px);
}
.reveal-visible{
    opacity: 1;
    transform: translateY(0);
    transition: 1s /* cubic-bezier(.5,0,0,1)*/ ;
}
.equipe-visible{
    opacity: 1;
    transform: translateX(0);
    transition: 1s /* cubic-bezier(.5,0,0,1) */;
}
.reveal-1,
.equipe-1{
    transition-delay: .1s;
}
.reveal-2,
.equipe-2{
    transition-delay: .2s;
}
.reveal-3,
.equipe-3{
    transition-delay: .3s;
}
.reveal-4,
.equipe-4{
    transition-delay: .4s;
}
main.space-planning{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.space-planning > section.space-planning > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    /* padding-bottom: 50px; */
  }
  main.space-planning > section.space-planning{
      padding-right: 20px;
  }
  main.space-planning > section.space-planning > p{
      padding: 2px 0;
  }
  main.space-planning > section.space-planning > h2{
      font-family: "Oswald", sans-serif;
      padding: 20px 0 10px;
      border-bottom: 1px dotted rgba(0, 0, 0, .2);
      margin-bottom: 10px;
  }
  section.space-planning{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

    .image-realisation-bg{
        width: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 3px;
        height: 300px;
        background-image: url(images/amenagement_bureaux_paris-26-scaled.jpg);
        margin: 10px 0;
    }
  
  section.space-planning article > h1{
      background: linear-gradient(25deg,#e30613,#2c99d5);
      color: #fff;
      width: 50px;
      border-radius: 50%;
      text-align: center;
      font-weight: bold;
      transform: translate(-100%,110%);
      box-shadow: 6px 6px 10px rgba(0, 0, 0, .5);
  }
  section.space-planning article p.a{
      font-size: 20px;
      color: #222222;
      letter-spacing: 1px;
      padding-left: 10px;
      text-transform: uppercase;
      font-family: "Oswald", sans-serif;
  }
  section.space-planning article > p:nth-child(3){
      color: #2c99d5;
      border-bottom: 1px dotted rgba(34,34,34,.3);
      margin-bottom: 20px;
  }
  section.space-planning article ul li{
      list-style: none;
      font-size: 15px;
      padding: 5px 0;
  }
  section.space-planning article ul li:hover{
      color: #e30613;
      transition: .5s;
  }
  section.space-planning article ul li .fa{
      font-size: 10px;
      padding-right: 10px;
      color: #2c99d5;
  }
  section.space-planning article ul li:hover .fa{
      padding-right: 0;
      transition: .5s;
      color: #e30613;
  }
  
  section.space-planning article div a:hover{
      text-decoration: none;
  }
  section.space-planning article div .image-realisation{
      width: 800px;
      height: 400px;
      padding: 20px 0;
  }
  
  section.space-planning article div .image-realisation img{
      max-width: 100%;
      max-height: 100%;
      border-radius: 5px;
  }
  main.space-planning > section.space-planning > h1.b{
      font-size: 15px;
      padding: 30px 0 20px;
  }
  main.space-planning > section.space-planning p{
      text-align: justify;
  }
  main.space-planning > section.space-planning > .image-realisation{
    width: 800px;
    height: 400px;
    padding: 20px 0;
    margin: auto;
  }
  main.space-planning > section.space-planning > .image-realisation img{
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
  }
  .plan-projets{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0 0;
  }
  .plan-projets div{
      width: 200px;
      height: 130px;
  }
  .plan-projets div img{
      width: 200px;
      height: 130px;
      object-fit: cover;
      object-position: center;
      border: 1px solid rgba(255,0,0,.5);
      border-radius: 5px;
  }
    .specialite{
      background: #fff;
      border-radius: 10px;
      padding: 10px;
      margin-bottom: 20px;
    }
    .specialite:last-child{
      margin-bottom: 0;
    }
    .specialite:hover{
      background: rgba(227, 6, 19,.9);
      box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
      transition: 950ms;
    }
    .specialite:hover .fa,
    .specialite:hover span,
    .specialite:hover p{
      color: #fff;
      transition: all 650ms;
    }
    .specialite span{
      font-size: 20px;
      font-weight: 600;
      padding-left: 10px;
    }
    .specialite p{
      text-align: justify;
    }
    .specialite .fa{
      font-size: 25px;
      color: #e30613;
    }
    .meilleurs{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex: 2;
      padding: 10px 10px !important;
      height: 500px;
      box-shadow: -1px 0 10px rgba(206,214,224,.8);
    }
    .meilleurs p{
      font-size: 15px;
      color: #222222;
    }
    section.space-planning{
      flex: 5;
    }
/* FIN SPACE-PLANNING */
/* CONTRACTANT */

main.contractant{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.contractant > section.contractant > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.contractant .container .row .list-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

main.contractant .container .row .list-group div.col-sm4,
main.contractant .container .row .list-group div.col-xs-6,
main.contractant .container .row .list-group div.col-md-3,
main.contractant .container .row .list-group div.col-lg-3{
    float: none;
    padding: 0;
}/* 
main.contractant .container .row .list-group .thumbnail{
    width: 500px;
    height: 300px;
    padding: 0;
}
main.contractant .container .row .list-group .thumbnail img{
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
} */
  
  /*  */ 
  main.contractant > section.contractant div#container{
      width: 100% !important;
  }
  main.contractant #container .row .list-group{
      width: 100%;
      flex-wrap: nowrap;
  }
  main.contractant #container .row .list-group [class*="col-"]{
      width: 100%;
  }
  
    main.contractant #container .row .list-group .thumbnail{
        width: 500px;
        height: 300px;
        padding: 0;
    }
    main.contractant #container .row .list-group .thumbnail img{
        width: 500px !important;
        height: 300px;
        object-fit: contain;
        object-position: center;
    } 
    .image-contractant{
        width: 100%;
        background-size: cover;
        background-position: center;
        border-radius: 3px;
        height: 300px;
        background-image: url(images/amenagement_plateau_bureau_paris_ouest-002-scaled.jpg);
        margin: 10px 0;
    }

  main.contractant > section.contractant{
      padding-right: 20px;
  }
  main.contractant > section.contractant > p{
      padding: 2px 0;
  }
  main.contractant > section.contractant > h2{
      font-family: "Oswald", sans-serif;
      padding: 20px 0 10px;
      border-bottom: 1px dotted rgba(0, 0, 0, .2);
      margin-bottom: 10px;
  }
  section.contractant{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.contractant > section.contractant > h1.b{
      font-size: 15px;
      padding: 30px 0 20px;
  }
  main.contractant > section.contractant p{
      text-align: justify;
  }
  main.contractant > section.contractant > .image-realisation{
    width: 800px;
    height: 400px;
    padding: 20px 0;
    margin: auto;
  }
  main.contractant > section.contractant > .image-realisation img{
    max-width: 100%;
    max-height: 100%;
    border-radius: 5px;
  }
  
  section.contractant ul li{
    list-style: none;
    font-size: 15px;
}
section.contractant ul li:hover{
    color: #e30613;
    transition: .5s;
}
section.contractant ul li .fa{
    font-size: 10px;
    padding-right: 10px;
    color: #2c99d5;
}
section.contractant ul li:hover .fa{
    padding-right: 0;
    transition: .5s;
    color: #e30613;
}
/* FIN CONTRACTANT */

/* CLOISON-AMOVIBLE-DE-BUREAU */

main.cloison-amovible-de-bureau{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.cloison-amovible-de-bureau > section.cloison-amovible-de-bureau > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.cloison-amovible-de-bureau > section.cloison-amovible-de-bureau{
      padding-right: 20px;
  }
  main.cloison-amovible-de-bureau > section.cloison-amovible-de-bureau > p{
      padding: 2px 0;
  }
  main.cloison-amovible-de-bureau > section.cloison-amovible-de-bureau > h2{
      font-family: "Oswald", sans-serif;
      padding: 20px 0 10px;
  }
  section.cloison-amovible-de-bureau{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.cloison-amovible-de-bureau > section.cloison-amovible-de-bureau > h1.b{
      font-size: 15px;
      padding: 30px 0 20px;
  }
  main.cloison-amovible-de-bureau > section.cloison-amovible-de-bureau p{
      text-align: justify;
  }
  section.cloison-amovible-de-bureau > div{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }
  section.cloison-amovible-de-bureau > div > div:nth-child(1){
      flex: 3;
      padding-right: 50px;
  }
  section.cloison-amovible-de-bureau > div > div:nth-child(1) p:nth-child(1){
    font-weight: bold;
    font-size: 18px;
  }
  section.cloison-amovible-de-bureau > div > div:nth-child(2){
      width: 300px;
      height: 130px;
  }
  section.cloison-amovible-de-bureau > div > div img{
    max-width: 100%;
    max-height: 100%;
    border: 2px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.cloison-amovible-de-bureau > div > div img:hover{
    transform: scale(1.5);
    transition: 1s;
}
section.cloison-amovible-de-bureau > div:nth-child(4) span{
    display: block;
    background: #2c99d5;
    padding: 10px;
    width: 120px;
    border-radius: 5px;
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
    transform: translate(30%,-30%);
}
section.cloison-amovible-de-bureau > div:nth-child(4) p{
    padding: 50px;
    font-weight: bold;/* 
    font-size: 20px;
    font-family: 'cambria'; */
}
section.cloison-amovible-de-bureau > div:nth-child(4){
    display: block;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
    margin-top: 50px;
}

section.cloison-amovible-de-bureau article > h1{
    background: linear-gradient(25deg,#e30613,#2c99d5);
    color: #fff;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    transform: translate(-100%,110%);
    box-shadow: 6px 6px 10px rgba(0, 0, 0, .5);
}
section.cloison-amovible-de-bureau article p.a{
    font-size: 20px;
    color: #222222;
    letter-spacing: 1px;
    padding-left: 10px;
    font-family: "Oswald", sans-serif;
}
section.cloison-amovible-de-bureau article > p:nth-child(3){
    color: #2c99d5 !important;
    border-bottom: 1px dotted rgba(34,34,34,.3);
    margin-bottom: 20px;
}
section.cloison-amovible-de-bureau article ul li{
    list-style: none;
    font-size: 15px;
}
section.cloison-amovible-de-bureau article ul li:hover{
    color: #e30613;
    transition: .5s;
}
section.cloison-amovible-de-bureau article ul li .fa{
    font-size: 10px;
    padding-right: 10px;
    color: #2c99d5;
}
section.cloison-amovible-de-bureau article ul li:hover .fa{
    padding-right: 0;
    transition: .5s;
    color: #e30613;
}
section.cloison-amovible-de-bureau article div a{
    display: block;
    background: #2c99d5;
    width: 200px;
    padding: 10px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
}
section.cloison-amovible-de-bureau article div a:hover{
    background: #e30613;
}
section.cloison-amovible-de-bureau article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
section.cloison-amovible-de-bureau article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.cloison-amovible-de-bureau article > div div div:hover{
    border-color: #e30613;
}

section.cloison-amovible-de-bureau article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.cloison-amovible-de-bureau article > h2{
    padding: 50px 0 20px;
}
section.cloison-amovible-de-bureau article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.cloison-amovible-de-bureau article div a:hover{
    background: none;
}
section.cloison-amovible-de-bureau article > div div:last-child{
    transform: translateX(-130%);
}
section.cloison-amovible-de-bureau article > div #dernier{
    transform: none;
}
section.cloison-amovible-de-bureau article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.cloison-amovible-de-bureau article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.cloison-amovible-de-bureau article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.cloison-amovible-de-bureau article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
/* FIN CLOISON-AMOVIBLE-DE-BUREAU */
/* FAUX-PLAFOND */
main.faux-plafond{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.faux-plafond > section.faux-plafond > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.faux-plafond > section.faux-plafond{
      padding-right: 20px;
  }
  main.faux-plafond > section.faux-plafond > p{
      padding: 2px 0;
  }
  main.faux-plafond > section.faux-plafond > h2{
      font-family: "Oswald", sans-serif;
      padding: 20px 0 10px;
  }
  section.faux-plafond{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.faux-plafond > section.faux-plafond > h1.b{
      font-size: 15px;
      padding: 30px 0 20px;
  }
  main.faux-plafond > section.faux-plafond p{
      text-align: justify;
  }
 /*  section.faux-plafond > div{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }
  section.faux-plafond > div > div:nth-child(1){
      flex: 3;
      padding-right: 50px;
  }
  section.faux-plafond > div > div:nth-child(1) p:nth-child(1){
    font-weight: bold;
    font-size: 18px;
  }
  section.faux-plafond > div > div:nth-child(2){
      width: 300px;
      height: 130px;
  }
  section.faux-plafond > div > div img{
    max-width: 100%;
    max-height: 100%;
    border: 2px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.faux-plafond > div > div img:hover{
    transform: scale(1.5);
    transition: 1s;
} */
section.faux-plafond > div:nth-child(3) span{
    display: block;
    background: #2c99d5;
    padding: 10px;
    width: 120px;
    border-radius: 5px;
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
    transform: translate(30%,-30%);
}
section.faux-plafond > div:nth-child(3) p{
    padding: 50px;
    font-weight: bold;/* 
    font-size: 20px;
    font-family: 'cambria'; */
}
section.faux-plafond > div:nth-child(3){
    display: block;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 5px;
    margin-top: 50px;
}

section.faux-plafond article > h1{
    background: linear-gradient(25deg,#e30613,#2c99d5);
    color: #fff;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    transform: translate(-100%,110%);
    box-shadow: 6px 6px 10px rgba(0, 0, 0, .5);
}
section.faux-plafond article p.a{
    font-size: 20px;
    color: #222222;
    letter-spacing: 1px;
    padding-left: 10px;
    font-family: "Oswald", sans-serif;
}
section.faux-plafond article p{
    padding: 10px 0;
}
section.faux-plafond article ul li{
    list-style: none;
    font-size: 15px;
}
section.faux-plafond article ul li:hover{
    color: #e30613;
    transition: .5s;
}
section.faux-plafond article ul li .fa{
    font-size: 10px;
    padding-right: 10px;
    color: #2c99d5;
}
section.faux-plafond article ul li:hover .fa{
    padding-right: 0;
    transition: .5s;
    color: #e30613;
}
section.faux-plafond article div a{
    display: block;
    background: #2c99d5;
    width: 200px;
    padding: 10px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
}
section.faux-plafond article div a:hover{
    background: #e30613;
}
section.faux-plafond article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
section.faux-plafond article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.faux-plafond article > div div div:hover{
    border-color: #e30613;
}
section.faux-plafond article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.faux-plafond article > h2{
    padding: 50px 0 20px;
    font-family: "Oswald", sans-serif;
}
section.faux-plafond article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.faux-plafond article div a:hover{
    background: none;
}
section.faux-plafond article > div #dernier{
    transform: none;
}
section.faux-plafond article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.faux-plafond article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.faux-plafond article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.faux-plafond article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
/* FIN FAUX-PLAFOND*/
/* ELECTRICITE */
main.electricite{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.electricite > section.electricite > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.electricite > section.electricite{
      padding-right: 20px;
  }
  main.electricite > section.electricite > p{
      padding: 2px 0;
  }
  main.electricite > section.electricite > h2{
      font-family: "Oswald", sans-serif;
      padding: 20px 0 10px;
  }
  section.electricite{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.electricite > section.electricite > h1.b{
      font-size: 15px;
      padding: 30px 0 20px;
  }
  main.electricite > section.electricite p{
      text-align: justify;
  }
  main.electricite > section.electricite h2{
      border-bottom: 1px dotted rgba(0, 0, 0, .5);
  }
section.electricite article > h1{
    background: linear-gradient(25deg,#e30613,#2c99d5);
    color: #fff;
    width: 50px;
    border-radius: 50%;
    text-align: center;
    font-weight: bold;
    transform: translate(-100%,110%);
    box-shadow: 6px 6px 10px rgba(0, 0, 0, .5);
}
section.electricite article p.a{
    font-size: 20px;
    color: #222222;
    letter-spacing: 1px;
    padding-left: 10px;
    font-family: "Oswald", sans-serif;
}
section.electricite article p{
    padding: 10px 0;
}
section.electricite article ul li{
    list-style: none;
    font-size: 15px;
}
section.electricite article ul li:hover{
    color: #e30613;
    transition: .5s;
}
section.electricite article ul li .fa{
    font-size: 10px;
    padding-right: 10px;
    color: #2c99d5;
}
section.electricite article ul li:hover .fa{
    padding-right: 0;
    transition: .5s;
    color: #e30613;
}
section.electricite article div a{
    display: block;
    background: #2c99d5;
    width: 200px;
    padding: 10px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: 5px;
}
section.electricite article div a:hover{
    background: #e30613;
}
section.electricite article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
section.electricite article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.electricite article > div div div:hover{
    border-color: #e30613;
}

section.electricite article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.electricite article > h2{
    padding: 50px 0 20px;
}
section.electricite article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.electricite article div a:hover{
    background: none;
}
section.electricite article > div #dernier{
    transform: none;
}
section.electricite article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.electricite article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.electricite article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.electricte article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
/* FIN ELECTRICITE */
/* DEMOLITION */
main.demonlition{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.demonlition > section.demonlition > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.demonlition > section.demonlition{
      padding-right: 20px;
  }
  main.demonlition > section.demonlition > p{
      padding: 10px 0;
  }
  section.demonlition{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.demonlition > section.demonlition p{
      text-align: justify;
  }
section.demonlition article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 130px;
    padding: 20px 0;
}
section.demonlition article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.demonlition article > div div div:hover{
    border-color: #e30613;
}

section.demonlition article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.demonlition article > h2{
    padding: 50px 0 20px;
}
section.demonlition article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.demonlition article div a:hover{
    background: none;
}
section.demonlition article > div #dernier{
    transform: none;
}
section.demonlition article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.demonlition article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.demonlition article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.demonlition article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
/* FIN DEMOLITION */
/* CABLAGE INFORMATIQUE */
main.cablage-informatique{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.cablage-informatique > section.cablage-informatique > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.cablage-informatique > section.cablage-informatique{
      padding-right: 20px;
  }
  main.cablage-informatique > section.cablage-informatique > p{
      padding: 10px 0;
  }
  section.cablage-informatique{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.cablage-informatique > section.cablage-informatique p{
      text-align: justify;
  }
section.cablage-informatique article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 130px;
    padding: 20px 0;
}
section.cablage-informatique article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.cablage-informatique article > div div div:hover{
    border-color: #e30613;
}

section.cablage-informatique article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.cablage-informatique article > h2{
    padding: 50px 0 20px;
}
section.cablage-informatique article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.cablage-informatique article div a:hover{
    background: none;
}
section.cablage-informatique article > div #dernier{
    transform: none;
}
section.cablage-informatique article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.cablage-informatique article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.cablage-informatique article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.cablage-informatique article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
main.cablage-informatique > section.cablage-informatique h2{
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
    margin-bottom: 10px;
}
/* FIN CABLAGE INFORMATIQUE */
/* PEINTURE */
main.peinture{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.peinture > section.peinture > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.peinture > section.peinture{
      padding-right: 20px;
  }
  main.peinture > section.peinture > p{
      padding: 10px 0;
  }
  section.peinture{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.peinture > section.peinture p{
      text-align: justify;
  }
section.peinture article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 130px;
    padding: 20px 0;
}
section.peinture article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.peinture article > div div div:hover{
    border-color: #e30613;
}

section.peinture article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.peinture article > h2{
    padding: 50px 0 20px;
}
section.peinture article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.peinture article div a:hover{
    background: none;
}
section.peinture article > div #dernier{
    transform: translateX(-150%);
}
section.peinture article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.peinture article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.peinture article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.peinture article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
main.peinture > section.peinture h2{
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
    margin-bottom: 10px;
}
/* FIN PEINTURE */
/* CLIMATISATION */
main.climatisation{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.climatisation > section.climatisation > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.climatisation > section.climatisation{
      padding-right: 20px;
  }
  main.climatisation > section.climatisation > p{
      padding: 10px 0;
  }
  section.climatisation{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.climatisation > section.climatisation p{
      text-align: justify;
  }
section.climatisation article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 0;
}
section.climatisation article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.climatisation article > div div div:hover{
    border-color: #e30613;
}

section.climatisation article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.climatisation article > h2{
    padding: 50px 0 20px;
}
section.climatisation article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.climatisation article div a:hover{
    background: none;
}
section.climatisation article > div #dernier{
    transform: translateX(-150%);
}
section.climatisation article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.climatisation article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.climatisation article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.climatisation article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
main.climatisation > section.climatisation h2{
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
    margin-bottom: 10px;
}
/* FIN CLIMATISATION */
/* CUISINE */
main.cuisine{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.cuisine > section.cuisine > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.cuisine > section.cuisine{
      padding-right: 20px;
  }
  main.cuisine > section.cuisine > p{
      padding: 10px 0;
  }
  section.cuisine{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.cuisine > section.cuisine p{
      text-align: justify;
  }
section.cuisine article > div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 130px;
    padding: 20px 0;
    margin-bottom: 230px;
}
section.cuisine article > div div div{
    width: 230px;
    height: 150px; 
    margin: 5px 0;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 5px;
}
section.cuisine article > div div div:hover{
    border-color: #e30613;
}

section.cuisine article > div div div:hover + a{
    color: #e30613;
    transition: 1s;
}
section.cuisine article > h2{
    padding: 50px 0 20px;
}
section.cuisine article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

section.cuisine article div a:hover{
    background: none;
}
section.cuisine article > div div img{
  width: 230px;
  height: 150px;
  object-fit: cover;
  object-position: center;/* 
  border: 2px solid rgba(0, 0, 0, .5);
  border-radius: 5px; */
}
section.cuisine article > div div img:hover{
    transform: scale(1.5);
    transition: 1s cubic-bezier(1,.19,.94,.94);
}
section.cuisine article .en-savoir-plus{
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, .9);
    text-transform: uppercase;
    color: #000;
    border-radius: 5px;
    font-weight: 600;
    margin: 10px 0;
    display: block;
    width: 150px;
    text-align: center;
}

section.cuisine article .en-savoir-plus:hover{
    color: #e30613;
    border-color: #e30613;
}
main.cuisine > section.cuisine h2{
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
    margin-bottom: 10px;
}
/* FIN CUISINE */
/* REALISATIONS */

.realisation{
    background: #fff;
    padding: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
}
.realisation h1{
    color: rgb(34, 34, 34);
    font-weight: bold;
    text-align: center;
    padding-bottom: 20px;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    letter-spacing: 2px;
}
.realisation p{

    padding: 5px 0;
    text-align: justify;
    font: 400 14px/26px "Roboto", sans-serif;
}
.dimension-2d{

    padding: 20px 0 0;
    color: rgb(34, 34, 34);
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    font-size: 24px;
}

main.realisation .container .row .list-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

main.realisation .container .row .list-group div.col-sm4,
main.realisation .container .row .list-group div.col-xs-6,
main.realisation .container .row .list-group div.col-md-3,
main.realisation .container .row .list-group div.col-lg-3{
    float: none;
    padding: 0;
}
main.realisation .container .row .list-group div#avant-dernier{
    transform: translateX(-50%);
}
main.realisation .container .row .list-group div#dernier{
    transform: translateX(-200%);
}
main.realisation .container .row .list-group .thumbnail{
    width: 280px;
    height: 200px;
    padding: 0;
}
main.realisation .container .row .list-group .thumbnail img{
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
}
/* FIN REALISATIONS */
/* LA SOCIETE */

main.societe{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.societe > section.societe > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  main.societe > section.societe{
      padding-right: 20px;
  }
  main.societe > section.societe > p{
      padding: 2px 0;
  }
  main.societe > section.societe article h2{
      font-family: "Oswald", sans-serif;
      padding: 20px 0 10px;
  }
  section.societe{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex:5;
  }
  main.societe > section.societe p{
      text-align: justify;
  }
section.societe article > h2{
    padding: 50px 0 20px;
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
    margin-bottom: 10px;
}
section.societe article div div a{

    display: inline-block;
    color: #000;
    background: none;
    text-align: left;
    padding: 10px 0;
    font-weight: 400;
    width: 230px;
    text-transform: none;
    
}

/* FIN LA SOCIETE */
/* POURQUOI-NOUS-CHOISIR */
main.pourquoi-nous-choisir{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.pourquoi-nous-choisir > section.pourquoi-nous-choisir > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    margin-bottom: 20px;
  }
  
  section.pourquoi-nous-choisir{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 20px;
  }
  section.pourquoi-nous-choisir{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
section.pourquoi-nous-choisir article{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 10px;
    margin: 10px 0;
}
.equipe div{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.equipe{

    background-image: url(images/notre-equipe/background.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}
.equipe div .box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 250px;
}
.box .imgBox{
    width: 200px;
    height: auto;
    margin-bottom: 10px;
    background: transparent;
}
.equipe .imgBox img{
    max-width: 100%;
    max-height: 100%;
    background: transparent;
}
section.pourquoi-nous-choisir .equipe .box h4{
    font-family: "Oswald", sans-serif;
    color: #f5f6fa;
    font-size: 15px;
    font-weight: 600;
}


section.pourquoi-nous-choisir  .caracteristique{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.caracteristique .container{
    width: 1100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.caracteristique .container .box-caracteristique{
    position: relative;
    width: 320px;
    background: #3498db;
    border-radius: 30px;
    overflow: hidden;
    padding: 100px 40px 60px;
    box-shadow: 10px 10px 12px rgba(149, 165, 166, .3);
    margin-top: 20px;
}
.caracteristique .container .box-caracteristique:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #ff226d;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .5s;
}
.caracteristique .container .box-caracteristique:hover:before{
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform .5s;
}
.caracteristique .container .box-caracteristique h2{
    position: absolute;
    left: 40px;
    top: 60px;
    font-size: 4em;
    font-weight: 800;
    z-index: 1;
    opacity: 0.1;
    transition: 0.5s;
    border: none;
}
.caracteristique .container .box-caracteristique:hover h2{
    opacity: 1;
    color: #fff;
    transform: translateY(-40px);
    width: 100%;
}
.caracteristique .container .box-caracteristique h3{
    position: relative;
    font-size: 1.5em;
    z-index: 2;
    color: #fff; /* #333 */
    transition: 0.5s;
}
.caracteristique .container .box-caracteristique p{
    position: relative;
    z-index: 2;
    color: #fff; /* #555 */
    transition: 0.5s;
}
.caracteristique .container .box-caracteristique:hover h3,
.caracteristique .container .box-caracteristique:hover p{
    color: #fff;
}



main.pourquoi-nous-choisir > section.pourquoi-nous-choisir h2{
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
    padding-bottom: 10px;
    font-family: "Oswald", sans-serif;
    color: rgb(51, 51, 51);
}
.notre-savoir-faire{
    display: flex;
    flex-direction: column !important;
    margin-bottom: 20px;
}
.notre-savoir-faire h2{
    border-bottom: 1px dotted rgba(0, 0, 0, .5);
    padding-bottom: 10px;
    font-family: "Oswald", sans-serif;
    color: rgb(51, 51, 51);
    width: 100%;
    margin-bottom: 20px;
}
.savoir-faire{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;/* 
    background: #eee;
    padding: 20px;*/
}
.savoir-faire .box{
    position: relative;/* 
    width: 220px; */
    /* height: 150px; */
    cursor: pointer;
    text-align: center;
    padding-bottom: 20px;
}
/* .savoir-faire .box img{
    width: 220px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
} */
.savoir-faire .icon{
    width: 50px;
    height: 50px;
    /* position: absolute;
    top: 50%;
    left: 5%; */
    /* padding: 10px; */
}
.savoir-faire .icon h4{
    /* padding-bottom: 10px; */
    font-family: "Oswald", sans-serif;
    color: #fa163f;
    width: 100%;
    padding-bottom: 10px;
}
.savoir-faire .icon path{
    fill: transparent;
    stroke-width: 10;
    stroke: #3498db;
}
.savoir-faire .conseil .icon path{
    stroke-dasharray: 570;
    stroke-dashoffset: 0;
}
.savoir-faire .conseil:hover .icon path{
    animation: animate-conseil 2s linear forwards;
}
@keyframes animate-conseil{
    0%{
        stroke-dashoffset: 0;
    }40%{
        
        stroke-dashoffset: 570;
    }80%{
        
        stroke-dashoffset: 1140;
        fill: transparent;
    }100%{
        
        stroke-dashoffset: 1140;
        fill: #3498db;
    }
}


.savoir-faire .strategie .icon path{
    stroke-dasharray: 1291;
    stroke-dashoffset: 0;
}
.savoir-faire .strategie:hover .icon path{
    animation: animate-strategie 2s linear forwards;
}
@keyframes animate-strategie{
    0%{
        stroke-dashoffset: 0;
    }40%{
        
        stroke-dashoffset: 1291;
    }80%{
        
        stroke-dashoffset: 2582;
        fill: transparent;
    }100%{
        
        stroke-dashoffset: 2582;
        fill: #3498db;
    }
}


.savoir-faire .travaux .icon path{
    stroke-dasharray: 2100;
    stroke-dashoffset: 0;
}
.savoir-faire .travaux:hover .icon path{
    animation: animate-travaux 2s linear forwards;
}
@keyframes animate-travaux{
    0%{
        stroke-dashoffset: 0;
    }40%{
        
        stroke-dashoffset: 2100;
    }80%{
        
        stroke-dashoffset: 4200;
        fill: transparent;
    }100%{
        
        stroke-dashoffset: 4200;
        fill: #3498db;
    }
}


.savoir-faire .design .icon path{
    stroke-dasharray: 1990;
    stroke-dashoffset: 0;
}
.savoir-faire .design:hover .icon path{
    animation: animate-design 2s linear forwards;
}
@keyframes animate-design{
    0%{
        stroke-dashoffset: 0;
    }40%{
        
        stroke-dashoffset: 1990;
    }80%{
        
        stroke-dashoffset: 3980;
        fill: transparent;
    }100%{
        
        stroke-dashoffset: 3980;
        fill: #3498db;
    }
}


.savoir-faire .resultat .icon path{
    stroke-dasharray: 970;
    stroke-dashoffset: 0;
}
.savoir-faire .resultat:hover .icon path{
    animation: animate-resultat 2s linear forwards;
}
@keyframes animate-resultat{
    0%{
        stroke-dashoffset: 0;
    }40%{
        
        stroke-dashoffset: 970;
    }80%{
        
        stroke-dashoffset: 1940;
        fill: transparent;
    }100%{
        
        stroke-dashoffset: 1940;
        fill: #3498db;
    }
}

.savoir-faire .money .icon path{
    stroke-dasharray: 1605;
    stroke-dashoffset: 0;
}
.savoir-faire .money:hover .icon path{
    animation: animate-money 2s linear forwards;
}
@keyframes animate-money{
    0%{
        stroke-dashoffset: 0;
    }40%{
        
        stroke-dashoffset: 1605;
    }80%{
        
        stroke-dashoffset: 3210;
        fill: transparent;
    }100%{
        
        stroke-dashoffset: 3210;
        fill: #3498db;
    }
}



/* ACTUALITE */
main.actualite{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: #fff;
    padding: 40px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
    width: calc(100% - 100px);
    margin: 50px auto;
}
main.actualite > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
}
.blog_tow_area{
    padding-top: 0;
    padding-bottom: 20px;
}
.blog_tow_area .blog_tow_row .renovation img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.blog_tow_area .blog_tow_row .renovation{
    padding-bottom: 0;
    box-shadow: 0 10px 10px rgba(0,0,0,.2);
    border-radius: 10px;
}
.blog_tow_area .blog_tow_row .renovation:hover{
    animation: up-down 1s ease-in-out infinite;
    transform-origin: bottom;
}
@keyframes up-down{
    0%{
        transform: translateY(0);
    }50%{
        transform: translateY(-20px);
    }100%{
        transform: translateY(0);
    }
}
.blog_tow_area .blog_tow_row .renovation .renovation_content .tittle{

    line-height: 20px;
}
.blog_tow_area .blog_tow_row .renovation .renovation_content{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-bottom: 0;
}
/* FIN ACTUALITE */

/* FIN POURQUOI-NOUS-CHOISIR */
/* CONTACT */
main.contact{
    background: #fff;
    margin: 50px auto 0;
}
.contenair-form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 200px);
    margin: auto;
    padding: 20px;
}
#carte{
    width: calc(100% - 100px);
    margin: auto;
    position: relative;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;/* 
    transform: translateY(-15%); */
    box-shadow:-10px 10px 20px rgba(0, 0, 0, .2);
    margin-bottom: 50px;
}
#carte h2{
    font-size: 42px;
    font-weight: 900;
    color: #2c99d5;
    padding-bottom: 20px;
}
#carte p{
    color: #fff !important;
    padding: 10px 0;
}
#carte p a{
    color: #fff !important;
}

#carte p a:hover{
    color: #2c99d5 !important;
}
#carte p:hover{
    color: #2c99d5 !important;
}
#carte p .fa{
    font-size: 25px;
    padding-right: 10px;
    color: #2c99d5;
    transition: 1s;
}
#carte p:hover .fa{
    padding-right: 0;
}
#localisation{
    width: calc(100% - 700px);
    background: rgba(31, 33, 35, .9);
    position: absolute;
    z-index: 1;
    height: 100%;
    padding: 10px 40px;
}
 #carte-responsive{
    overflow:hidden; /* 
    padding-bottom:56.25%;  */
    position:relative; 
    height:300px;
    
 }
 #carte-responsive iframe{ 
     left:0; 
     top:0; 
     max-height:100%; 
     width:100%; 
     position:absolute;
 }
.contenair-form h2{
    text-align: center;
    text-transform: uppercase;/* 
    padding-bottom: 40px; */
    padding-top: 20px;
}
legend{
    width: 95%;
    padding-bottom: 10px;
}
form{
    width: 100%;
}
.contenair-form .ligne{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 50px 0;
}

.contenair-form .ligne .text{
    position: absolute;
    z-index: 1;
    left: 5%;
    top: 0;
    text-transform: capitalize;
    transition: .5s;
    font-size: 18px;
    font-family: "Oswald", sans-serif;
}
.contenair-form .ligne #text-objet{
    left: 2.5%;
}
.contenair-form .ligne input{
    width: 99%;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: 2px;
    z-index: 2;
    position: relative;
    box-shadow: none;
    transition: .5s;
    color: #fff;
    font-size: 16px;
    padding: 5px 10px;
    outline: none;
}

.contenair-form .ligne input:focus{
    border: none;
    box-shadow: none;
}
.contenair-form .ligne input:focus + .text,
.contenair-form .ligne input:valid + .text{
    top: -25px;
    left: 0;
    transition: all .5s;
    color: #2c99d5;
}
.contenair-form .ligne input:focus + #text-objet,
.contenair-form .ligne input:valid + #text-objet{
    top: -25px;
    left: 0;
    transition: all .5s;
    color: #2c99d5;
}

.contenair-form .ligne .line{
    height: 2px;
    width: 90%;
    background: #2c99d5;
    display: block;
    border-radius: 2px;
    z-index: 1;
}
.contenair-form .ligne #line-objet{
    width: 95%;
}

.contenair-form .ligne input:focus ~ .line,
.contenair-form .ligne input:valid ~ .line{
    background: #2c99d5;
    height: 30px;
    position: absolute;
    bottom: 0;
    transition: .5s;
}
.contenair-form .ligne .colonne{
    position: relative;
    width: 100%;
}

.contenair-form .ligne .colonne:last-child{
    width: 100%;
}
textarea#message{
    width: 95%;
    height: 70px;
    background: transparent;
    border-radius: 2px;
    z-index: 2;
    position: absolute;
    box-shadow: none;
    transition: .5s;
    color: #fff;
    font-size: 16px;
    border: none;
    resize: none;
    padding: 10px;
    outline: none;
}

.textarea{
    position: relative;
}
.contenair-form .ligne .textarea .line{

    display: block;
    position: absolute;
    bottom: -70px;
    width: 95%;
}

.contenair-form .ligne .textarea .text{
    
    left: 2.5%;
}
.contenair-form .ligne textarea:focus + .text,
.contenair-form .ligne textarea:valid + .text{
    top: -25px;
    left: 0;
    transition: all .5s;
    color: #2c99d5;
}
.contenair-form .ligne textarea:focus ~ .line,
.contenair-form .ligne textarea:valid ~ .line{
    background: #2c99d5;
    height: 70px;
    transition: .5s;
}
.contenair-form form input[type="checkbox"]{
    position: relative;
    width: 80px;
    height: 40px;
    -webkit-appearance: none;
    background: #c6c6c6;
    outline: none;
    border-radius: 20px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    transition: .5s;
}

.contenair-form form input:checked[type="checkbox"]{
    background: #2c99d5;
}
.contenair-form form input[type="checkbox"]::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    top: 0;
    left: 0;
    background: #fff;
    transform: scale(1.2);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    transition: .5s;
}
.contenair-form form input:checked[type="checkbox"]::before{
    left: 40px;
}
.contenair-form form  .ligne .colonne > div.checkbox{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.contenair-form form  .ligne .colonne > div.checkbox label{
    margin: 10px 0 0;
    display: inherit;
    padding: 0;
}

.surface{
    position: relative;
    width: 80px;
    height: 50px;
    border-radius: 40px;
    border: 2px solid rgba(0, 0, 0, .5);
    transition: .5s;
}
.surface:hover{
    width: 120px;
    border: 2px solid rgba(0, 0, 0, .8);
}
.surface .next{
    position: absolute;
    top: 50%;
    right: 30px;
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    z-index: 1;
    transform: translateY(-50%) rotate(135deg);
    cursor: pointer;
    opacity: 0;
    transition: .5s;
}
.surface:hover .next{
    opacity: 1;
    right: 20px;
}
.surface .prev{
    position: absolute;
    top: 50%;
    left: 30px;
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    z-index: 1;
    transform: translateY(-50%) rotate(315deg);
    cursor: pointer;
    opacity: 0;
    transition: .5s;
}
.surface:hover .prev{
    opacity: 1;
    left: 20px;
}
.surface #box span{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 46px;
    display: none;
    color: #2c99d5;
    font-size: 24px;
    font-weight: 700;
    user-select: none;
}
#box span:nth-child(1){
    display: initial;
}
button[type="submit"]{
    margin: 50px 0 0;
    padding: 10px 15px;
    background: #2c99d5;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
}
/* FIN CONTACT */
/* LA GARANTIE */
main.garantie{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 50px;
    margin-bottom: 50px;
    background: #fff;
    padding: 40px;
    box-shadow: 10px -10px 10px rgba(54, 54, 54, 0.5);
  }
  main.garantie > section.garantie > h1{
    text-align: center;
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    padding-bottom: 50px;
  }
  section.garantie{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  section.garantie article{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      padding: 10px 10px;
      margin: 10px 0;
  }
  
  section.garantie article.un{
    background: rgba(175, 190, 195, .2);
  }
  section.garantie article.deux{
    background: rgba(175, 190, 195, .4);
  }
  section.garantie article.trois{
    background: rgba(175, 190, 195, .2);
  }
  section.garantie article.quatre{
    background: rgba(175, 190, 195, .4);
  }
  section.garantie article div.image-module{
    width: 300px;
    height: 200px;
    flex: 1;
  }
  
  section.garantie article .photo-left{
      margin-right: 20%;
  }
  section.garantie article .photo-droite{
      margin-left: 20%;
  }
  section.garantie article div.image-module img{
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
  }
  section.garantie article div.module{
      flex: 5;
  }
  section.garantie article div.module p{
      text-align: justify;
  }
  main.garantie > section.garantie h2{
      border-bottom: 1px dotted rgba(0, 0, 0, .5);
      padding-bottom: 10px;
      font-family: "Oswald", sans-serif;
  }
/* FIN LA GARANTIE */
/* .slider_inner div{
    height: 500px;
}

.container{
    margin-top: 100px;
    height: 100px;
} */
 
.menu-tel{
    display: none;
}
@media screen and (max-width: 780px){
    .contenair-form .ligne input{
        width: calc(100% - 10px);
    }
    .contenair-form{
        width: 100%;
    }
    header{
        margin: 0;
        justify-content: space-between;
    }
    @keyframes menu{
        from{
            transform: translateX(100%);
        }to{
            transform: translateX(1);
        }
    }
    .menu-tel{
        display: block;
    }
    .menu-tel input#menu-tel{
        display: none;
    }
    .div_menu{
        
        width: 100%;
        display: none;
        animation: menu 1s;
    }
    .menu{
        width: calc(100% - 10px);
        flex-direction: column;
        text-align: center;
        margin: auto;
    }
    label.ouvrir-menu,
    label.fermer-menu{
        display: block;
    }
    
    label.fermer-menu{
        display: none;
    }
    label.fermer-menu .fa{
        background: #e30613;
    }
    label.ouvrir-menu .fa{
        background: #2c99d5;
    }
    label.ouvrir-menu .fa,
    label.fermer-menu .fa{
        font-size: 30px; 
        color: #fff;
        padding: 10px; 
        transition: 1s;
        border-radius: 10%;
    }
    .menu li .menu-2{
        position: static;
    }
    .menu-niveau-2{
        text-align: left;
        width: auto;
    }

    #section-2{
        transform: none;
    }
    #section-2 .services{
        flex-direction: column;
        width: calc(100% - 30px);
        padding: 20px 0;
    }
    #section-2 .services .box{
        margin: 5px 0;
    }
    .menu{
        margin-bottom: 20px;
    }

    .banner{
        height: 500px;
    }
    .banner img{
        height: 500px;
        object-fit: cover;
        object-position: center;
    }
    
    .text-image{
        top: 50%;
        width: calc(100% - 10px);
        text-align: center;
        left: 1%;
    }
    .text-image p:nth-child(2),
    .text-image p:nth-child(1){
        padding: 0;
        line-height: 50px;
    }
    .text-image p:nth-child(2){
        padding: 0;
        line-height: 50px;
        font-size: 39px;
    }
    /* PLAN AMENAGEMENT */
    .plan{
        width: calc(100% - 20px);
    }
    .plan > h1{
        font-size: 20px;
    }
    main.plan .container .row .list-group{
        flex-direction: column;
    }
    main.plan .container .row .list-group div#dernier{
        transform: none;
    }
    /* FIN PLAN AMENAGEMENT */
    /* SPACE PLANNING */
    main.space-planning{
        flex-direction: column;
        width: calc(100% - 20px);
    }
    main.space-planning section.space-planning h1{
        
        font-size: 20px;
    }
    main.space-planning section.space-planning p{
        font-size: 13.5px;
    }
    section.space-planning article > h1{
        display: none;
    }
    section.space-planning article > p:nth-child(3){
        color: #2c99d5 !important;
        border-bottom: 1px dotted rgba(34,34,34,.3);
        margin-bottom: 20px;
    }
    main.space-planning > section.space-planning > h2{
        font-size: 20px;
    }
    section.space-planning article ul li{
        font-size: 13.5px;
    }
    main.space-planning > section.space-planning > .image-realisation{
        width:auto !important;
    }
    .plan-projets{
        flex-direction: column;
    }
    .plan-projets div{
        margin: 5px 0;
    }
    /* FIN SPACE PLANNING */
    /* ARCHITECTURE */
    main.architecture{
        flex-direction: column;
        width: calc(100% - 20px);
    }
    main.architecture section.architecture h1{
        font-size: 20px;
        padding-bottom: 15px;
    }
    section.architecture{
        padding-right: 0;
        height: auto;
    }
    main.architecture section.architecture p{
        font-size: 13.5px;
        text-align: justify;
    }
    /* FIN ARCHITECTURE */
    /* CONTRCATANT */
    main.contractant{
        flex-direction: column;
        width: calc(100% - 20px);
    }
    main.contractant section.contractant h1{
        font-size: 20px;
        padding-bottom: 15px;
    }
    main.contractant section.contractant p{
        font-size: 13.5px;
    }
    main.contractant section.contractant{
        padding-right: 0;
    }
    main.contractant > section.contractant > h2{
        font-size: 20px;
    }
    main.contractant .container .row .list-group{
        flex-direction: column;
    }
    main.contractant .container .row .list-group .thumbnail{
        width: 100% !important;
    }
    /* FIN CONTRCATANT */

    .meilleurs{
        margin: 50px 0;
        padding: 20px 20px;
    }

    /* CONTACT */
    main.contact{
        width: calc(100% - 20px);
    }
    #carte{
        width: calc(100% - 20px);
    }
    #carte h2{
        font-size: 30px;
        font-weight: 900;
        padding-top: 10px;
    }
    #carte p{
        font-size: 13.5px;
    }
    #carte p .fa{
        font-size: 13.5px;
    }
    #localisation{
        width: calc(100% - 70px);
        padding: 10px 15px;
    }
    .contenair-form h2{
        font-size: 15px;
    }
    .contenair-form form legend{
        font-size: 13.5px;
        padding: 20px 0;
    }
    .contenair-form .ligne{
        flex-direction: column; 
        margin: 0;
    }
    .contenair-form .ligne .colonne{
        margin: 15px 0;
    }
    .contenair-form form button[type="submit"]{
        margin: 80px 0 0;
    }
    /* FIN CONTACT */
    /* REALISATION */
    main.realisation{
        width: calc(100% - 20px);
        padding: 20px;
    }
    main.realisation h1{
        font-size: 20px;
    }
    
main.realisation .container .row .list-group{
    flex-direction: column;
}

    main.realisation .container .row .list-group div#avant-dernier{
        transform: none;
    }
    main.realisation .container .row .list-group div#dernier{
        transform: none;
    }
    main.realisation .container .row .list-group div[class*='col-']{
        transform: translateX(calc(100% - 205px)) !important;
    }
    /* FIN REALISATION */
}

@media screen and (max-width: 575px){
    main.societe{
        width: calc(100% - 20px);
    }
    main.societe > section.societe > h1{
        font-size: 33px;
        padding-bottom: 10px;
    }
    main.societe > section.societe{
        padding-right: 0;
    }
    main.societe > section.societe article h2{
        font-size: 25px;
    }
    .savoir-faire .icon h4{
        font-size: 13.5px;
    }
    .savoir-faire .icon{
        width: 35px;
        height: 35px;
    }
    main.societe > section.societe p{
        text-align: justify;
        font-size: 13.5px;
    }
    main.pourquoi-nous-choisir{
        width: calc(100% - 20px);
    }
    main.pourquoi-nous-choisir > section.pourquoi-nous-choisir > h1{
        font-size: 33px;
        padding-bottom: 10px;
    }
    main.pourquoi-nous-choisir > section.pourquoi-nous-choisir p{
        font-size: 13.5px;
        text-align: justify;
        margin-bottom: 20px;
    }
    main.pourquoi-nous-choisir > section.pourquoi-nous-choisir h2{
        font-size: 25px;
    }
    .equipe div .box{
        width: 150px;
    }
    .box .imgBox{
        width: 150px;
    }
    section.pourquoi-nous-choisir  .caracteristique{
        padding: 0;
    }

    .caracteristique .container{
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 0;
    }

    main.garantie{
        width: calc(100% - 20px);
        padding: 10px;
    }
    main.garantie > section.garantie > h1{
        font-size: 33px;
        padding-bottom: 10px;
    }

    section.garantie article{
        flex-direction: column;
    }
    main.garantie > section.garantie h2{
        font-size: 25px;
    }
    section.garantie article div.module p{
        font-size: 13.5px;
    }
    section.garantie article div.image-module{
        width: 100%;
    }
    section.garantie article .photo-droite{
        margin-left: 0;
    }
    section.garantie article .photo-left{
        margin-right: 0;
    }
    section.garantie article div.image-module img{
        width: 100%;
        height: 100%;
    }

    .plan > h1{
        font-size: 33px;
        font-weight: bold;
    }
    .clef-en-main{
        padding: 0;
    }
    .plan .container-sliders{
        flex-direction: column;
        width: 320px;
    }

    .swiper-container{
        margin: 10px auto;
        width: 300px;
        height: 200px;
    }
    
    main.actualite{
        width: calc(100% - 20px);
        padding: 20px
    }

    main.actualite > h1{
        font-size: 33px;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }

    main.actualite .blog_tow_area .blog_tow_row .renovation{
        margin: 25px auto;
    }

    main.actualite .blog_tow_area .blog_tow_row .renovation .renovation_content{
        padding: 0 14px;
    }
    
    main.actualite .blog_tow_area .blog_tow_row .renovation .renovation_content .clipboard{
        margin-top: -80px;
    }
}