.smart-popin_atelier .sp-cell_atelier { display: table-cell; vertical-align: middle; padding: 10px; z-index: 999;  }

.smart-popin_atelier .sp-body_atelier { position: relative; z-index: 999; width: 850px; min-width: 340px; margin: 0 auto; background-color: #fff; 
padding: 1em; -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25); box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25); color: #000; font-weight: 400;
}

.smart-popin_atelier .sp-body_atelier * { max-width: 100%; z-index: 999; }

.smart-popin_atelier .sp-close_atelier { position: absolute; top: 0; right: 35px; width: 76px; height: 36px; line-height: 36px; display: block; 
cursor: pointer; font-size: 1em; color: #000; font-weight: 900; text-decoration: none; z-index: 999; 
}

.smart-popin_atelier .sp-close_atelier:hover { position: absolute; top: 0; right: 35px; width: 76px; height: 36px; line-height: 36px; display: block; 
font-size: 1em; color: #CC0000; font-weight: 900; text-decoration: none; z-index: 999; cursor: pointer;
}  
								   
.sp-close_atelier i { position: absolute; top: 0; right: -35px; width: 36px; height: 36px; line-height: 36px; 
cursor: pointer;				 font-size: 1.6em; color: #000; font-weight: 900; text-decoration: none; z-index: 999;
}  	
				   
         
.smart-popin_atelier { position: fixed; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; opacity: 0; visibility: hidden; background-color: rgba(0, 0, 0, 0.8); z-index: 999;}
.smart-popin_atelier:target { opacity: 1; visibility: visible;  z-index: 999; }
.smart-popin_atelier .sp-table_atelier { display: table; height: 100%; width: 100%;  z-index: 999; }

.header_modal_atelier { text-align: center; background: #CC0000; color: #fff;  margin: 0; width: 100%; font-size: 18px; font-weight: 200; line-height: 30px;
margin-top: 20px; 
}

.container-atelier { margin-top: 65px; margin-right: auto; margin-left: auto; }

@media (min-width: 768px) { .container-atelier {    width: 750px;  } }
@media (min-width: 992px) {  .container-atelier {   width: 970px;  } }
@media (min-width: 1200px) {  .container-atelier {   width: 1350px;  } }

.gridywrap div[class*=gridy] { background: #fff; box-shadow: inset 0 0 0 1px #fff; padding: 0px; float: left; position: relative; }

.gridywrap .gridy-1 {width: 320px; border: 5px solid #ffffff; overflow: hidden; cursor: pointer;   margin-left: auto; margin-right: auto;  }
  
.gridywrap .gridy-service_navbar {width: 260px;  border: 5px solid #ffffff; overflow: hidden; cursor: pointer;    }
  
.gridywrap .gridy-1, .gridywrap .gridy-service_navbar   {width: 100%;  margin-left: auto; margin-right: auto; }

.gridywrap .gridy-3 {width: 100%;}

.gridywrap .gridyhe-1 {height: 280px;}

.gridywrap .gridyhe-service_navbar {height: 380px;  }

.gridywrap .gridyhe-3 {height: 190px;}

@media screen and (min-width: 840px) { 
.gridywrap { width: 100%; }
.gridywrap .gridy-1 {width: 50%;}
.gridywrap .gridy-3 {width: 50%;}
}

@media screen and (min-width: 1024px) {
.gridywrap .gridy-1 {width: 25%;}
.gridywrap .gridy-service_navbar {width: 260px;   }
.gridywrap .gridyhe-service_navbar {height: 220px; }
.gridywrap .gridy-3 {width: 270px;}
.gridywrap .gridyhe-2 {height: 200px;}
}

.gridywrap .gridimg_nav_service { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; height: 155px; 
background-position: center center; background-size: cover;
}

.gridywrap .gridimg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-position: center center;
background-size: cover; 
}

.gridywrap .gridimg img { width: 100%; }

.gridywrap .gridinfo { display: table; position: absolute; margin-left: auto; margin-right: auto; width: 100%; height: 100%; top: 0; left: 0;
background: rgba(0,0,0, 0.1); text-align: center; transition: all 0.4s;
}

.gridywrap  .nouveau_atelier {  position: absolute; top: 90px;  opacity: 1; display: block; margin-left: auto; margin-right: auto;   
font-size: 33px; color: #CC0000; width: 100%; font-weight: 900; text-align: center;  transform: rotate(-34deg);
text-shadow: #fff 1px 0 10px;}

.gridywrap  .nouveau_atelier_navbar {  position: absolute; top: 65px;  opacity: 1; display: block; margin-left: auto; margin-right: auto;   
font-size: 26px; color: #CC0000; width: 100%; font-weight: 900; text-align: center;  transform: rotate(-30deg);
text-shadow: #fff 1px 0 10px;}


.gridywrap .gridinfo .title_atelier { vertical-align:bottom;   opacity: 1; display: table-cell; margin-left: auto; margin-right: auto;   
font-size: 16px; color: #fff; width: 100%; font-weight: 900; text-align: center;
}

.gridywrap .gridinfo .title_atelier p { padding: 10px ; background: rgba(0, 0, 10, 0.8);  text-shadow: -2px 2px 0 rgba(0,0,0,0.9); font-weight: 900; }

.gridywrap .gridinfo:hover { background: rgba(207, 12, 19, 0.7); }


ul.accordion-list { position: relative; display: block; width: 100%; height: auto; padding: 5px; margin: 15px auto; list-style: none; background-color: #fff; }
 
ul.accordion-list li {
position: relative; display: block; width: 100%; height: auto;  background-color: #fff; padding: 5px 15px 5px 15px; margin: 15px auto ;
border-bottom: 2px solid #CACACA; border-left: 4px solid #CC0000; box-shadow: 0px 0px 1px rgba(22, 24, 26, 0.08), 0px 1px 1px rgba(22, 24, 26, 0.08);
}

ul.accordion-list li h3 {font-weight: 400; position: relative; display: block; width: 100%; height: auto; padding: 3px 25px 3px 0; margin: 0;  font-size: 16px;}

.container_details_atelier { width: 100%; display: block; margin: 0 auto; text-align: center; }

.container_details_atelier img { margin: 30px; text-align: center; display: inline-block; vertical-align: bottom;}

.logo_terex { width: 150px; height: auto; }
.logo_atlas { width: 100px; height: auto; }
.logo_effer { width: 150px; height: auto; }
.logo_moffett { width: 150px; height: auto; }
.logo_hyva { width: 100px; height: auto; }
.logo_compair { width: 150px; height: auto; }
.logo_karcher { width: 150px; height: auto; }
.logo_tti_atelier { width: 150px; height: auto; }
.logo_ravaglioli { width: 150px; height: auto; }

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

.smart-popin_atelier .sp-cell_atelier { display: table-cell; vertical-align: middle; padding: 10px; z-index: 999;  }

.smart-popin_atelier .sp-body_atelier { position: relative; z-index: 999; width: 300px; min-width: 300px; margin: 0 auto; background-color: #fff; 
  									padding: 2em 1em; -webkit-box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25); 
  									box-shadow: 0 3px 5px 1px rgba(0,0,0,0.25); color: #000; 	    width: 100%; max-width: 100%;
							      }
  
 .header_modal_atelier { font-size: 16px; font-weight: 200; line-height: 32px;
margin-top: 15px; 
}

.container-atelier { width: 100%;  margin-left: auto; margin-right: auto; }
.gridywrap { width: 90%;  margin-left: auto; margin-right: auto; }
  
.gridywrap .gridy-1   {width: 100%;  margin-left: auto; margin-right: auto; }

.gridywrap .gridy-1 {width: 100%; border: 5px solid #ffffff; overflow: hidden; cursor: pointer;   margin-left: auto; margin-right: auto;  }
  
.gridywrap .gridinfo .title_atelier { font-size: 14px; color: #fff; width: 100%; font-weight: 900; text-align: center;
}  
  
}