@import url('fonts/twcenmt/tw_cen_mt.css');
@import url('fonts/myriadpro/myriad_pro.css');
body, html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color:#000000;
overflow-x:hidden;
background:url(../images/background.jpg) no-repeat top center;
}
* {
margin: 0;
border: 0;
padding: 0
}
.p {
padding: 0;
margin: 0
}
.after {
clear: both;
display: block;
height: 0;
visibility: hidden
}
.floatLeft {
float:left
}
.floatRight {
float:right
}
a {
outline: none;
text-decoration: none;
cursor: pointer;
color:#000
}
.cur {
cursor: pointer
}
.floater {
float:left;
width:100%;
}
.margin{
	margin:0 auto;
	width:1000px;
}
.margin845{
	margin:0 auto;
	width:845px;
}
.margin975{
	margin:0 auto;
	width:975px;
}
.margin950{
	margin:0 auto;
	width:950px;
}
.margin967{
	margin:0 auto;
	width:967px;
}
.margin690{
	margin: auto;
width:690px
}
.container{
margin:0 auto;
width:1000px;	
}
.msgcontact {
	float:right;
	width:845px;
	color:#e9193a;
	margin-top:20px;
	margin-bottom:30px;	
	background:url(../../images/8keyz/bg_cars.jpg) repeat-x top left;
	background-color:#ffffff;
	border: 1px solid #aa0000;
}
.msgcontact.two{
border: 1px solid #008800;
}
.success {
	padding:24px 20px 16px 60px;
	background-image: url("../images/status-success.png");
	background-position: 15px 15px;
	background-repeat: no-repeat;
	color: #008800;
	float: left;
	margin-bottom: 15px;
}
.error {
	padding:20px 20px 10px 60px;
	background-image: url("../images/status-alert.png");
	background-position: 15px 15px;
	background-repeat: no-repeat;
	color: #aa0000;
	float: left;
	margin-bottom: 15px;
}
.main_header{
float:left;
width:100%;
height:174px;
/*height:199px;	*/
}
.logo{
margin-top:35px	
}
.metal_works{
float:right;
font-family: 'Tw Cen MT';
color:#0066b3;
font-size:52px;
padding-top:62px;
letter-spacing:11px;	
}

.header{
float:left;
width:100%;
padding-top:8px
}
.header ul{
float:left;
width:100%	
}
.header ul li.oneh{
float:left;
list-style:none;
font-size:15px;
position:relative;
border-right:2px solid #c5c5c6 		
}
.header ul li.oneh.last{
border-right:none;	
}
.header ul li a.oneh{
float:left;
padding-left:15px;
padding-right:15px;
color:#ffffff;
	
padding-top:1px;
}
.header ul li a.oneh:hover{
color:#0066b3;	
}
.header ul li a.oneh.active{
color:#0066b3;	
}
.absheader{
	position:absolute;
	width:900px;
	height:20px;
	z-index:20;
	top:16px;
	left:0px;
display:none	
}
.absheader.two{
left:-158px	
}
.absheader ul{
float:left;
width:100%;
padding-top:8px;	
}
.absheader ul li.twoh{
float:left;
list-style:none;
font-size:15px;
padding-right:23px;
text-align:center	
}
.absheader ul li.twoh.first{
text-align:left	
}
.absheader ul li.twoh.two{
padding-left:100px	
}
.absheader ul li a.two{
color:#181719;
padding-left:0px;
text-align:left	
}
.absheader ul li.twoh a:hover{
color:#0066b3;
		
}
.absheader ul li.twoh a.active{
color:#0066b3		
}
.header_bottom{
float:left;
width:985px;
height:23px;
padding-top:2px;

}
.header_bottom ul{
float:left;
width:100%	
}
.header_bottom ul li{
float:left;
list-style:none;
font-size:15px;
padding-right:23px;
text-align:center	
}
.header_bottom ul li.first{
text-align:left	
}
.header_bottom ul li.two{
padding-left:100px	
}
.header_bottom ul li a{
color:#181719	
}
.header_bottom ul li a:hover{
color:#0066b3;
		
}
.header_bottom ul li a.active{
color:#0066b3		
}
.main_container{
float:left;
width:100%;
height:697px;	
}
.about_left{
float:left;
width:583px;
padding-top:80px;	
}
.main_container h2{
float:left;
width:100%;
color:#0066b3;
font-size:25px;
font-family: 'Myriad Pro';
font-weight:normal;
margin-bottom:18px;	
}
.main_container h3{
float:left;
width:100%;
padding-bottom:3px;
font-weight:normal;
font-size:24px;
color:#ffffff	
}
.about_left_desc{
float:left;
width:607px;
height:474px;
text-align:justify;
font-size:16px;
color:#afb7c0;
font-family: 'Myriad Pro';	
}
.descabout{
float:left;
width:560px;

}
.about_right{
float:right;
width:370px;
padding-top:100px	
}
.about_right ul{
float:left;
width:100%	
}
.about_right ul li{
float:left;
list-style:none;
width:366px;
padding:2px;
height:154px;
margin-bottom:13px;
background:#000	
}
.footer_about{
float:left;
width:100%;
height:139px;	
}
.footer_news{
float:left;
width:100%;
height:223px;	
}
.footer_projects{
float:left;
width:100%;
height:35px;
padding-top:290px;	
}
.footer{
float:left;
width:100%;
height:35px;
margin-bottom:23px;
background:#231f20	
}
.footer.proj{
margin-bottom:0px	
}
.footer_text{
float:left;
color:#0577ce;
padding-top:11px;
font-family: 'Myriad Pro';	
}
.footer_text.one{
padding-left:236px;	
}
.footer_text.two{
padding-left:22px;	
}
.footer_text.three{
float:right;
padding-left:0px;	
}
.facebook_f{
float:left;	
padding-left:9px;
padding-top:5px
}
.services_left{
float:left;
width:515px;
padding-top:77px;	
}
.services_scroll{
float:left;
width:515px;
height:400px	
}
.services_left ul{
float:left;
width:100%	
}
.services_left ul li{
float:left;
list-style:none;
width:100%;
padding-bottom:15px	
}
.services_cur{
float:left;
width:19px;
height:24px;
background:url(../images/cur.png) no-repeat center top;	
}
.services_top{
float:left;
width:100%;
cursor:pointer;	
}
.services_cur.actserv{
width:24px;
height:19px;
margin-left:-2px;
background:url(../images/cur_active.png) no-repeat center top;	
}

.services_title{
float:left;
width:450px;
padding-left:8px;
color:#afb7c0;
margin-top:2px;
font-size:21px;
font-family: 'Myriad Pro';		
}
.services_desc{
float:left;
width:515px;
font-size:16px;
font-family: 'Myriad Pro';
color:#7c7c7d;
text-align:justify;
padding-top:3px;
padding-bottom:3px;
display:none	
}
.services_right{
float:right;
width:441px;
height:363px;
margin-top:45px;
position:relative;
border:1px solid #59595b	
}
.services_right_abso{
position:absolute;
z-index:20;
top:0px;
left:0px;
width:441px;
height:363px;
display:none	
}
.contactinfo{
float:left;

width:100%;
padding-bottom:35px	
}
.message{
float:left;
width:100%;
height:120px;	
}
.contactinfo_left{
float:left;
width:370px;
font-size:16px;
color:#b5bdc5	
}
.contactinfo_left a{
color:#b5bdc5
}
.contactinfo_left a:hover{
color:#0066b3	
}
.contact_left{
float:left;
width:370px;	
}
.input_contact{
float:left;
padding-left:12px;
width:358px;
height:35px;
color:#8f8485;
background:#FFF;
margin-bottom:7px;	
}
.input_contact.textarea{
height:88px;
padding-top:12px;
font-size:12px;
color:#8f8485;
font-family:Arial, Helvetica, sans-serif;
resize:none	
}
.submit_contact{
float:left;
width:100%;
text-align:center;
padding:9px 0px;
color:#FFF;
font-size:14px;
cursor:pointer;
font-family: 'Myriad Pro';
background:#848485;	
}
.submit_contact:hover{
opacity:0.8;	
}
.contact_right{
float:right;
width:420px;	
}
.map{
float:left;
width:418px;
height:268px;
border:1px solid #81848b	
}
.news{
float:left;
width:100%;
padding-top:19px	
}
.news_left{
float:left;
width:490px;
padding:1px;
height:874px;
background:#b7bfc9	
}
.news_leftbg{
float:left;
width:490px;
padding-top:24px;
height:854px;
background:#2b2c30	
}
.newsscroll{
float:left;
width:490px;
height:840px;	
}
.news_right{
float:right;
width:508px;
height:449px;
background:#b7bfc9;	
}
.news_rightbg{
float:right;
width:507px;
padding:1px;
padding-left:0px;
border-left:0px;
height:447px;
position:relative;	
}
.news_rightbg_abso{
position:absolute;
z-index:20;
display:none;
top:1px;
left:0px;
height:447px;
width:507px;	
}
.news_list{
float:left;
width:445px;	
}
.news_list ul{
float:left;
width:100%	
}
.news_list ul li{
float:left;
list-style:none;
width:100%	
}
.news_list_gallery{
float:left;
width:106px;
height:102px;	
overflow:hidden;
}
.news_list_right{
float:right;
width:320px;	
}
.news_list_right h4{
float:left;
width:100%;
font-weight:normal;
font-size:15px;
color:#a6b0bd;	
}
.news_list_right h5{
float:left;
width:100%;
font-weight:normal;
font-size:13px;
color:#a6b0bd;	
}
.news_list_desc_all{
float:left;
width:100%;
padding-bottom:30px;
margin-bottom:6px;
background:url(../images/news_border.jpg) no-repeat center bottom;
}
.news_list_desc_all.last{
background:none	
}
.readmore_news{
float:left;
font-size:13px;
color:#ffffff;
width:100%;
cursor:pointer;
padding-top:3px;	
}
.readmore_news:hover{
color:#0066b3	
}
.news_list_desc{
float:left;
width:320px;
padding-top:15px;
text-align:justify;
font-size:13px;
color:#a6b0bd;
height:15px;
overflow:hidden;
}
.galnews{
padding-bottom:7px	
}
.projects_top{
float:left;
width:948px;
height:438px;
background:#131215;
margin-top:12px;
margin-bottom:23px;
border:1px solid #c2c9d2	
}
.projects_top_left{
float:left;
width:776px;
height:438px;
position:relative;
border-right:1px solid #c2c9d2	
}
.projects_gallery_abso{
position:absolute;
z-index:20;
width:190px;
top:74px;
right:11px;
}
.projects_gallery_relative{
float:left;
width:190px;
height:285px;
position:relative;
overflow:hidden	
}
.curproj_top{
position:absolute;
z-index:20;
top:-24px;
left:80px;	
}
.curproj_bottom{
position:absolute;
z-index:20;
bottom:-30px;
left:80px;	
}
.carousel{
float:left;
width:100%;
position:relative;
width:190px;
height:285px;	
}
.projects_gallery{
position:absolute;
z-index:20;
width:190px;
top:0px;
left:0px;	
}
.projects_gallery ul{
float:left;
width:100%	
}
.projects_gallery ul li{
float:left;
list-style:none;
width:188px;
height:89px;
margin-top:4px;
border:1px solid #0066b3	
}
.projects_top_right{
float:right;
width:157px;
color:#0066b3;	
}
.projects_top_right h4{
float:left;
width:100%;
color:#0066b3;
font-weight:bold;
color:#0066b3;
padding-bottom:15px;
padding-top:15px;
font-size:12px;	
}
.projects_top_right ul{
float:left;
width:100%;
	
}
.projects_top_right ul li{
float:left;
width:100%;
list-style:none;
font-family: 'Myriad Pro';
padding-bottom:13px;
color:#fff;	
}
.projects_bottom{
float:left;
width:704px;
margin-left:114px;
	
}
.projects_bottom ul{
float:left;
width:100%;	

}
.projects_bottom ul li{
float:left;
list-style:none;
width:215px;
height:129px;
margin-bottom:44px;

position:relative;
border:1px solid #0066b3	
}
.projects_bottom ul li.one{
margin-right:26px;	
}
.projects_bottom ul li.last{
float:right
}
.projects_title{
position:absolute;
z-index:20;
bottom:-13px;
left:21px;
width:168px;
height:18px;
padding-top:4px;
color:#ffffff;
font-family: 'Myriad Pro';
background:#0066b3;
border:1px solid #231f20;
text-align:center;	
}
.ligne_search{
float:left;
width:100%;	
}
.relative_search{
float:right;
width:242px;
height:24px;
position:relative	
}
.abso_search{
position:absolute;
z-index:20;
right:5px;
top:3px;
cursor:pointer
}
.searchbyname{
float:right;
width:240px;
padding-left:4px;
height:22px;
background:#bcbec0;
border:1px solid #6d6e70;
color:#6d6e70;
position:relative;
z-index:20;	
}
.home_projects_top{
float:left;
width:100%;
padding-top:20px;	
}
.home_gallery{
float:left;
width:967px;
height:447px;
cursor:move;
border:1px solid #b7bfc9;
margin-right:23px	
}
.home_left{
float:left;
width:315px;
padding-top:29px	
}
.home_right_relative{
float:right;
width:648px;
height:446px	
}
.home_right{
float:left;
/*width:570px;
height:411px;*/
width:0px;
height:0px;
position:relative;
z-index:20;
/*padding:25px 35px 0px 40px;*/
padding:0px;
margin-top:9px;
background:#2b2c30;
	
}
.home_right ul{
float:left;
width:100%	
}
.home_right ul li{
float:left;
width:100%;
list-style:none	
}
.home_right_image{
float:left;
width:190px;
height:102px;
background:#fff;	
}
.home_right_desc{
float:right;
width:360px;	
}
.projtoph{
float:left;
width:100%;
height:50px	
}
.home_right_desc h4{
float:left;
width:100%;
font-size:15px;
	
}
.home_right_desc h4 a{
color:#a6b0bd;	
}
.home_right_desc h4 a:hover{
color:#0577ce;	
}
.home_right_desc h5{
float:left;
width:100%;
font-size:13px;
	
}
.home_right_desc h5 a{
color:#a6b0bd;	
}
.home_right_desc h5 a:hover{
color:#0577ce;	
}
.projhome_desc{
float:left;
width:100%;
font-size:13px;
color:#a6b0bd	
}
.home_readmore{
float:right;
width:100%;
font-size:13px;
text-align:right;
padding-bottom:18px;
margin-bottom:18px;
background:url(../images/border_home.jpg) no-repeat center  bottom	
}
.home_readmore a{
color:#ffffff;	
}
.home_readmore a:hover{
color:#0577ce;	
}
.gethome{
float:left;
cursor:pointer	
}
.curhome{
float:left;
padding-left:5px	
}
.home_readmore.last{
background:none	
}
.latest_news_home{
float:left;
width:100%;
padding-bottom:12px;
position:relative	
}
.text_home{
float:left;
font-size:15px;
color:#ffffff;
padding-left:10px;
padding-top:2px;
	
}
.ligne{
position:absolute;
z-index:40;
	
}
.ligne.one{
top:12px;
left:133px;
width:0;
/*width:121px;*/
height:2px;
background:url(../images/ligne1.png) no-repeat	
}
.ligne.two{
left: 252px;
top: 18px;
width:0;
width:3px;
/*height:53px;*/
height:0px;
background:url(../images/ligne2.png) no-repeat	
}
.ligne.three{
left: 259px;
top: 69px;
width:0;
/*width:52px;*/
height:3px;
background:url(../images/ligne3.png) no-repeat	
}
.ligne.four{
top:12px;
left:146px;
width:0;
/*width:121px;*/
height:2px;
background:url(../images/ligne4.png) no-repeat	
}
.ligne.five{
left: 252px;
top: 17px;
width:0;
width:3px;
/*height:53px;*/
height:0px;
background:url(../images/ligne2.png) no-repeat	
}
.ligne.six{
left: 259px;
top: 68px;
width:0;
/*width:52px;*/
height:3px;
background:url(../images/ligne3.png) no-repeat	
}

.loader{
float:left;
width:100%;
height:100%;
background:url(../images/ajax-loader.gif) no-repeat center center	
}
.loader_news{
float:left;
width:100%;
height:100%;
background:url(../images/ajax-loader_news.gif) no-repeat center center		
}
.noproj{
float:left;
width:100%;
font-size:26px;	
color:#ffffff;
padding-top:50px;
position:relative;
font-family: 'Myriad Pro';
}
/*         * *     * ************************************* SMOOTH SLIDER********************/
#makeMeScrollable
		{
			width:100%;
			height: 449px;
			position: relative;
		}
#makeMeScrollable div.scrollableArea img
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
			/* If you don't want the images in the scroller to be selectable, try the following
			   block of code. It's just a nice feature that prevent the images from
			   accidentally becoming selected/inverted when the user interacts with the scroller. */
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
		}
/*********************************************************** pagination *******************************/
.pagination {
 float:right;
}

.pagination ul {
  display: inline-block;
  margin-bottom: 0;
  width:100%;
  clear:both;
  text-align:center;

}

.pagination ul > li {
  display: inline-block;
  margin:0 2px;
  background:#231f20;
  

}

.pagination ul > li > a,
.pagination ul > li > span {
  padding: 1px 8px;
  line-height: 20px;
  text-decoration: none;
 	border:1px solid #0066b3;
  display: inline-block;
  color:#FFF
}
.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
 background: #0066b3;
 color:#fff;
 border:1px solid #231f20;
}
/* END PAGINATION */