@charset "utf-8";
/* CSS Document */
@font-face {
   font-family: "Titillium Web";
   font-style: normal;
   font-weight: normal;
   src: url(vista/fuentes/TitilliumWeb-Regular.ttf);
}
@font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: normal;
   src: url(vista/fuentes/Roboto-Regular.ttf);
}
@font-face {
   font-family: "Roboto Medium";
   font-style: normal;
   font-weight: normal;
   src: url(vista/fuentes/Roboto-Medium.ttf);
}

body{
	text-align:center;
	font:lighter 0.8em "Segoe UI", "Segoe UI Symbol", "Segoe UI Light";
	margin:0 auto;
	/*width:1349px;*/
}

	



#cabecera{
	text-align:left;
	width:100%; height:40px;
	position:fixed; left:0%; top:0px; 
	background:#FFF;
	color:#333; box-shadow:0px 2px 10px #CCC;
}
	#cabecera h1, #cabecera h4,#cabecera h2,#cabecera h5{
		font-size:2.0em; font-weight:lighter; text-align:left; margin:0px; 
		color:#333;  position:relative; margin-left:330px;
	}
	#cabecera h2{
		font-size:1.5em; color:#333;margin:5px; text-align:center; font-weight:normal; font-family: 'Open Sans', sans-serif; margin-left:10%;
	}
	#cabecera h1{
		display:none;
	}
	#cabecera h4{
		font-size:1em; color:#000; display:inline-block;
	}
	
	
#divLogin{
 	width:200px; height:30px; background:#FFF; float:right; top:-26px; position:relative; cursor:pointer;
}
	#divLogin h4{
		color:#000; margin-left:40px; padding:0px; font-size:1.5em; top:0px; 
		font-weight:normal; font-family: 'Atomic Age', cursive;  float:left;
	}
	#divLogin img{
		height:20px; width:auto; margin:0px; position:relative;
	}
nav{
	width:100%; height:50px; background:#EEE; display:none; top:0px;
}
	
	
	#navegacion{
		top:-27px; position:relative; height:44px; border:0px solid #ccc; border-bottom:0px; background:#FFF; float:right;
	}
	#navegacion ul li{
		list-style:none; display:inline-block; float:left; left:0px; position:relative; top:-10px;
		margin:0px; padding:10px 35px; font-weight:normal; border-right:1px solid #ccc;  background:#fff;
		color:#000; float:right; font-family: 'Open Sans', sans-serif;
		cursor:pointer; font-size:1.2em;
	}
	
	#navegacion ul li a{
		text-decoration:none; color:#000;
	}
	#navegacion ul .seleccionado, #navegacion ul li:hover{
		color:#0090FF; 
	}
	
section{
	width:100%; height:350px; position:relative; top:0px; border:0px solid #000;
}
	a{
		text-decoration:none;
	}
#ecologico h1, #modernizacion h1, #contacto h1, #historia h1, #nosotros h1{
		margin:0px; font-size:4.0em; width:500px; text-align:justify; color:#000; padding:50px; 
		position:relative; left:50px; top:50px; text-shadow:5px 5px 10px #ccc; 
		
		
	}	
	#principal{
		position:relative; top:0px; background:#FFF; text-align:center; 
	}
	
	#sliderArticle{
		width:1350px; margin:0 auto;  top:0px; position:relative; height:500px; 
		
	}
	#principal #izquierdo{
		width:350px; height:800px;		
		transform:translate(-45%,-15%) rotate(30deg);background:#FFF;
		float:left; position:absolute;
		box-shadow:2px 2px 5px rgba(250,250,250,1);
		
	}
	
	#principal img{
		width:250px; margin:1%; left:-50px; position:relative;
	}
	
	#izquierdo img{
		position:relative; width:100px; height:auto;  left:50px;  top:100px;
	}
	
	
	
	
	
	
.separador{
	width:100%; height:200px; background:rgb(0,100,200); 
}
	.separador h1{
		color:#FFF;  font-weight:lighter; position:relative; top:50px; font-size:3.0em; margin:0px;
	}
	.separador p{
		margin:80px; margin-left:10%;
	}
	





section h2{
		width:80%; margin:0px; font-size:2.0em; position:relative; left:50px; top:50px; text-align:justify;
		background:rgba(255,255,255,0.5);  padding:10px 50px; font-weight:lighter; text-indent:1cm;
	}
	
	
	
/*Sección modernización*/
#bodyModernizacion{
	text-align:center;
}
	

	#bodyModernizacion #principal{
		background-color:#FFF;
	}
		#bodyModernizacion #principal #izquierdo{
			 background:#FFF;
		}
		#bodyModernizacion #principal h1{
			font-size:8.0em; color:rgb(83,33,68); margin:0px; position:relative; margin-left:350px; top:100px;
		}
		#bodyModernizacion #principal h3{
			 color:rgb(63,63,63); font-size:3.0em; margin-left:150px; top:100px; position:relative;
		}
	#bodyModernizacion .separador{
		background:rgb(83,33,68);
		
	}
#bodyModernizacion .separadorM{
		width:30%; height:500px;
		background:rgb(255,255,255); box-shadow:1px 1px 50px #CCC;
		transform:translate(-45%,-15%) rotate(25deg); 
		float:left; position:absolute; 
		
}
	#bodyModernizacion .separadorD{
		width:30%; height:300px; top:-500px; position:relative;
		/*background:-ms-linear-gradient(top, #FFF, #FFF);*/
		transform: rotate(0deg);background:rgb(83,33,68);
		float:right;
		
	}
	#bodyModernizacion .separadorD p{
		font-size:2.0em; font-weight:lighter;
		padding:20px;
	}
	#bodyModernizacion #unidades{
		position:relative; top:0; margin:0 auto;
	} 

	#bodyModernizacion section h2{
		background:#FFF; color: rgba(63,63,63,1); border:0px solid rgba(63,63,63,1); 
		font-size:4.0em; text-align:center; width:50%;margin:0 auto; font-family: 'Atomic Age', cursive; 
	}
	#bodyModernizacion #unidades img,#bodyModernizacion #monitoreo img{
		width:400px; height:auto; position:relative; top:-70px;
	}
	#bodyModernizacion #unidades  p, #bodyModernizacion #monitoreo  p{
		color:#FFF; font-size:2.0em; margin:75px 200px; font-family:"Segoe UI";  width:1000px; text-align:justify; padding:20px;
		background:#222;font-weight:lighter; 
	}
	#bodyModernizacion #unidades  p{
		margin:75px;
	}
	#bodyModernizacion #monitoreo{
		background:url(../images/mapa3.png) center;
	}

	#bodyModernizacion #inversion{
		
	}
	#bodyModernizacion #inversion article{
		width:400px; height:300px; background:#3C3C3C; float:left;  left:20%; position:relative; top:75px;
		padding:20px;
	}
		#bodyModernizacion #inversion #pioneros{
			left:30%;
		}
		
		#bodyModernizacion #inversion article p{
			font-size:2.0em; font-weight:lighter; text-indent:1cm;
		}
		
	#divForm form, #mostrar, #actualizacion{
		background:rgba(255,255,255,0.5); border:0px solid #000;
		width: 500px;
    	height: 150px;
    	margin: 0px;	/*margen superior debe ser igual a los otros o estaran separados*/
    	padding: 40px 0;
    	overflow: hidden;
    	position: relative;
		display:block;
		top:100px;
		left:550px;
	}	

		#divForm form label{
			color: #66e;
        	font-size: 1.2em;
        	font-weight: normal;
        	line-height: 14px;
        	float: right;
        	margin: 20px 50px 10px 10px; padding:10px 0px;	
        	width: 200px;
			text-align:justify; 
		}
		
		#divForm form h1, #mostrar h1{
			margin:0px auto; text-align:center; font-weight:lighter; background:#0090FF; color:#FFF;
		}
		
		#divForm form input, #contenedor form select{
        color: #333;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: lighter;
        font-size: 1.0em;
        width: 170px;
        height: 30px;
        padding: 0px 5px;
        margin: 25px 10px 5px 30px;	/*Separación entre cuadros de texto*/
        float: left;
        
		}
		#divForm form select{
			padding:0px;
		}
		
		#divForm form input.submit {
            border: none;
            width: 150px;
            height: 38px;
            position: relative;
            bottom: 2px;
			left:20px;
			top:0px;	background:#aaa; color:#fff;	
        }
		
		#divForm form input.submit:hover {
			background:#555; color:#fff;
		}
		
		
	@media only screen and (max-device-width: 800px){
		#bodyModernizacion #cabecera{
			height:300px;
		}
		#bodyModernizacion #cabecera h2{
			font-size:4.0em; text-align:center; width:60%; left:300px;
		}
		#bodyModernizacion #principal #izquierdo{
			 background:#FFF; box-shadow:2px 2px 50px #002; 
			 	width:350px; height:1200px;		
				transform:translate(-45%,-15%) rotate(20deg);background:#FFF;
				float:left; position:absolute;
		}
		#bodyModernizacion #principal{
			width:1300px; height:1300px;
		}
		#bodyModernizacion #principal h1{
			font-size:8.0em; color:rgb(83,33,68); margin:0px; position:relative; margin-left:350px; top:100px;
		}
		#bodyModernizacion #principal h3{
			 color:rgb(63,63,63); font-size:3.0em; margin-left:150px; top:100px; position:relative;
		}
	#bodyModernizacion .separador{
		background:rgb(83,33,68);
		
	}
#bodyModernizacion .separadorM{
		width:30%; height:300px;
		background:rgba(63,63,63,1);
		transform:translate(-45%,-15%) rotate(25deg); 
		float:left; position:absolute; 
		
}
	#bodyModernizacion .separadorD{
		width:30%; height:300px; top:-500px; position:relative;
		/*background:-ms-linear-gradient(top, #FFF, #FFF);*/
		transform: rotate(0deg);background:rgb(83,33,68);
		float:right;
		
	}
	#bodyModernizacion .separadorD p{
		font-size:5.0em; font-weight:lighter;
		padding:20px;
	}

	#bodyModernizacion section h2{
		background:rgba(63,63,63,1); color: #FFF; text-align:center; font-size:4.0em; width:100%;
	}
	
	#bodyModernizacion #unidades  p, #bodyModernizacion #monitoreo  p{
		color:#FFF; font-size:4.0em; margin:75px 200px; font-family:"Segoe UI";  width:1000px; text-align:justify; padding:20px 50px;
		background:#909; font-weight:lighter;
	}
	#bodyModernizacion #unidades  p{
		margin:75px 250px;
	}
	
	#principal #izquierdo img{
		position:relative; top:200px; width:150px;
	}
	
	#divForm{
		position:relative;  height:1000px; 
		top:450px; text-align:center;
	}	
	#divForm form, #mostrar, #actualizacion{
		/*background:rgba(255,255,255,0.5);*/
		width: 800px;
    	height: 800px;
    	margin: 0 auto;	/*margen superior debe ser igual a los otros o estaran separados*/
    	padding: 40px 0;
    	overflow: hidden;
    	position: relative;
		display:block;
		top:500px; 
	}	
	#divForm form{
		position:relative; margin:0 auto;
		left:0px; top:0px;
	}

		#divForm form label{
			color: #333;
        	font-size: 5em;
        	font-weight: lighter;
			margin:20px auto;
			text-align:center; width:800px; 
		}
		
		#divForm form h1, #mostrar h1{
			margin:0px auto; text-align:center; font-weight:lighter; background:#0090FF; color:#FFF;
		}
		
		#divForm form input, #contenedor form select{
        color: #333;
        border: 1px solid #ccc;
        font-family: Cantarell, Verdana, sans-serif;
        font-weight: lighter;
        font-size: 4.0em;
        width: 700px;
        height: 100px;
        padding: 0px 5px;
        margin: 20px 0px 20px 10px;	/*Separación entre cuadros de texto*/
        
        
		}
		#divForm form select{
			padding:0px;
		}
		
		#divForm form input.submit {
            border: none;
            width: 500px;
            height: 100px;
            position: relative;
            bottom: 2px; left:100px;
			margin:20 auto;
			top:0px;	background:#CCC; color:#fff;
			font-size:3.0em;
        }
		
		#divForm form input.submit:hover {
			background:#555; color:#fff;
		}
	}