/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 768px et 1040px */
@media all and (min-width: 678px) and (max-width: 1040px)  {
              .small-align .content {  margin: 5rem 7rem -7rem 7rem;}
              .tm-contact-link {   font-size: 16px;}
} 
/*@media only screen and (max-width: 1000px) {
  
                     
}  */
/**/
@media only screen and (max-width: 1000px) {

     body { --marginTopHeader : 15px;}

     .pt-5, .py-5  {max-width: 100%;} 
            .container-Menu > ul {display: flex; flex-direction: column;}
            .colum {padding-bottom: 15px;}
            .colum ul {padding: 0px;} 

      header {width: calc(100% - 24px); margin: var(--marginTopHeader) 12px 0px 12px ;background: rgba(0, 0, 0, 0.8); }

     .nav-bar {}

     .logo ,.mobile-icone {width: 20%;}

     .logo a {}

     .img-logo { }

     .imgOpen {display: block;}
    
     nav ul:nth-child(1)  li:hover > ul {display: none;}

     nav ul:nth-child(1)  li ul li a:hover{background-color:rgba(0, 0, 0, 0.8) ;color:white ;}

     .menu-mobile  {margin-top: calc(var(--heightHeader));height: max-content;
                                position: absolute;left: 5%; width: 90%;}

     nav > ul {display: none;}
     nav > ul {top: calc(var(--heightHeader));height: max-content;position: absolute;left: 0%; width: 100%;}
     .menuMobile {}

     nav ul:nth-child(1) li span, nav ul:nth-child(1) > li > a {height: auto;background: rgba(0, 0, 0, 0.8);color: white;
                                                                padding: 3% 5% 3% 3%;justify-content: space-between;font-size: 16px;}
     
     nav > ul> li > ul {position: relative; width: 100%;background:#000000;;}

     nav ul:nth-child(1) li ul li a {padding: 2% 0% 2% 7%;font-size: 17px;}

     nav a,nav span  {}

     .haut {display: block;}
     .bas {display: none;}
    
}

/**/
@media only screen and (max-width: 768px) {
                 
                .Banner_sec .middleside h4 span { font-weight: 700; font-size: 60px;}

                .Banner_sec .middleside h3{   font-size: 30px;font-weight: 200;text-align: center;padding: 45px 0px}

                .Banner_sec .middleside h3 .first-word {font-size: 38px}

                .conteneur-slide {max-width: 100%;padding: 25px 0px 25px 0px;margin: auto;}

                #spinner {width: 50%;}
                .Services_sec h2 {    font-size: 40px;}

                .align-right {}

                .align-right .detail-service {max-width: 75%;margin-left: 20%;background-color: rgba(0,0,0,0.8);padding: 30px 5px; color: #fff;} 

                .detail-service h4 {font-size:  20px;font-weight: 600;}

                .detail-service p,.detail-service ul {padding: 0px 10px;font-size: 17px;margin: 0px; line-height:     30px;text-align:initial;}
               
                .detail-service ul {padding-left: 35px;}     
               
                .small-align .content {margin: 2rem 1rem -7rem 1rem;padding: 35px 10px;} 

                .small-align .section-active-mob {margin-top: 7rem ;padding: 35px 0px;} 

                .small-align .image-groupe {padding: 10% 0% 5% ; }			

                .align-left .col-12 {max-width: 85%; margin: 5rem 0rem;background-color: rgba(0,0,0,0.8); padding: 25px 5px; color: #fff;}

                .large-align .content {margin: 2rem 1.5rem -7rem 1.5rem;padding: 30px 20px;}

                .large-align .image-groupe-2 {  padding: 30% 0% 5% 0%; }

                .large-align .section-active {padding: 30px 0px;}

                .large-align img:nth-of-type(1) {width: 50%;}
                    
                .large-align img:nth-of-type(2) {width: 50%;}

                .mb-5, .my-5 {margin-bottom: .5rem!important;display: block;padding: 20px 0px 0px 0px;}

                .tm-contact-icon-container {width: 50px; height: 50px;}   

                .tm-contact-link {font-family: 'Open Sans', sans-serif;color: #fff;display: flex;flex-direction: column;align-items: center;
                                   font-size: 15px;line-height: 1.8rem} 

                                   
               
                .detail-service .btn {margin: 20px 5px;font-size: 15px;padding: 5px 8px;}


                .Message_pdg {}
                 
                .About_sec p { font-family: 'Open Sans', sans-serif;font-size: 16px;font-weight: 500;line-height: 1.8rem; text-align: initial;
                               padding: 1.5% 5.5% 5.5% 5.5%;}

                .Banner_sec .leftside {margin-left: calc(100%/2);}
                .Banner_sec .leftside h4 span { color: rgb(255,242,0); font-family: 'Open Sans', sans-serif; font-weight: 800; display: inline-flex;  font-size: 40px;}
                .Banner_sec .leftside p {  font-size: 17px;}

                .carousel-inner { border-radius: 10px 5px 10px 5px;} 

                .ml2 {font-weight: 400;font-size: 2em;}

                .Message_pdg h4 {margin-left: auto;color: #ed0000; font-size: 28px;  }

                .Message_pdg p {font-size: 17px;line-height: 30px; margin: 0px;}

                .Description p span { margin-left: 30px;}

                .Routes_sec p  {font-size: 17px;}

                .Ferroviaire_sec p {font-size: 17px;}

                .Construction_sec p {font-size: 17px;}

                .Barrages_sec p {font-size: 17px;}

                .YouTube_video iframe{ width: 100%; }
 
                .modal.show .modal-dialog {}
                #modal-contact .modal-dialog { /*max-width: 90%;*/}

                #modal-contact .modal-content {position: fixed;top: 0;transform: unset;}

                #modal-contact .modal-content p input { padding: 5px 15px !important;font-size: 12px;color: #000; }

                #modal-contact .modal.show .contact-dialog {max-width: 90%;}

                #modal-contact .modal-body { padding: 0.5rem 2rem;}

                  
                .Get_sec { }
                .Get_sec .Leftside p { padding: 5px 0px;margin: 0px;}
                               
                .Get_sec .Leftside p textarea { padding:0px ; font-size: 14px; color: #242424; font-family: 'Open Sans', sans-serif; font-weight: 400; border: 0px; width: 100%; height: 156px; resize:none; box-shadow: 0px 2px 6px 0px #242424; -webkit-box-shadow: 0px 2px 6px 0px #242424; -moz-box-shadow: 0px 2px 6px 0px #242424; -o-box-shadow: 0px 2px 6px 0px #242424; border-radius: 5px; }

                .Get_sec .Leftside .col-12:nth-of-type(2) { padding: 0px 5px 10px;}
                .Get_sec .Leftside .button { padding: 8px 20px;max-width: 100px;}
                .Get_sec .Mid,.mid-submit { padding: 0px }
                .modal-footer { padding: 0.5rem 0rem;}

                .modal-header h5 { font-size: 24px;padding: 0px;}
                .btn-submit {margin: 0% 0% 0% 90%;}

                .btn-danger {}
                .get-col {border-left:0px ;} 

                .modal-content {}
                .modal-footer {border-top: 0px ;}
                .modal-footer .button {padding: 10px 20px;margin-top: 20px;}
                .ui-widget.ui-widget-content {margin: 0% 10%; max-width: 80%;}
               
                .media-body{padding-top: 10px;}
                .mb-5, .my-5 {margin-bottom: 0rem!important; display: block;padding: 15px 0px;  }
            
                .plan p { font-size: 20px;}
                .container-Menu > ul { font-size: 13px;}
                .title-Menu ,.plan a {  font-size:  13px;}
                .plan a {  font-size:  14px;} 
                .copyright { font-size: 16px;}

                .et_pb_text_inner .titre ,.et_pb_text_inner h2  { font-size: 20px; }
                .fadeInLeftBig .table>tbody { font-size: 15px; }

                .row .img-labo {max-width: 100%;}  

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