* {margin:0; padding:0;}

html, body, form, fieldset, label, table, tbody, tfoot, thead, tr, th, td, dl, dt, dd, a, p, img, h1, h2, h3, h4, h5, h6{margin:0; padding:0}
ul, ol, li{margin:0;padding:0}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, audio, video { display: block; }

html {overflow-y: scroll;}

body, html{
	height: 100%;
	font:11px/16px Verdana, Geneva, sans-serif;
	}

#wrapper {
	width: 960px;
	margin: auto;
	height: auto;
	min-height:100%;
	background: -webkit-linear-gradient(90deg,#CDC4BC,#E6E6E6);
	background: -o-linear-gradient(90deg,#CDC4BC,#E6E6E6); 
	background: -moz-linear-gradient(90deg,#CDC4BC,#E6E6E6);
	background: linear-gradient(90deg,#CDC4BC,#E6E6E6);
	}

* html #wrapper {height:100%;}


a, img{border:0; outline:none;}

a{text-decoration:none; outline:0; list-style:none;}

ul{list-style:none;}

img{ max-width:100% }

h1.logo {
   position:absolute;
  top:0;
  left:0;
  text-indent:-9999
}

h2{
	font-family:Verdana, Geneva, sans-serif;
	font-size: 11px;
	color:#039;
	font-weight:100;
}

h3{
	font-family:Verdana, Geneva, sans-serif;
	font-size: 10px;
	color:#039;
	font-weight:100;
}

h4{
	font-family:Verdana, Geneva, sans-serif;
	font-size: 9px;
	color:#039;
	font-weight:100;
}



p{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	text-align : justify;
	color: #3D4952;
	line-height:normal;
	margin-left:10px;
	margin-right: 10px;
	padding:20px 20px;
}

/*HEADER------------------------------*/
header {
	width: 100%;
	background: -webkit-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: -o-linear-gradient(180deg,#CDC4BC,#E6E6E6); 
	background: -moz-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: linear-gradient(180deg,#CDC4BC,#E6E6E6);
	}

#header_960 {
	width: 960px;
	height: 100px;
	margin: 0 auto;	
	position:relative;
	text-decoration:none;
	color:#3D4952;
	}


nav{
	position:absolute;
	width: auto;
	height: auto;
	right:0;
	bottom:0;
	background: -webkit-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: -o-linear-gradient(180deg,#CDC4BC,#E6E6E6); 
	background: -moz-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: linear-gradient(180deg,#CDC4BC,#E6E6E6);
	border-radius: 15px 0 0 0;
	text-decoration:none;
	color:#3D4952;
	box-shadow: 0 4px 6px rgba (0,0,0 0.35);
	z-index:1;
	}

nav ul li {
	float: left;
	padding:5px 10px 5px 10px;
	list-style-position:outside;
    background: -webkit-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: -o-linear-gradient(180deg,#CDC4BC,#E6E6E6); 
	background: -moz-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: linear-gradient(180deg,#CDC4BC,#E6E6E6);
	color:#3D4952;	
	margin:0;
	text-decoration:none;
}

   ul, ol {
                list-style:none;
			}
            
            .nav > li {
                position:absolute;
				right:0;
				bottom:0;
				background: -webkit-linear-gradient(90deg,#CDC4BC,#E6E6E6);
				background: -o-linear-gradient(90deg,#CDC4BC,#E6E6E6); 
				background: -moz-linear-gradient(90deg,#CDC4BC,#E6E6E6);
				background: linear-gradient(90deg,#CDC4BC,#E6E6E6);
				border-radius: 15px 0 0 0;
				text-decoration:none;
				color:#3D4952;
				box-shadow: 0 4px 6px rgba (0,0,0 0.35);
				}
            }
            
            .nav li a {
                background: -webkit-linear-gradient(90deg,#CDC4BC,#E6E6E6);
				background: -o-linear-gradient(90deg,#CDC4BC,#E6E6E6); 
				background: -moz-linear-gradient(90deg,#CDC4BC,#E6E6E6);
				background: linear-gradient(90deg,#CDC4BC,#E6E6E6);
                color:#3D4952;
                text-decoration:none;
                padding:10px 12px;
                display:block;
            }
            
            .nav li a:hover {
                color:#3D4952;
            }
            
            .nav li ul {
                display:none;
                position:absolute;
				margin-top:5px;
                width:100px;
				height:auto;
            }
            
            .nav li:hover > ul {
                display:block;
            }
            
            .nav li ul li {
                position:relative;
            }
            
            .nav li ul li ul {
                right:-140px;
                top:0px;
            }





/*CONTENT------------------------------*/
#content {
	width: 100%;
	padding-bottom: 200px;
	}
	
	
#content_slider {
	display:block;
	width: 960px;
	overflow: hidden;
	}	
	
#slideshow { 
    margin:auto; 
    position: relative; 
    width: 960px; 
    height: 250px;
	top:10px;	 
	margin: 0 auto;
	overflow: hidden;
}

#slideshow > div { 
    position: absolute; 
	width: 100%;
	height: 100%;
	
}


article{
	float: left;
	position:relative;
	width: 960px;
	height: auto;
	margin: 0 auto;	
		
}		


.boxes{}

.boxes li{
	list-style:none;
	display:inline-block;
	background: -webkit-linear-gradient(180deg,#FCF6EE,#E6E6E6);
	background: -o-linear-gradient(180deg,#FCF6EE,#E6E6E6);
	background: -moz-linear-gradient(180deg,#FCF6EE,#E6E6E6);
	background: linear-gradient(180deg,#FCF6EE,#E6E6E6);
	width:50%;
	padding:20px;
	float:left;
	margin:20px 20px 20px 0;
	overflow:auto;
}

.boxes li:last-child{
	width:45%;
	margin:20px 0 20px 0;
	float:right;
}
div .home{
	position: relative;
	float:left;
	top:200px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}		

div .mechanical{
	position: relative;
	float:left;
	top:0px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}		

div .services{
	position: relative;
	float:left;
	top:200px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}		
div .electricity{
	position: relative;
	float:left;
	top:60px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}	

div .steelwork{
	position: relative;
	float:left;
	margin-top:20px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}	

div .hydraulic_piping{
	position: relative;
	float:left;
	top:0px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}		
	div .regulators_laboratory{
	position: relative;
	float:left;
	top:20px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}		
	
div .depot{
	position: relative;
	float:left;
	top:40px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}		
   div .agents{
	position: relative;
	float:left;
	top:200px;
	background:url(file:///C|/Users/Maria/Desktop/riiinnn/imgs/agents.jpg) no-repeat center;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}		

div .news{
	position: relative;
	float:left;
	top:100px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

}	

div .mapa_localización{
	position: relative;
	float:left;
	margin-top:60px;
	border: 5px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);

	 	}	
	
footer {
	position:relative;
	margin: 0 auto;	
	left:0;
	bottom:0;
	width:960px;
	height:auto;
	background: -webkit-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: -o-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: -moz-linear-gradient(180deg,#CDC4BC,#E6E6E6);
	background: linear-gradient(180deg,#CDC4BC,#E6E6E6);
	font-family: Verdana, Geneva, sans-serif;
	text-decoration:none;
	font-size: 12px;
	text-align:right;
	color:#CCC;
	overflow:hidden;
	z-index:101;
	
}	

#footer_960 {
	float:left;
	width: 960px;
	height: 60px;
	margin: 0 auto;	
	position: relative;
	margin-top:auto;
	}	
	

	
	
/*UNDER 960PX---------------------------------------*/	

@media screen and (max-width: 960px) {
	
	#wrapper {
	width: 100%;
	margin: auto;
	height: auto;
	min-height:100%;
	}
	


	#header_960 {
	width: 100%;
	height: auto;
	overflow:auto;
	text-decoration:none;
	}
	
	#header_960 img {
	display: block;
    margin-left: auto;
    margin-right: auto;
	
	
	}

	#footer_960 {
	width: 100%;
	height: auto;
	position: static;
	margin: 0 auto;
	
	}
	
	
	
   	#content_slider {
	width: 100%;
	margin: 0 auto;
	max-height:100%;
	padding:0px;
	
	}

	#slideshow { 
    width: auto; 
    height: auto;
	position: static;
	margin:auto;
	
	}
	
	
	section{
	width: 100%;
	height: auto;
	position: static;
	margin: 0 auto;
	}
	
	.boxes li{
		
	width:auto;
	margin:0 0 20px 0;
	}

	.boxes li:last-child{
	margin:0 0 20px 0;
	float:none;
	}

	.boxes{
	
	margin:250px 0 0 0;
	}
	
			
	nav{
	position:static;
	width:100%;
	background:none;
	bottom:0;
	}
	
	nav ul{
	margin:20px;
	background:none;
	}
	
	nav ul li{
	float:none;
	border-top:1px solid #707070;
	}
		
	nav ul li:last-child{
	border-bottom:1px solid #707070;
	}
	
	
	div .home,
	div .mechanical,
	div .steelwork,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	width:350px;
	top:auto;
	margin-left:260px;
}

	div .services,
	div .news{
	width:270px;
	top:auto;
	margin-left:260px;
}

div .electricity{
	width:200px;
	top:auto;
	margin-left:260px;
}
div .steelwork{
	width:200px;
	top:auto;
	margin-left:260px;
}
div .mapa_localización{
	top:auto;
	margin-left:80px;
}

@media screen and (max-width: 900px) {
	
	
	.boxes{
	
	margin:240px 0 0 0;
	}
	
	
}	

@media screen and (max-width: 860px) {
	
	.boxes{
	
	margin:220px 0 0 0;
	}
	
	div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot{
	margin-left:200px;
}
  
  	div .services,
	div .electricity,
	div .news{
	margin-left:200px;
}

div .steelwork{
	margin-left:200px;
}

  

}		

@media screen and (max-width: 800px) {
	
	.boxes{
	
	margin:210px 0 0 0;
	}
	

	#slider {
    margin-top:40px;
	margin-left:15px;
}
	
}	


@media screen and (max-width: 780px) {
	
	.boxes{
	
	margin:200px 0 0 0;
	}
	
    div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	margin-left:160px;
}

    div .services,
	div .electricity,
	div .news{
	margin-left:160px;
}
	
div .steelwork{
	margin-left:160px;
}	
	
	div .mapa_localización{
	  margin-top:40px;
	  margin-left: 30px;
	}	
	
	#slider {
    float:left;
    margin-top:40px;
	margin-left:30px;	
	}

}


@media screen and (max-width: 640px) {
	
	.boxes{
	
	margin:180px 0 0 0;
	}
	
	
	  div .mapa_localización{
	  margin-top:0px;
	  margin-left: 50px;
	}	
}


@media screen and (max-width: 560px) {
	
	.boxes{
	
	margin:150px 0 0 0;
	}
	div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	margin-left:100px;
}
	div .services,
	div .electricity,
	div .news{
	margin-left:100px;
}

div .steelwork{
	margin-left:100px;
}

}



@media screen and (max-width: 480px) {
	
	.boxes{
	
	margin:120px 0 0 0;
	}
	
	div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	width:330px;
	top:auto;
	margin-left:15px;
}
	
	
	div .services,
	div .news{
	width:270px;
	top:auto;
	margin-left:15px;
}

div .electricity{
	top:auto;
	margin-left:15px;
}
div .steelwork{
	margin-left:15px;
}	
}

@media screen and (max-width: 360px) {
	
	.boxes{
	
	margin:110px 0 0 0;
	}

	
	div .mapa_localización{
	margin-top:10px;
	margin-left: 30px;
	}	
	
	div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	width:300px;
	top:auto;
	margin-left:10px;
}

	div .services,
	div .news{
	width:270px;
	top:auto;
	margin-left:10px;
}

div .electricity{
	top:auto;
	margin-left:10px;
}

	div .mapa_localización{
	  margin-top:0px;
	  margin-left: 10px;
	}
	
	#slider {
    margin-top:20px;
	margin-left:10px;	
	}	
}


@media screen and (max-width: 320px) {
	
	.boxes{
	
	margin:90px 0 0 0;
	}
	
div .home,
div .mechanical,
div .hydraulic_piping,
div .regulators_laboratory,
div .depot,
div .agents{
	width:230px;
	top:auto;
	margin-left:10px;
}
div .services,
div .news{
	
	width:230px;
	top:auto;
	margin-left:10px;
}
	
	#slider {
    margin-top:10px;
	margin-left:5px;
}
	
}

@media screen and (max-width: 280px) {
	
	.boxes{
	
	margin:70px 0 0 0;
	}
	
	div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	width:200px;
	top:auto;
	
	margin-left:10px;
}

	div .services,
	div .news{
	width:270px;
	top:auto;
	margin-left:10px;
}

	div .mapa_localización{
	margin-left: 7px;
	}	
	
}

@media screen and (max-width: 260px) {
	
	.boxes{
	
	margin:50px 0 0 0;
	}
	
	
	div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	width:180px;
	top:auto;
	margin-left:10px;
}

	div .services,
	div .news{
	width:180px;
	top:auto;
	margin-left:10px;
}
	#slider {
    margin-top:0px;
	margin-left:0px;
}

div .mapa_localización{
	  margin-top:0px;
	  margin-left: 0px;
	}	
	
}

@media screen and (max-width: 220px) {
	
	.boxes li,	
	.boxes li:last-child{
	margin-left:5px;
    }
    
	div .home,
	div .mechanical,
	div .hydraulic_piping,
	div .regulators_laboratory,
	div .depot,
	div .agents{
	width:160px;
	top:auto;
    margin-left:5px;
}
  
	div .services,
	div .news{
	width:160px;
	top:auto;
    margin-left:5px;
}  
   
   div .electricity{
	top:auto;
	margin-left:5px;
} 
	div .mapa_localización{
	margin-left: 5px;
	}	
	
	
	
}